一個可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
更新時間:2010年07月17日 18:39:51 作者:
此文將實(shí)現(xiàn)一個的jQuery表格插件jQuery.DataGrid。需要的朋友可以參考下。
固定表頭
列寬可調(diào)整
單擊列頭可排序
雙擊單元格可編輯
可綁定數(shù)據(jù)源
看下效果吧:
HTML - 模板代碼:
<table id="test">
<tr class="header">
<td style="width: 100px;" sort='true'>
姓名
</td>
<td style="width: 100px;" sort='true'>
性別
</td>
<td style="width: 100px;" sort='true'>
年齡
</td>
<td style="width:200px;" sort='true'>
住址
</td>
</tr>
<tr class="itemtemplate">
<td editable='true'>
{姓名}
</td>
<td editable='true'>
{性別}
</td>
<td editable='true'>
{年齡}
</td>
<td editable='true'>
{住址}
</td>
</tr>
</table>
jsascript代碼:
//測試數(shù)據(jù)
var dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性別":"男","年齡":"51","住址":"許昌"},{"姓名":"諸葛亮","性別":"男","年齡":"40","住址":"南陽"},{"姓名":"周瑜","性別":"男","年齡":"40","住址":"江東"},{"姓名":"大喬","性別":"女","年齡":"30","住址":"江東"},{"姓名":"小喬","性別":"女","年齡":"28","住址":"江東"},{"姓名":"曹操","性別":"男","年齡":"51","住址":"許昌"},{"姓名":"諸葛亮","性別":"男","年齡":"40","住址":"南陽"},{"姓名":"周瑜","性別":"男","年齡":"40","住址":"江東"},{"姓名":"大喬","性別":"女","年齡":"30","住址":"江東"},{"姓名":"小喬","性別":"女","年齡":"28","住址":"江東"}]}';
//清空數(shù)據(jù)
$('#test').DataGridClear();
//設(shè)定行樣式
$('#test').DataGridSetItemClass("tr1","tr2","trhover");
//綁定數(shù)據(jù),并設(shè)置寬度高度
$('#test').DataGrid("100%",200,dataJsonStr);
結(jié)構(gòu)示意圖:

如何根據(jù)HTML模板創(chuàng)建DataGrid整個結(jié)構(gòu)?
1.首先創(chuàng)建 表頭 主體 等各區(qū)域:
TableBody.addClass('TableBody');
TableBody.wrap("<div id='"+MyTableId+"' class='houfeng-table'></div>");
var MyTable=$('#'+MyTableId);
TableBody.data('MyTable',MyTable);
TableBody.before("<table class='TableHead' ></table>");
var TableHead=MyTable.find(".TableHead");
TableBody.data('TableHead',TableHead);
TableBody.wrap('<div class="TableBodyArea"></div>');
TableHead.wrap("<div class='TableHeadArea' onselectstart='return false;'></div>");
var TableBodyArea=MyTable.find('.TableBodyArea');
var TableHeadArea=MyTable.find('.TableHeadArea');
TableBody.data('TableBodyArea',TableBodyArea);
TableBody.data('TableHeadArea',TableHeadArea);
上面代代中紅色高亮 TableBody 為表主體, TableHead 為表頭
2.創(chuàng)建表頭
TableBody.find('.header').clone().prependTo(TableHead);
TableBody 其實(shí)便是HTML模板Table , 將 .header 的行移到到表頭表格中作為表頭.
3.創(chuàng)建表主體
創(chuàng)建表主體,其實(shí)便是根據(jù)數(shù)據(jù)源及模板 循環(huán)創(chuàng)建每一行 , 這里用了 上篇文章提到的 Repeater 來創(chuàng)建, 詳細(xì) 請看用javascript實(shí)現(xiàn)Repeater.
4.處理當(dāng)列過多時橫向滾動條的問題
TableBodyArea.scroll(function (){
var ml=0-parseInt(TableBodyArea.attr('scrollLeft'));
TableHead.css('margin-left',ml);
});
TableBodyArea 為TableBody外包裹的一個Div
5.如何實(shí)現(xiàn)單元格編輯
雙擊td時在td中動態(tài)插入一個文件本框?yàn)閷d的innerHTML給文本框,在文本焦點(diǎn)失去時,將文本框值賦給td的innerHTML,將移除文本框 代碼如下:
TableBody.find('td').live('dblclick',function(){
var td=$(this);
if(td.attr('editable')=='true')
{
var text=td.text();
var html="<input type='text' class='TdEditTextBox' value='"+$.trim(text)+"' />";
td.html(html);
td.addClass("tdediting");
//
$(this).find('.TdEditTextBox').focus().focus().focus().focus();
$(this).find('.TdEditTextBox').blur(function(){
var val=$(this).val();
td.html(val);
td.removeClass("tdediting");
});
}
});
6. 如何排序:
由時間問題請容我下回分解??!
源碼下載: /201007/yuanma/DataGrid.rar
作者:houfeng
出處:http://houfeng.cnblogs.com
列寬可調(diào)整
單擊列頭可排序
雙擊單元格可編輯
可綁定數(shù)據(jù)源
看下效果吧:
HTML - 模板代碼:
復(fù)制代碼 代碼如下:
<table id="test">
<tr class="header">
<td style="width: 100px;" sort='true'>
姓名
</td>
<td style="width: 100px;" sort='true'>
性別
</td>
<td style="width: 100px;" sort='true'>
年齡
</td>
<td style="width:200px;" sort='true'>
住址
</td>
</tr>
<tr class="itemtemplate">
<td editable='true'>
{姓名}
</td>
<td editable='true'>
{性別}
</td>
<td editable='true'>
{年齡}
</td>
<td editable='true'>
{住址}
</td>
</tr>
</table>
jsascript代碼:
復(fù)制代碼 代碼如下:
//測試數(shù)據(jù)
var dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性別":"男","年齡":"51","住址":"許昌"},{"姓名":"諸葛亮","性別":"男","年齡":"40","住址":"南陽"},{"姓名":"周瑜","性別":"男","年齡":"40","住址":"江東"},{"姓名":"大喬","性別":"女","年齡":"30","住址":"江東"},{"姓名":"小喬","性別":"女","年齡":"28","住址":"江東"},{"姓名":"曹操","性別":"男","年齡":"51","住址":"許昌"},{"姓名":"諸葛亮","性別":"男","年齡":"40","住址":"南陽"},{"姓名":"周瑜","性別":"男","年齡":"40","住址":"江東"},{"姓名":"大喬","性別":"女","年齡":"30","住址":"江東"},{"姓名":"小喬","性別":"女","年齡":"28","住址":"江東"}]}';
//清空數(shù)據(jù)
$('#test').DataGridClear();
//設(shè)定行樣式
$('#test').DataGridSetItemClass("tr1","tr2","trhover");
//綁定數(shù)據(jù),并設(shè)置寬度高度
$('#test').DataGrid("100%",200,dataJsonStr);
結(jié)構(gòu)示意圖:

