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

请查看有详细说版本：

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

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

上一篇博文写道:用javascript实现Repeater.

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

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

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

 看下效果吧:

源码下载:

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