三种方法:
1.将静态的HTML渲染为datagrid样式
2.发送Ajax请求获取json数据创建datagrid
3.使用easyUI提供的API创建datagrid
<!-- 方式二:发送ajax请求获取json数据创建datagrid -->
<table data-options="url:'${pageContext.request.contextPath}/json/datagrid_data.json'" 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>
</table>
datagrid_data.json
[
{"id":"001","name":"小白","age":"21"},
{"id":"002","name":"刘涛","age":"41"},
{"id":"003","name":"忠民","age":"32"}
]
需要明确的是.json文件的写法要和<thead>里面的写法要一致</thead>
<table id="mytable"></table>
<!-- 方式三:使用easyUI提供的API创建datagrid -->
<script type="text/javascript">
$(function(){
//页面加载完毕后,执行数据表格datagrid
$("#mytable").datagrid();
//一调用这种方法就要创建数据表格了
});
</script>
<!-- 方式三:使用easyUI提供的API创建datagrid -->
<script type="text/javascript">
$(function(){
//页面加载完毕后,执行数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:"编号",field:"id",checkbox:true},
{title:"姓名",field:"name"},
{title:"年龄",field:"age"},
{title:"地址",field:"addr"},
]],
url:'${pageContext.request.contextPath}/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//工具栏
toolbar:[
{text:'添加',iconCls:'icon-add'},
{text:'修改',iconCls:'icon-edit'},
{text:'删除',iconCls:'icon-delete'},
{text:'查询',iconCls:'icon-search'}
],
pagination:true
});
});
</script>
如果数据表格中使用了分页条,要求服务端响应的json变为: