jqgrid 动态改变列头

 总结下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();
	}

 

 

评论

1 楼 superscorpio 2013-05-16  

如果要支持多列排序呢？