[转载]开发一个可绑定数据源的jQuery数据表格插件

[转载]开发一个可绑定数据源的jQuery数据表格插件 – 侯锋’s Blog – 博客园.

此文将实现一个的JQuery表格插件JQuery.DataGrid。

  1. 固定表头
  2. 列宽可调整
  3. 单击列头可排序
  4. 双击单元格可编辑
  5. 可绑定数据源

看下效果吧:

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

结构示意图:

如何根据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. 如何排序:

由时间问题请容我下回分解!!

源码下载:

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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