总结下jqgrid动态改变列头
前端: jqgrid 版本:4.4.4,jquery版本:1.9.1
后端:spring3.2 MVC
我在这里未列出所有代码,需求是在页面左侧有棵树,右侧是grid。点击树节点,根据不同条件右侧显示不同的列头,我在这里抛砖引玉,只列出基本的代码。
前端:
1.html部分
<table id="grid"></table>
<div id="nav_pager"></div>
2.JS部分
在此,我未提供树的代码,只给出一个点击树节点后触发的方法refreshRoleAccountGrid,传入点击节点的ID.
<script> var postData = {}; var jqdefaultGridConfig = { mtype : 'POST',//ajax提交方式 height : 360, width:550, rowNum : 20,//设置表格中显示的记录数,参数会被自动传到后台。 rowList : [ 10, 20, 50 ], pager : '#nav_pager', viewrecords : true,//是否要显示总记录数 multiselect : true,//定义是否可以多选 postData : postData,//参数 jsonReader : { root:"rows", repeatitems : false, page: "page", total: "total", records: "records" }, caption : '用户列表'//标题 }; //刷新grid方法 function refreshRoleAccountGrid(rid){ var url = "sys/role/findmodel"; var myData = {rid:rid}; $.ajax({ type: 'POST', data:myData, url: url,//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 var data= eval('('+data+')'); //在此根据不同条件,colModal显示不同 if (data){ jqdefaultGridConfig.colModel=[{name:'id', index:'id', width:55}, {name:'accountid', index:'accountid', width:55}, {name:'accountname', index:'roleid', width:55}]; jqdefaultGridConfig.url="sys/account/data"; }else{ jqdefaultGridConfig.colModel=[{name:'id', index:'id', width:55}, {name:'departmentid', index:'accountid', width:55}, {name:'departmentname', index:'roleid', width:55}]; jqdefaultGridConfig.url="sys/department/data"; } $('#grid').GridUnload(); jqdefaultGridConfig.postData=myData; jqdefaultGridConfig.datatype='json'; $('#grid').jqGrid(jqdefaultGridConfig).trigger("reloadGrid"); } }); } //样式处理 $("#gbox_grid").removeClass("ui-corner-all").removeClass("ui-widget-content"); $("#nav_pager").removeClass("ui-corner-bottom"); </script>
3.后端:
@RequestMapping(value="/sys/role/findmodel") @ResponseBody public String getColModel(HttpServletRequest request, HttpServletResponse response) throws Exception{ String out = ""; String rid = request.getParameter("rid"); //在这里写下业务逻辑,以json格式返回前端显示colModal的判断条件 //<-----业务逻辑开始 //业务逻辑结束--------> return out; }
分页信息:
import java.io.Serializable; import java.util.List; /*** * 分页信息封装 * */ public class PageInfo implements Serializable { private static final long serialVersionUID = 587754556498974978L; //总页数 private int totalPage; //总记录数 private int totalResult; //表示从当前记录开始查询,显示到的ID, 在mysql limit 中就是第一个参数. private int currentResult; private String sortField; private String order; private List<?> resultsList;//返回的数据 private int rows;//每页显示数量 private int page;//当前页码 public int getRows() { return rows; } public void setRows(int rows) { this.rows = rows; } public int getPage() { return page; } public void setPage(int page) { if (page <=1){ page = 1; } this.page = page; } public List<?> getResultsList() { return resultsList; } public void setResultsList(List<?> resultsList) { this.resultsList = resultsList; } public int getTotalPage() { if (totalResult % rows == 0) { this.totalPage = totalResult / rows; } else { this.totalPage = (totalResult / rows) + 1; } return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public int getTotalResult() { return totalResult; } public void setTotalResult(int totalResult) { this.totalResult = totalResult; } public int getCurrentResult() { currentResult = (page-1) * rows; return currentResult; } public void setCurrentResult(int currentResult) { this.currentResult = currentResult; } public String getSortField() { return sortField; } public void setSortField(String sortField) { this.sortField = sortField; } public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } }
返回前端给jqgrid的json数据输出:
public String outputJSONDataByList(PageInfo pageview) { JSONObject obj = new JSONObject(); obj.put("page", pageview.getPage()); // 当前页 obj.put("total", pageview.getTotalPage()); // 总页数 obj.put("records", pageview.getTotalResult()); // 总记录数 obj.put("rows", pageview.getResultsList()); //具体的Table显示内容 return obj.toString(); }