一、将静态HTML渲染为datagrid样式
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:‘id‘">编号</th>
<th data-options="field:‘name‘">姓名</th>
<th data-options="field:‘age‘">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>30</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>30</td>
</tr>
</tbody>
</table>
二、发送ajax请求获取json数据创建datagrid(页面刷新完自动发送请求)
<table class="easyui-datagrid" data-options="url:‘${pageContext.request.contextPath}/json/datagrid.json‘">
<thead>
<tr>
<th data-options="field:‘id‘">编号</th>
<th data-options="field:‘name‘">姓名</th>
<th data-options="field:‘age‘">年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
请求的datagrid.json：
[
{"id":"001","name":"小明","age":"11"},
{"id":"002","name":"小智","age":"12"},
{"id":"003","name":"小刚","age":"13"}
]
三、使用easyui提供的API创建datagrid(重点)
1.创建一个表格，提供id
<table id="mytable"></table>
2.调用API填充数据
<script type="text/javascript">
$(function(){
$("#mytable").datagrid({
//定义表头，是一个二维数组
columns:[[
{"title":"编号","field":"id"},
{"title":"姓名","field":"name"},
{"title":"年龄","field":"age"}
]],
//制定数据表格发送ajax请求的地址
url:"${pageContext.request.contextPath}/json/datagrid.json"
});
});
</script>
三、额外功能：工具栏分页等
1.代码
<script type="text/javascript">
$(function(){
$("#mytable").datagrid({
//定义表头
columns:[[
{"title":"编号","field":"id","checkbox":true},
{"title":"姓名","field":"name"},
{"title":"年龄","field":"age"}
]],
//制定数据表格发送ajax请求的地址
url:"${pageContext.request.contextPath}/json/datagrid.json",
rownumbers:true,
toolbar:[ //工具栏
{"text":"添加","iconCls":"icon-add","handler":function(){
//为按钮绑定单击事件
}},
{"text":"删除","iconCls":"icon-remove"},
{"text":"修改","iconCls":"icon-edit"},
{"text":"查询","iconCls":"icon-search"},
],
pagination:true //显示分页条
});
});
</script>
2.开启分页条后，会额外发送page和rows两个参数，分别表示请求的页面和每页的记录数
3.开启分页后，服务端返回的json数据格式也要进行相应更改，要总记录数的当前请求页的数据
{
"total":123,
"rows":[
{"id":"001","name":"小明","age":"11"},
{"id":"002","name":"小智","age":"12"},
{"id":"003","name":"小刚","age":"13"}
]
}
4.请求发送的rows表示每页的记录数(pageSize)，服务器返回的rows表示数据内容(data)，注意名字虽然相同但是含义不一样