一个可绑定数据源的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获得下拉框值的代码
Aug 13 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
vue页面切换过渡transition效果
Oct 08 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javascript工具库代码
2012/03/29 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
企业治理工作自我评价
2013/09/26 职场文书
党章学习思想汇报
2014/01/14 职场文书
先进集体获奖感言
2014/02/13 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android