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

固定表头
列宽可调整
单击列头可排序
双击单元格可编辑
可绑定数据源
看下效果吧:
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);