JqGrid动态列实现

[前言]

最近在项目中使用到JqGrid。个人感觉，较之前的DataGrid好用一些，功能也比较齐全。

关于JqGrid的API解释，在这里不再进行嗷述，网上一搜一大把。

只是在项目实现过程中需要进行可配置化，因此需要进行JqGrid的动态列。

（说白了，列头不直接在JS里面写死，要从数据库或者配置文件读取）

这里，对这个实现方法进行简单的梳理和记录。

[讲解 - 个人经验]

最传统的JqGrid方法中，在colNames中需要直接把列头写死，如下：

colNames : [ 'ID', '序号', '名称', '数量','大小','操作'],colModel : [ {name : 'id',index : 'id',width : 10,hidden : true,key : true}, {name : 'rowno',index : 'rowno',align :"center",width : 40,}, ... ...{name : 'ssmc',index : 'ssmc',align :"center",width : 140,stype : 'text',formatter:function(cellvalue, options, rowObj){ var html="<span>";html += "<a href='javascript:void(0);' title='"+cellvalue+"' onclick='showFacilitiesInfo(\""+rowObj.id+"\",\""+rowObj.mc+"\")'>";html += "<font color='blue'>"+cellvalue;                html += "</font>";html += "</a></span>";        return html; }}, 

但是如涉及项目可移植化，需要对列头进行可配置开发，就不能采用这种固定列头的方式了。

[程序 - 实战可用]

首先，如下，将colNames和colModel定义为两个变量。

... ...colNames : colNamesReturn,colModel : colModelReturn,... ...

接下来，就要后台拼接这两个变量了。

首先是colNames(列头名)，定义为一个数组，var colNamesReturn = []。

然后，在后台通过List获取到所有列头值，再拼接为JSON字符串返回给前台。

List<ColNamesReturnVO> colNamesList;colNamesList = 获取colNamesList;String jsonString = "[{\"colName\":\"类型/辖区\"},";for(int i = 0; i < colNamesList.size(); i++){if(i != 0)jsonString += ",";jsonString += "{\"colName\":\"" + colNamesList.get(i).getColName() + "\"}";}jsonString += ",{\"colName\":\"合计\"}]";colAmount = colNamesList.size();return jsonString;

最后，前台再接到此数据，转换为数组，传递给JqGrid。

var colNamesReturn = [];                      $.ajax({type : "POST",url : 获取数据地址,data : {},async : false,contentType : "application/x-www-form-urlencoded; charset=UTF-8",dataType : "json",success : function(data) {var colNamesListJsonData = eval("("+data+")");for(var o in colNamesListJsonData) {//alert(colNamesListJsonData[o].colName);colNamesReturn.push(colNamesListJsonData[o].colName);}}});return colNamesReturn;

至此，可完成列头的动态配置。

后台查询并拼接列数据时，可参考上述拼接列头的方法。

也是采用，后台查询并拼接出数据的JSON串，传递给前台，前台再解析为二维数组的方法。

不过还是有一些点需要注意。详细可参考如下代码：

public String getcolModelReturn(){String jsonString = "[{\"colModel\":\"{name : _sslx_,index : _sslx_, width : 250}\"},";for(int i = 0; i < colAmount; i++){if(i != 0)jsonString += ",";String currentName = "region" + i;String appendStr = "{name : _" + currentName + "_,index : _" + currentName + "_, width : 100}";jsonString += "{\"colModel\":\"" + appendStr + "\"}";}jsonString += ",{\"colModel\":\"{name : _hj_,index : _hj_, width : 100}\"}]";System.out.println(jsonString);return jsonString;}

后台Java代码，需要注意JSON串的拼接。（将双引号先设置为下划线）

var colModelReturn = [];$.ajax({type : "POST",url : 请求数据地址,data : {},async : false,contentType : "application/x-www-form-urlencoded; charset=UTF-8",dataType : "json",success : function(data) {var colModelsListJsonData = eval("("+data+")");for(var o in colModelsListJsonData) {var dataStr = colModelsListJsonData[o].colModel;dataStr = dataStr.replace(/_/g, "'");dataStr = dataStr.replace(/!/g, "\"");//alert(dataStr);colModelReturn.push(dataStr);}}});

前台JS接到数据后，需要替换字符再封装数组数据。

只需注意上述问题点，可以做到列头及列数据的动态可配置化。

（时间有限，可能写的有些粗糙，后续会优化讲解。）