以下示例使用JQuery Easy UI、Spring MVC:
首先定义一个DataGrid:
01 | $( '#tt' ).datagrid({ |
02 | fit: true , |
03 | pageNumber:1, |
04 | pageList:[10,20,50], |
05 | url: '${pageContext.request.contextPath}/branch_office/list/json.htm' , |
06 | nowrap: false , |
07 | striped: true , |
08 | collapsible: true , |
09 | remoteSort: false , |
10 | columns:[[ |
11 | {title: '名称' ,field: 'name' ,width:300,sortable: true ,sorter: function (a,b){ return (a>b?1:-1);}}, |
12 | {title: '创建时间' ,field: 'createTime' ,width:150,sortable: true ,sorter: function (a,b){ return (a>b?1:-1);}}, |
13 | {title: '修改时间' ,field: 'modifyTime' ,width:150,sortable: true ,sorter: function (a,b){ return (a>b?1:-1);}} |
14 | ]], |
15 |
16 | pagination: true , |
17 | singleSelect: true , |
18 | rownumbers: true |
19 | }); |
01 | @RequestMapping (value = "/branch_office/list/json" , method = RequestMethod.POST) |
02 | public |
03 | @ResponseBody |
04 | Map<String, Object> getJson( int page, int rows, Map<String, Object> map) { |
05 | //DataGrid 会向 请求Json 的地址以POST方法发送2个参数:page(当前页码)和rows(每页显示记录数) |
06 | //获取分页数据 |
07 | List<BranchOfficeViewObject> branchOfficeVOList = iBranchOfficeService.showList(page, rows); |
08 |
09 | //获取总记录数 |
10 | int totalRows = iBranchOfficeService.getTotalRows(); |
11 |
12 | map.put( "total" , totalRows); |
13 | map.put( "rows" , branchOfficeVOList); |
14 |
15 | //返回指定格式的Map,Jackson会把Map转换未Json |
16 | return map; |
17 | } |