列宽可调整
单击列头可排序
双击单元格可编辑
可绑定数据源
看下效果吧:
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);
结构示意图:
如何根据html模板创建datagrid整个结构?
1.首先创建 表头 主体 等各区域:
复制代码 代码如下:
tablebody.addclass('tablebody');
tablebody.wrap(
);
var mytable=$('#'+mytableid);
tablebody.data('mytable',mytable);
tablebody.before(
);
var tablehead=mytable.find(.tablehead);
tablebody.data('tablehead',tablehead);
tablebody.wrap('
');
tablehead.wrap(
);
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=;
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