一个可绑定数据源的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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php empty函数 使用说明
2009/08/10 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python随机生成数模块random使用实例
2015/04/13 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
英国航空官网:British Airways
2016/09/11 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
区域总监的岗位职责
2013/11/21 职场文书
机电一体化自荐信
2013/12/10 职场文书
实用求职信范文分享
2013/12/25 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书