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接到数据后，需要替换字符再封装数组数据。

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

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

猜你喜欢