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

请查看有详细说版本：

http://www.cnblogs.com/houfeng/archive/2010/07/16/1779121.html

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

此文将实现一个【表头固定，列宽可改变，可排序,单元格可编辑】的jQuery表格插件jQuery.DataGrid。

同样，此表格插件也是可以绑定数据的，没时间，不多说啦！

HTML - 模板：

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);

看下效果吧:

源码下载:

请遵守 LGPL英文 LGPL中文 协议! 下载.

作者：houfeng
出处：http://houfeng.cnblogs.com
本文版权归作者和博客园共有,未经作者同意请保留此声明.

posted @ 2010-07-16 17:07 Houfeng 阅读(490) 评论(6) 编辑收藏

发表评论

　回复　引用　查看　

#1楼 2010-07-16 17:16 坤坤

请lz花费一点时间简单说明一下吧。

　回复　引用　查看　

#2楼 2010-07-16 17:21 传说中的小YY

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");
                     });

1.4.1 有新特性直接创建绑定属性事件样式等。。。

如果先append再find 转弯了。有一点小消耗

　回复　引用　查看　

#3楼 2010-07-16 17:23 传说中的小YY

//实现一个Include
function Include(path,reload)
{
    var scripts = document.getElementsByTagName("script"); 
    if (!reload) 
    for (var i=0;i<scripts.length;i++) 
    if (scripts[i].src && scripts[i].src.toLowerCase() == path.toLowerCase() ) return; 
    var sobj = document.createElement('script'); 
    sobj.type = "text/javascript"; 
    sobj.src = path; 
    var headobj = document.getElementsByTagName('head')[0]; 
    headobj.appendChild(sobj); 
}

jquery中有这么个功能。

　回复　引用　查看　

#4楼 [楼主] 2010-07-16 18:35 侯锋

@传说中的小YY
"如果先append再find 转弯了。有一点小消耗"
如果对你有用自个改改吧，呵呵
这是新文章
http://www.cnblogs.com/houfeng/archive/2010/07/16/1779121.html

　回复　引用　查看　

#5楼 [楼主] 2010-07-16 18:35 侯锋

@坤坤
这是新文章
http://www.cnblogs.com/houfeng/archive/2010/07/16/1779121.html

　回复　引用　查看　

#6楼 2010-11-26 16:59 huolh

支持

注册用户登录后才能发表评论，请登录或注册，返回博客园首页。

首页博问闪存新闻园子招聘知识库