一个可绑定数据源的jQuery数据表格插件

　　固定表头

　　列宽可调整

　　单击列头可排序

　　双击单元格可编辑

　　可绑定数据源

　　看下效果吧:

　　HTML - 模板代码：

复制代码代码如下:

　　姓名

　　</td>

　　性别

　　</td>

　　年龄

　　</td>

　　住址

　　</td>

　　</tr>

　　{姓名}

　　</td>

　　{性别}

　　</td>

　　{年龄}

　　</td>

　　{住址}

　　</td>

　　</tr>

　　</table>

　　jsascript代码：

复制代码代码如下:

　　//测试数据

　　var dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"},{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"女","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"女","年龄":"28","住址":"江东"}]}';

　　//清空数据

　　$('#test').DataGridClear();

　　//设定行样式

　　$('#test').DataGridSetItemClass("tr1","tr2","trhover");

　　//绑定数据，并设置宽度高度

　　$('#test').DataGrid("100%",200,dataJsonStr);

　　结构示意图:

一个可绑定数据源的jQuery数据表格插件

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

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

复制代码代码如下:

　　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.创建表头

复制代码代码如下:

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

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

　　3.创建表主体

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

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

复制代码代码如下:

　　TableBodyArea.scroll(function (){

　　var ml=0-parseInt(TableBodyArea.attr('scrollLeft'));

　　TableHead.css('margin-left',ml);

　　});

　　TableBodyArea 为TableBody外包裹的一个Div

　　5.如何实现单元格编辑

　　双击td时在td中动态插入一个文件本框为将td的innerHTML给文本框，在文本焦点失去时，将文本框值赋给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

教程首页更多教程