EasyUI学习第五篇：Datagrid数据表格

<table id="tt" width="100%"></table>

$('#tt').datagrid({
    url : '/UserServlet?method=findAll',
    title:'用户列表',
    height:800,
    fitColumns:true,//扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
    columns:[[   
        {field:'id',title:'编号',width:80},
        {field:'username',title:'用户名',width:80},
        {field:'password',title:'密码',width:80},
        {field:'sex',title:'性别',width:80},
        {field:'age',title:'年龄',width:80},
        {field:'birthday',title:'出生日期',width:80},
        {field:'city',title:'所属城市',width:80},
        {field:'salary',title:'薪资',width:80},
        {field:'starttime',title:'开始时间',width:200},
        {field:'endtime',title:'结束时间',width:200},
        ]],
        pagination:true,  //在 datagrid 的底部显示分页栏
        pageSize:10,      //初始化页码 ,每页显示多少条
        pageList:[5,10,15,20],  //初始化页面尺寸的选择列表
});

数据格式：

{
“total”:239,
“rows”:[
{“code”:”001”,”name”:”Name 1”,”addr”:”Address 11”,”col4”:”col4 data”},
{“code”:”002”,”name”:”Name 2”,”addr”:”Address 13”,”col4”:”col4 data”},
{“code”:”003”,”name”:”Name 3”,”addr”:”Address 87”,”col4”:”col4 data”},
{“code”:”004”,”name”:”Name 4”,”addr”:”Address 63”,”col4”:”col4 data”},
{“code”:”005”,”name”:”Name 5”,”addr”:”Address 45”,”col4”:”col4 data”},
{“code”:”006”,”name”:”Name 6”,”addr”:”Address 16”,”col4”:”col4 data”},
{“code”:”007”,”name”:”Name 7”,”addr”:”Address 27”,”col4”:”col4 data”},
{“code”:”008”,”name”:”Name 8”,”addr”:”Address 81”,”col4”:”col4 data”},
{“code”:”009”,”name”:”Name 9”,”addr”:”Address 69”,”col4”:”col4 data”},
{“code”:”010”,”name”:”Name 10”,”addr”:”Address 78”,”col4”:”col4 data”}
]
}