一个可绑定数据源的jQuery数据表格插件
2010-07-17 00:00
661 查看
固定表头
列宽可调整
单击列头可排序
双击单元格可编辑
可绑定数据源
看下效果吧:
HTML - 模板代码:
jsascript代码:
结构示意图:
如何根据HTML模板创建DataGrid整个结构?
1.首先创建 表头 主体 等各区域:
上面代代中红色高亮 TableBody 为表主体, TableHead 为表头
2.创建表头
TableBody 其实便是HTML模板Table , 将 .header 的行移到到表头表格中作为表头.
3.创建表主体
创建表主体,其实便是根据数据源及模板 循环创建每一行 , 这里用了 上篇文章提到的 Repeater 来创建, 详细 请看用javascript实现Repeater.
4.处理当列过多时横向滚动条的问题
TableBodyArea 为TableBody外包裹的一个Div
5.如何实现单元格编辑
双击td时在td中动态插入一个文件本框为将td的innerHTML给文本框,在文本焦点失去时,将文本框值赋给td的innerHTML,将移除文本框 代码如下:
6. 如何排序:
由时间问题请容我下回分解!!
源码下载: /201007/yuanma/DataGrid.rar
作者:houfeng
出处:http://houfeng.cnblogs.com
列宽可调整
单击列头可排序
双击单元格可编辑
可绑定数据源
看下效果吧:
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-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
相关文章推荐
- 开发一个可绑定数据源的jQuery数据表格插件
- 一个可绑定数据源的jQuery数据表格插件
- 开发一个可绑定的jQuery数据表格插件
- JQuery绑定JSON数据至表格插件
- jquery库的一个表格排序插件
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- jQuery表格插件jqGrid之JSON数据
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- Demo: Dictionary>> 泛型读取XML文件数据作为数据源(DataSource)绑定到DropDownList控件 定义个一个公用类
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- jquery表格动态增删改及取数据绑定数据完整方案
- jquery表格动态增删改及取数据绑定数据完整方案
- jQuery 表格插件jqGrid 本地数据
- 一个非常好用的Jquery表格分页插件——jPages
- jQuery的插件datatables,一个bootstrap风格的表格控件
- 写一个数据集DataSet---ds,向其中添加一个数据表DataTable ---dt,并创建该表的列和行。然后将本本表作为数据源绑定到GradView中。
- jQuery学习之:jqGrid表格插件——从Struts2获得数据 推荐
- Jquery 模板数据绑定插件 使用方法
- jquery数据绑定插件
- jQuery学习之:jqGrid表格插件——从Struts2获得数据