jquery表格控件--jqGrid使用

    项目中用到了jQuery的jqGrid表格控件，功能还算强大。主要是在封装json数据的时候比较麻烦，先来看grid要求的json数据格式：

{"total":1,"page":1,"records":10,"rows":[{"id":1,"cell":["字段1","字段2",.....]},{[id":2,"cell":["字段1","字段2",.....]}]}

total:总页数，page:当前页码，records:每页显示记录数，rows为记录集合。如果要使用分页的话，将这些参数设为后台分页类的分页参数即可。

    先来看前台页面代码，

<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/themes/basic/grid.css" mce_href="${ctx}/themes/basic/grid.css" /> <mce:script src="${ctx}/js/jquery.js" mce_src="${ctx}/js/jquery.js"type="text/javascript"></mce:script> <mce:script src="${ctx}/js/jqgrid/jquery.jqGrid.js" mce_src="${ctx}/js/jqgrid/jquery.jqGrid.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- // We use a document ready jquery function. jQuery(document).ready(function(){ jQuery("#list").jqGrid({ // the url parameter tells from where to get the data from server // adding ?nd='+new Date().getTime() prevent IE caching url:'terminal-users!loadByFilters', // datatype parameter defines the format of data returned from the server // in this case we use a JSON data datatype: "json", // colNames parameter is a array in which we describe the names // in the columns. This is the text that apper in the head of the grid. colNames:['用户代码','用户名', '部门','安全域','绑定终端','操作'], // colModel array describes the model of the column. // name is the name of the column, // index is the name passed to the server to sort data // note that we can pass here nubers too. // width is the width of the column // align is the align of the column (default is left) // sortable defines if this column can be sorted (default true) colModel:[ {name:'userId',index:'userId', width:80}, //grid获得数据只跟你后台放入cell中的顺序要关系 {name:'userName',index:'userName', //index为排序参数名 width:80,formatter:'showlink',formatoptions:{baseLinkUrl:'terminal-users!input.action',showAction:'',idName:"entityId"}}, //字段加入baseLinkUrl属性后就支持超连接了 {name:'departmentName',index:'departmentInfo.departmentId', width:80}, {name:'domainName',index:'securityDomain.domainId',sortable:false, width:150}, //不需要排序的话将字段的sortable置为false {name:'computerName',sortable:false, width:150}, {name:'option',index:'option', width:120,sortable:false,align:'center'} ], // pager parameter define that we want to use a pager bar // in this case this must be a valid html element. // note that the pager can have a position where you want pager: jQuery('#pager'), // rowNum parameter describes how many records we want to // view in the grid. We use this in example.php to return // the needed data. rowNum:10, // rowList parameter construct a select box element in the pager //in wich we can change the number of the visible rows rowList:[10,20,30], // path to mage location needed for the grid imgpath: 'themes/basic/images', // sortname sets the initial sorting column. Can be a name or number. // this parameter is added to the url sortname: 'userId',//默认排序字段 //viewrecords defines the view the total records from the query in the pager //bar. The related tag is: records in xml or json definitions. viewrecords: true, //sets the sorting order. Default is asc. This parameter is added to the url sortorder: "asc",//默认排序方式 weight:600, height:200, multiselect:true, prmNames:{rows:"page.pageSize",page:"page.pageNo",sort:"page.orderBy",order:"page.order"} //我项目中使用的是struts2,并用page类作为分页，设置这 //些参数后struts2会代我们拦截到page中以完成分页和排 //序。如果不用struts2这些参数可以在request中取得，名 //字分别为rows，page，sort，order。 }); }); // --></mce:script> <!-- the grid definition in html is a table tag with class 'scroll' --> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <!-- pager definition. class scroll tels that we want to use the same theme as grid --> <div id="pager" class="scroll" style="text-align:center;" mce_style="text-align:center;"></div>

 

 

    再来看后台，我们需要一个用于分页的类，贴一下我用的分页类

import java.util.Collections; import java.util.List; import org.apache.commons.lang.StringUtils; /** * 与具体ORM实现无关的分页参数及查询结果封装. * * @param <T> Page中记录的类型. * @author calvin */ public class Page<T> { // 公共变量 public static final String ASC = "asc"; public static final String DESC = "desc"; public static final int MIN_PAGESIZE = 5; public static final int MAX_PAGESIZE = 200; //分页参数 protected int pageNo = 1; protected int pageSize = MIN_PAGESIZE; protected String orderBy = null; protected String order = null; protected boolean autoCount = true; //返回结果 protected List<T> result = Collections.emptyList(); protected int totalCount = -1; // 构造函数 public Page() { super(); } public Page(final int pageSize) { setPageSize(pageSize); } public Page(final int pageSize, final boolean autoCount) { setPageSize(pageSize); this.autoCount = autoCount; } //查询参数函数 /** * 获得当前页的页号,序号从1开始,默认为1. */ public int getPageNo() { return pageNo; } /** * 设置当前页的页号,序号从1开始,低于1时自动调整为1. */ public void setPageNo(final int pageNo) { this.pageNo = pageNo; if (pageNo < 1) { this.pageNo = 1; } } /** * 获得每页的记录数量,默认为10. */ public int getPageSize() { return pageSize; } /** * 设置每页的记录数量,超出MIN_PAGESIZE与MAX_PAGESIZE范围时会自动调整. */ public void setPageSize(final int pageSize) { this.pageSize = pageSize; if (pageSize < MIN_PAGESIZE) { this.pageSize = MIN_PAGESIZE; } if (pageSize > MAX_PAGESIZE) { this.pageSize = MAX_PAGESIZE; } } /** * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从0开始. */ public int getFirst() { return ((pageNo - 1) * pageSize); } /** * 获得排序字段,无默认值.多个排序字段时用','分隔,仅在Criterion查询时有效. */ public String getOrderBy() { return orderBy; } /** * 设置排序字段.多个排序字段时用','分隔.仅在Criterion查询时有效. */ public void setOrderBy(final String orderBy) { this.orderBy = orderBy; } /** * 是否已设置排序字段,仅在Criterion查询时有效. */ public boolean isOrderBySetted() { return StringUtils.isNotBlank(orderBy); } /** * 获得排序方向,默认为asc,仅在Criterion查询时有效. * * @param order 可选值为desc或asc,多个排序字段时用','分隔. */ public String getOrder() { return order; } /** * 设置排序方式向,仅在Criterion查询时有效. * * @param order 可选值为desc或asc,多个排序字段时用','分隔. */ public void setOrder(final String order) { //检查order字符串的合法值 String[] orders = StringUtils.split(StringUtils.lowerCase(order), ','); for (String orderStr : orders) { if (!StringUtils.equals(DESC, orderStr) && !StringUtils.equals(ASC, orderStr)) throw new IllegalArgumentException("排序方向" + orderStr + "不是合法值"); } this.order = StringUtils.lowerCase(order); } /** * 查询对象时是否自动另外执行count查询获取总记录数,默认为false,仅在Criterion查询时有效. */ public boolean isAutoCount() { return autoCount; } /** * 查询对象时是否自动另外执行count查询获取总记录数,仅在Criterion查询时有效. */ public void setAutoCount(final boolean autoCount) { this.autoCount = autoCount; } // 查询结果函数 /** * 取得页内的记录列表. */ public List<T> getResult() { return result; } public void setResult(final List<T> result) { this.result = result; } /** * 取得总记录数,默认值为-1. */ public int getTotalCount() { return totalCount; } public void setTotalCount(final int totalCount) { this.totalCount = totalCount; } /** * 根据pageSize与totalCount计算总页数,默认值为-1. */ public int getTotalPages() { if (totalCount < 0) return -1; int count = totalCount / pageSize; if (totalCount % pageSize > 0) { count++; } return count; } /** * 是否还有下一页. */ public boolean isHasNext() { return (pageNo + 1 <= getTotalPages()); } /** * 取得下页的页号,序号从1开始. */ public int getNextPage() { if (isHasNext()) return pageNo + 1; else return pageNo; } /** * 是否还有上一页. */ public boolean isHasPre() { return (pageNo - 1 >= 1); } /** * 取得上页的页号,序号从1开始. */ public int getPrePage() { if (isHasPre()) return pageNo - 1; else return pageNo; } }

 

jqGrid是一ajax的方式请求数据的，后台接收到请求时先将分页参数保存在page中，然后通过page分页查询，最后再将数据保存为json格式返回给Grid就大功告成了。

Page<TerminalUsers> pageTerminalUsers = search(page);//查询获得分页后的数据 List<Map<String, Object>> rows = new ArrayList<Map<String, Object>>(); // 记录 for (TerminalUsers terminalUser : result) { int userId = terminalUser.getUserId(); String userName = terminalUser.getUserName(); String departmentName = terminalUser.getDepartmentInfo() .getDepartmentName(); String domainNames = terminalUser.getDomainNames(); String computerNames = terminalUser.getComputerNames(); // 将需要显示的数据放入一对象数组中 Object[] cell = { userId, userName, departmentName, domainNames, computerNames, "<a href="/" mce_href="/""terminal-users!input.action?entityId=" + userId + "/">修改</a>" + " " + "<a href="#" mce_href="#" οnclick=/"jqGridDel('#list','terminal-users!delete.action'," + userId + ")/" title = '删除' >删除</a>" + " " + "<a href =/"terminal-users!copy.action?copyId=" + userId + "/">复制</a>" }; Map<String, Object> map = new LinkedHashMap<String, Object>(); map.put("id", userId); map.put("cell", cell); rows.add(map); } Map<String, Object> map = new HashMap<String, Object>(); map.put("total", pageTerminalUsers.getTotalPages()); map.put("page", pageTerminalUsers.getPageNo()); map.put("records", pageTerminalUsers.getPageSize()); map.put("rows", rows); // 产生JSON对象 JSONObject json = JSONObject.fromObject(map);

时间比较紧，写的很简单，有问题欢迎大家提出来。