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


Posted in Javascript onJuly 17, 2010

固定表头
列宽可调整
单击列头可排序
双击单元格可编辑
可绑定数据源

看下效果吧:
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);

结构示意图:
一个可绑定数据源的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
Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
js键盘事件的keyCode
Jul 29 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
js实现拖拽功能
Mar 01 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 #Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 #Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 #Javascript
基于jquery的Repeater实现代码
Jul 17 #Javascript
javascript onmouseout 解决办法
Jul 17 #Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
You might like
建立文件交换功能的脚本(一)
2006/10/09 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php获取字段名示例分享
2014/03/03 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
javascript call和apply方法
2008/11/24 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
React实现轮播效果
2020/08/25 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python判断变量是否为列表的方法
2020/09/17 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
一篇.NET面试题
2014/09/29 面试题
遗失说明具结保证书
2015/02/26 职场文书
活动总结书怎么写
2015/05/11 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis