JqGrid4.2实践-2-集成Spring MVC 博客分类: JS_JqGrid jqgridspringmvcjsonrest
程序员文章站
2024-03-16 19:24:10
...
记录一下以作参考
SpringMVC的安装可以参考SpringMVC3.0+rest小例子
jsp页面
其中几个关键的属性
url :查询请求地址
datatype :返回值类型,这里使用JSON进行传递
prmNames :传递给后台的属性定义,本例中定义search:"search",如果不这么定义的话,后台接收到的将会是_search。
jsonReader :页面接收后台数据属性定义,具体参考API解释
Controller类
为接收前台数据,特定义了DataRequest类,其中的属性跟页面传递过来的属性一一对应
给前台发送数据也定义了相应的DataResponse类
Controller类接收数据后即传给后台service类处理并返回DataResponse对象给页面
处理方法如下
SpringMVC的安装可以参考SpringMVC3.0+rest小例子
jsp页面
<div id="_grid" style="width: 100%; * width: 99%; zoom: 1;"> <table id="list" width="100%"></table> <div id="pager"></div> </div> <script> $(function(){ $("#list").jqGrid({ url : "${pageContext.request.contextPath}/user/list", contentType : 'application/json', mtype : "post", datatype : 'json', prmNames : {search : "search"}, jsonReader : {id : "0", repeatitems : false, userdata : "userdata"}, height : "auto", colNames : ["ID", "用户名", "全名", "状态", "是否管理员"], colModel : [{name:"id", index:"id", hidden:true}, {name:"username", index:"username"}, {name:"fullname", index:"fullname"}, {name:"enabled", index:"enabled"}, {name:"is_admin", index:"is_admin"}], pager : "#pager", autoWidth : true, rowNum : 10, rownumbers : true, viewrecords: true, caption : "用户列表" }); $(window).bind('resize', function() { $("#list").setGridWidth($("#_grid").width() - 10); }).trigger('resize'); jQuery("#list").jqGrid('navGrid', '#pager', {}); }); </script>
其中几个关键的属性
url :查询请求地址
datatype :返回值类型,这里使用JSON进行传递
prmNames :传递给后台的属性定义,本例中定义search:"search",如果不这么定义的话,后台接收到的将会是_search。
jsonReader :页面接收后台数据属性定义,具体参考API解释
Controller类
@RequestMapping(value="/list") @ResponseBody public DataResponse<User> list(@RequestParam(defaultValue="1",value="page") String page, @RequestParam(defaultValue="20",value="rows") String rows, @RequestParam("sidx") String sidx, @RequestParam("sord") String sord, @RequestParam("_search") boolean search, @RequestParam(required=false,value="searchField") String searchField, @RequestParam(required=false,value="searchOper") String searchOper, @RequestParam(required=false,value="searchString") String searchString, @RequestParam(required=false,value="filters") String filters ){ try { DataRequest request = new DataRequest(); request.setPage(StringUtils.isEmpty(page) ? 1 : Integer.valueOf(page)); request.setRows(StringUtils.isEmpty(rows) ? 20 : Integer.valueOf(rows)); request.setSidx(sidx); request.setSord(sord); request.setSearch(search); request.setSearchField(searchField); request.setSearchOper(searchOper); request.setSearchString(searchString); return customSearchUtil.search(request, User.class); } catch (Exception e) { e.printStackTrace(); } return null; }
为接收前台数据,特定义了DataRequest类,其中的属性跟页面传递过来的属性一一对应
public class DataRequest implements java.io.Serializable { private static final long serialVersionUID = 1L; //当前页码 private int page; //页面可显示行数 private int rows; //用于排序的列名 private String sidx; //排序的方式desc/asc private String sord; //是否是搜索请求 private boolean search; //已经发送的请求的次数 private String nd; }
给前台发送数据也定义了相应的DataResponse类
public class DataResponse <T> { //需要显示的数据集 private List<T> rows; //每页显示数量 private int page; //数据总数 private int records; //可显示的页数 private int total; //自定义数据 private Map<String, Object> userdata; }
Controller类接收数据后即传给后台service类处理并返回DataResponse对象给页面
处理方法如下
public DataResponse<T> search(DataRequest request, Class<T> cls) { DataResponse<T> response = new DataResponse<T>(); int count;//总记录数 int limit = request.getRows() <= 0 ? 20 : request.getRows();//每页显示数量 int totalPages;//总页数 int page = request.getPage() <= 0 ? 1 : request.getPage();//当前显示页码 List<T> list; Set<Criterion> set = initSearchCondition(request.isSearch(), request.getSearchField(), request.getSearchOper(), request.getSearchString()); count = customDao.count(cls, set); totalPages = count / limit; if (count % limit != 0) { totalPages++; } int currPage = Math.min(totalPages, page); int start = currPage * limit - limit; start = start < 0 ? 0 : start; list = customDao.list(cls, set, start, limit); response.setRecords(count); response.setTotal(totalPages); response.setPage(currPage); response.setRows(list); return response; }