数据表格（DataGrid）

实例

    <table id="mytable"></table>
    <script type="text/javascript">
        $(function(){
            //页面加载完成后，创建数据表格datagrid
            $("#mytable").datagrid({
                //定义标题行所有的列
                columns:[[
                          {title:'编号',field:'id',checkbox:true},
                          {title:'姓名',field:'name'},
                          {title:'年龄',field:'age'},
                          {title:'地址',field:'address'}
                          ]],
                //指定数据表格发送ajax请求的地址
                url:'${pageContext.request.contextPath }/json/datagrid_data.json',
                rownumbers:true,
                singleSelect:true,
                //定义工具栏
                toolbar:[
                         {text:'添加',iconCls:'icon-add',
                             //为按钮绑定单击事件
                             handler:function(){
                                alert('add...');
                             }
                         },
                         {text:'删除',iconCls:'icon-remove'},
                         {text:'修改',iconCls:'icon-edit'},
                         {text:'查询',iconCls:'icon-search'}
                         ],
                //显示分页条
                pagination:true,
                pageList:[3,5,7,10]
            });
        });
    </script>

json

 {
     "total":123,
     "rows":[
        {"id":"001","name":"xiaoli","age":100},
        {"id":"001","name":"xiaoli","age":100},
        {"id":"001","name":"xiaoli","age":100}
     ]
 }