可以绑定数据源的jQuery数据表插件

固定表头列宽可以调整。单击列标题进行排序。双击单元格以编辑可绑定数据源。看效果。 html-模板代码：复制的代码如下： Table ID=' test ' tr class=' header ' tdstyle=' width : 100 px；'sort=' true ' name/TD TD style=' width : 100 px；'sort=' true ' gender/TD TD style=' width : 100 px；'sort=' true ' age/TD TD style=' width :200 px；'sort=' true ' address/TD/tr tr class=' item template ' TD editable=' true ' { name }/TD editable=' true ' { gender }/TD TD TD editable=' true ' { age }/Tdeditable=' true ' { address }/TD/tr/table js script代码：复制的代码如下： //测试数据var datajsonstr=' { table name : ' '，第3:行[{'name' 3360' Cao '，' gender ' :年龄“:”51”，“住址”:“许昌”}，{“姓名”:“诸葛亮”，“性别”:“男”，“年龄”3360“40”，“住址”:“南阳”}。{“姓名”:“大乔”，“性别”:“女”，“年龄”:“三十”，“居住地”:“江东”}，{“姓名”:“小乔”，“性别”:“女”。年龄“:”51”，“住址”:“许昌”}，{“姓名”:“诸葛亮”，“性别”:“男”，“年龄”3360“40”，“住址”:“南阳”}。{“姓名”:“大乔”，“性别”:“女”，“年龄”:“三十”，“居住地”:“江东”}，{“姓名”:“小乔”，“性别”:“女”。//空数据$('#test ')。DataGridClear()；//设置线条样式$ ('# test ')。datagridsetitemclass ('tr1 '，' tr2 '，' trhover ')；//绑定数据并设置宽度和高度$(“# test”)。Datagrid ('100% '，200，datajsonstr)；示意图： 。

如何根据超文本标记语言模板创建数据网格整个结构？1.首先创建表头主体等各区域： 复制代码代码如下： TableBody。add class(' TableBody ')；表体。换行(' div id=' ' MyTableId ' ' class='侯丰-表/div ')；var MyTable=$(' # ' MyTableId)；TableBody.data('MyTable '，我的表)；表体。在(' table class=' TableHead '/table ')之前；var TableHead=MyTable.find(' .TableHead’)；TableBody.data('TableHead '，TableHead)；表体。换行(' div class=' table body area '/div ')；桌面。selectstart='上的wrap(' div class=' tablehead area ')返回false/div ')；var TableBodyArea=MyTable.find(' .TableBodyArea’)；var TableHeadArea=MyTable.find(' .tablehead区域')；TableBody.data('TableBodyArea '，tablebody area)；TableBody.data('TableHeadArea '，tablehead area)；上面代代中红色高亮TableBody为表主体，TableHead为表头2.创建表头复制代码代码如下： TableBody.find(' .标题')。克隆()。前置到(TableHead)；TableBody其实便是超文本标记语言模板桌子，将。页眉的行移到到表头表格中作为表头。3.创建表主体创建表主体，其实便是根据数据源及模板循环创建每一行，这里用了上篇文章提到的中继器来创建，详细请看用爪哇岛描述语言实现复读机。4.处理当列过多时横向滚动条的问题复制代码代码如下： TableBodyArea。scroll(function(){ var ml=0-Parseint(TableBodyArea。attr(' scrollefT '))；TableHead.css('左边距，毫升)；});TableBodyArea为TableBody外包裹的一个第五区。如何实现单元格编辑双击任务描述时在任务描述中动态插入一个文件本框为将任务描述的innerHTML给文本框，在文本焦点失去时，将文本框值赋给任务描述的innerHTML，将移除文本框代码如下：复制代码代码如下： TableBody.find('td ').live('dblclick '，function(){ var TD=$(this)；if(td.attr('可编辑)=' true '){ var text=TD。text()；var html=' input type=' text ' class=' TdEditTextBox ' value=' ' $ .修剪（文本)' '/';道明。html(html)；道明。AddClass(' TD编辑')；//$(这个)。查找('。TdEditTextBox ').焦点()。焦点()。焦点()。焦点();$(这个)。查找('。TdEditTextBox ').模糊(function(){ var val=$(this)).val()；道明。html(val)；道明。移除CLaSS(' TD编辑')；});} });6.如何排序：由时间问题请容我下回分解！源码下载：/201007/马援作者：侯丰出处：http://houfeng.cnblogs.com