[前言]
最近在项目中使用到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+"' οnclick='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接到数据后,需要替换字符再封装数组数据。
只需注意上述问题点,可以做到列头及列数据的动态可配置化。
(时间有限,可能写的有些粗糙,后续会优化讲解。)