jqGrid如何实现动态列

最近在一个项目中需要实现jqGrid动态列功能,然而jqgrid并没有很好的支持这个功能,在网上查阅了很多资料,最后看到一个博客的思路大概想出了怎么解决。

由于我们使用的表格主要是jqGrid 和 dataGGrid来实现的,按照相关API可以轻松的实现表格,但是有时候在不知道到底有多少列的时候jqGrid和dataGrid显得力不从心,如图所示红色部分的列是不确定的

解决方案:由于jqGrid的列描述是存在一个数组里面的,只要在使用表格的时候按照要求动态的实现这个数组就行了。
这是个列数组(设定固定列):

1
2
3
4
5
6
7
8
9
10
11
12
13
colModelData = [{
label: '月份',
name : 'monthCount',
sortable : false,
width : 100,
align : 'center'
},{
label: '单位数量',
name : 'count',
sortable : false,
width : 100,
align : 'center'
}]

更具数据库实际情况添加列(设置动态列):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var properties =['financeTypeID','financeTypeName'];
RaAccountDetailService.findMapByPropertiesQuick(properties,null,false,function(data){
if(data){
for(var i=0;i<data.length;i++){
var amountCol = {
label :data[i].financeTypeName,
name : data[i].financeTypeName+"",
sortable : true,
width : 70,
align : 'center',
formatter:transferNullToZero
};
colModelData.push(amountCol);
}
}
});

在jqGrid中加入这个列数据(把列数组放在colModel里面):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
height : "auto",
datatype: "json",
dwrFun: RaCaseService.findMapByPropertiesForMonthReport,
dwrCountFun: RaCaseService.findCountByPropertiesForMonthReport,
condition: "",
searchCondition: '',
selectCondition: '',
needLink: false,
dwr: true,
autowidth: true,
footerrow: true,
gridComplete: completeGroupMethod,
colModel:columnData,
rowNum: 10,
rowList : [ 10,20, 30 ]

按照这三点就可以实现动态列了。