此文将实现一个的jQuery表格插件jQuery.DataGrid。【完整源码示例下载】

1. 固定表头
2. 列宽可调整
3. 单击列头可排序
4. 双击单元格可编辑
5. 可绑定数据源

 看下效果吧:

HTML - 模板代码：

1. <table  id="test">  
2.                 <tr  class="header">  
3.                         <td  style="width: 100px;"  sort='true'>  
4.                                 姓名  
5.                         </td>  
6.                         <td  style="width: 100px;"  sort='true'>  
7.                                 性别  
8.                         </td>  
9.                         <td  style="width: 100px;"  sort='true'>  
10.                                 年龄  
11.                         </td>  
12.                         <td  style="width:200px;"  sort='true'>  
13.                                 住址  
14.                         </td>  
15.                 </tr>  
16.                 <tr  class="itemtemplate">  
17.                         <td  editable='true'>  
18.                             {姓名}  
19.                         </td>  
20.                         <td  editable='true'>  
21.                             {性别}  
22.                         </td>  
23.                         <td  editable='true'>  
24.                             {年龄}  
25.                         </td>  
26.                         <td  editable='true'>  
27.                             {住址}  
28.                         </td>  
29.                 </tr>  
30.         </table>  

jsascript代码：

1. //测试数据  
2. var  dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"},{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"}]}';  
3.  
4. //清空数据  
5. $('#test').DataGridClear();  
6. //设定行样式  
7. $('#test').DataGridSetItemClass("tr1","tr2","trhover");  
8. //绑定数据，并设置宽度高度  
9. $('#test').DataGrid("100%",200,dataJsonStr);  

如何根据HTML模板创建DataGrid整个结构?

1.首先创建 表头 主体 等各区域:

1. TableBody.addClass('TableBody');  
2.    TableBody.wrap("<div id='"+MyTableId+"' class='houfeng-table'></div>");  
3.    var  MyTable=$('#'+MyTableId);  
4.    TableBody.data('MyTable',MyTable);  
5.    TableBody.before("<table class='TableHead' ></table>");  
6.    var  TableHead=MyTable.find(".TableHead");  
7.    TableBody.data('TableHead',TableHead);  
8.    TableBody.wrap('<div  class="TableBodyArea"></div>');  
9.    TableHead.wrap("<div class='TableHeadArea' onselectstart='return false;'></div>");  
10.    var  TableBodyArea=MyTable.find('.TableBodyArea');  
11.    var  TableHeadArea=MyTable.find('.TableHeadArea');  
12.    TableBody.data('TableBodyArea',TableBodyArea);  
13.    TableBody.data('TableHeadArea',TableHeadArea);  

上面代代中TableBody 为表主体, TableHead 为表头

2.创建表头

1. TableBody.find('.header').clone().prependTo(TableHead);  

TableBody 其实便是HTML模板Table , 将 .header 的行移到到表头表格中作为表头.

3.创建表主体

创建表主体,其实便是根据数据源及模板 循环创建每一行 , 这里用了 上篇文章提到的 Repeater 来创建, 详细 请看用javascript实现Repeater.

4.处理当列过多时横向滚动条的问题

1. TableBodyArea.scroll(function  (){  
2.                                 var  ml=0-parseInt(TableBodyArea.attr('scrollLeft'));  
3.                                 TableHead.css('margin-left',ml);  
4. });  

TableBodyArea 为TableBody外包裹的一个Div

5.如何实现单元格编辑

双击td时在td中动态插入一个文件本框为将td的innerHTML给文本框，在文本焦点失去时，将文本框值赋给td的innerHTML，将移除文本框 代码如下：

1. TableBody.find('td').live('dblclick',function(){  
2.                                 var  td=$(this);  
3.                                 if(td.attr('editable')=='true')  
4.                                 {  
5.                                           var  text=td.text();  
6.                                           var  html="<input type='text' class='TdEditTextBox' value='"+$.trim(text)+"' />";  
7.                                           td.html(html);  
8.                                           td.addClass("tdediting");  
9.                                           //  
10.                                           $(this).find('.TdEditTextBox').focus().focus().focus().focus();  
11.                                           $(this).find('.TdEditTextBox').blur(function(){  
12.                                                 var  val=$(this).val();  
13.                                                 td.html(val);  
14.                                                   td.removeClass("tdediting");  
15.                                           });  
16.                                   }  
17.                         });