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

一个可绑定数据源的jQuery数据表格插件 固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧: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代码： 复制代码 代码如下: //测试数据 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); 结构示意图: 如何根据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