快捷導(dǎo)航

一個可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件

更新時間：2010年07月17日 18:39:51 作者：

此文將實現(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代碼：

復(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 其實便是HTML模板Table , 將 .header 的行移到到表頭表格中作為表頭.
3.創(chuàng)建表主體
創(chuàng)建表主體,其實便是根據(jù)數(shù)據(jù)源及模板循環(huán)創(chuàng)建每一行 , 這里用了上篇文章提到的 Repeater 來創(chuàng)建, 詳細(xì) 請看用javascript實現(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.如何實現(xiàn)單元格編輯
雙擊td時在td中動態(tài)插入一個文件本框為將td的innerHTML給文本框，在文本焦點失去時，將文本框值賦給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"); 
}); 
} 
}); 