如何根據(jù)HTML模板創(chuàng)建DataGrid整個結(jié)構(gòu)?
1.首先創(chuàng)建 表頭 主體 等各區(qū)域:
復(fù)制代碼 代碼如下:
TableBody.addClass('TableBody');
TableBody.wrap("<div id='"+MyTableId+"' class='houfeng-table'></div>");
var MyTable=$('#'+MyTableId);
TableBody.data('MyTable',MyTable);
TableBody.before("<table class='TableHead' ></table>");
var TableHead=MyTable.find(".TableHead");
TableBody.data('TableHead',TableHead);
TableBody.wrap('<div class="TableBodyArea"></div>');
TableHead.wrap("<div class='TableHeadArea' onselectstart='return false;'></div>");
var TableBodyArea=MyTable.find('.TableBodyArea');
var TableHeadArea=MyTable.find('.TableHeadArea');
TableBody.data('TableBodyArea',TableBodyArea);
TableBody.data('TableHeadArea',TableHeadArea);
上面代代中紅色高亮 TableBody 為表主體, TableHead 為表頭
2.創(chuàng)建表頭
復(fù)制代碼 代碼如下:
TableBody.find('.header').clone().prependTo(TableHead);
TableBody 其實(shí)便是HTML模板Table , 將 .header 的行移到到表頭表格中作為表頭.
3.創(chuàng)建表主體
創(chuàng)建表主體,其實(shí)便是根據(jù)數(shù)據(jù)源及模板 循環(huán)創(chuàng)建每一行 , 這里用了 上篇文章提到的 Repeater 來創(chuàng)建, 詳細(xì) 請看用javascript實(shí)現(xiàn)Repeater.
4.處理當(dāng)列過多時橫向滾動條的問題
復(fù)制代碼 代碼如下:
TableBodyArea.scroll(function (){
var ml=0-parseInt(TableBodyArea.attr('scrollLeft'));
TableHead.css('margin-left',ml);
});
TableBodyArea 為TableBody外包裹的一個Div
5.如何實(shí)現(xiàn)單元格編輯
雙擊td時在td中動態(tài)插入一個文件本框?yàn)閷d的innerHTML給文本框,在文本焦點(diǎn)失去時,將文本框值賦給td的innerHTML,將移除文本框 代碼如下:
復(fù)制代碼 代碼如下:
TableBody.find('td').live('dblclick',function(){
var td=$(this);
if(td.attr('editable')=='true')
{
var text=td.text();
var html="<input type='text' class='TdEditTextBox' value='"+$.trim(text)+"' />";
td.html(html);
td.addClass("tdediting");
//
$(this).find('.TdEditTextBox').focus().focus().focus().focus();
$(this).find('.TdEditTextBox').blur(function(){
var val=$(this).val();
td.html(val);
td.removeClass("tdediting");
});
}
});
6. 如何排序:
由時間問題請容我下回分解??!
源碼下載: /201007/yuanma/DataGrid.rar
作者:houfeng
出處:http://houfeng.cnblogs.com
您可能感興趣的文章:
- Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
- Angular指令封裝jQuery日期時間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解
- jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
- Vue.js列表渲染綁定jQuery插件的正確姿勢
- jQuery給動態(tài)添加的元素綁定事件的方法
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery中綁定事件(bind())和移除事件(unbind())
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
- jQuery事件綁定和委托實(shí)例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jquery 插件重新綁定的處理方法分析
相關(guān)文章
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門知識,該插件捆綁了一套有用的驗(yàn)證方法,包括 URL 和電子郵件驗(yàn)證,同時提供了一個用來編寫用戶自定義方法的 API,感興趣的小伙伴們可以參考一下2015-12-12jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動匹配相關(guān)信息,感興趣的小伙伴們可以參考一下2016-05-05jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06jQueryUI Sortable 應(yīng)用Demo(分享)
下面小編就為大家?guī)硪黄猨QueryUI Sortable 應(yīng)用Demo(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09可以顯示單圖片,多圖片ajax請求的ThickBox3.1類下載
ThickBox是一個基于JQuery類庫的擴(kuò)展 以下的是ThickBox3.1的實(shí)例+代碼調(diào)用方法2007-12-12jquery?追加元素append、prepend、before、after用法與區(qū)別分析
在jquery中append、prepend、before、after方法是對數(shù)據(jù)元素節(jié)點(diǎn)的操作系列方法了,這些方法大家了解嗎?如果不了解就可以和小編來看看它們用法2016-12-12