EasyUI-datagrid表格（基本使用）

一、前端

1.EasyUI-datagrid使用十分简单，首先在我面使用的页面加上table标签（此处默认已导入相关js包）

<table id="dg" class="easyui-datagrid"></table>

2.然后简单的配置js

<script type="text/javascript">
$(function() {
$('#loading-mask').fadeOut('normal');
$('#dg').datagrid({
url : 'query.do',//请求连接
pagination:"true",//是否显示分页
columns : [ [ {//配置列
field : 'name',//对应数据的字段
title : '姓名',//表头名称
width : 100//表宽
}, {
field : 'age',
title : '姓名',
width : 100
}, {
field : 'school',
title : '学校',
width : 100,
align : 'right'
} ] ]
});
})
</script>

3.前端分页发送的参数为：

EasyUI-datagrid会自动带上下面两个参数传给后台

page 页码 rows 每页显示行数

后端可以接受这两个参数实现分页处理

二、后端

1.后端使用的是spring MVC

@RequestMapping("query")
@ResponseBody
public EasyJson query(EasyPage page) {
page = sysKingService.getListByCriteria(page, criterions, null);
return page.getJson();//返回json数据
}

page对象里面有page 和 rows两个成员对象，springMVC会自动填充参数

2.后台返回数据

{
    "total": 550,//总页数
    "rows": [
        {
            "name": "king0",
            "age": 0,
            "school": null
        }
}

更多相关文章

随机推荐