一个可绑定数据源的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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JQuery 学习技巧总结
May 21 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
javascript常用代码段搜集
Dec 04 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vue如何截取字符串
May 06 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
JS实现判断移动端PC端功能
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
php 无限级 SelectTree 类
2009/05/19 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python获取糗百图片代码实例
2013/12/18 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
运动员加油词
2015/07/18 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
mysql函数之截取字符串的实现
2022/08/14 MySQL