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