一个可绑定数据源的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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python去除列表中重复元素的方法
2015/03/20 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python装饰器语法糖
2019/01/02 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
过滤器的用法
2013/10/08 面试题
经典洗发水广告词
2014/03/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
辞职信格式模板
2015/02/27 职场文书
试用期自我评价范文
2015/03/10 职场文书
入团介绍人意见范文
2015/06/04 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android