easyUI 1.3.2 dataGrid动态绑定列名和数据

刚开始用easyUI，项目中碰到个datagrid列名根据数据库中字段值设置的情况，顿时那个头大啊，由于是菜鸟级别，搞了差不多两天，搞出来了那叫一个有成就感啊，所以就跟大家分享下，以备大家不时之需。下边开始：

需要修改easyUI的源码，不同版本可能不同，在网上找到了1.3.1的，我项目用的是1.3.2，大致上差不多：
首先，先把jsp的界面的columns设置为空,frozenColumns为表格中固定不变的列名，columns为动态绑定的：

frozenColumns: [[
{field: 'outPut', title: '输出'},
{field: 'cId',title:'主机Id'},
{field: 'time',title:'时间'}
]],
columns: [[]],

找到easyui源码的7857处，即

function _57a(){
var _57b=opts.loader.call(_577,_579,function(data){
setTimeout(function(){
$(_577).datagrid("loaded");
},0);
_4e5(_577,data);
setTimeout(function(){
_562(_577);
},0);
},function(){
setTimeout(function(){
$(_577).datagrid("loaded");
},0);
opts.onLoadError.apply(_577,arguments);
});

修改此处为

function _57a(){
var _57b=opts.loader.call(_577,_579,function(data){
//add dynamic columns
if(data!=null && data.cols!=null){
var opts=$.data(_577, "datagrid").options;
var cols = $.data(_577, "datagrid").options.columns[0];
var colCount=cols.length;
if(colCount==0){
for (var i = 0; i < data.cols.length; i++) {
var col = {
field: data.cols[i].field,
title: data.cols[i].title,
width: data.cols[i].width
};
cols.push(col);
}
//UI添加列
if (colCount==0 && opts.columns) {
_494(_577);
}
}
}
setTimeout(function(){
$(_577).datagrid("loaded");
},0);

注： _494(_577)为添加列名，不太好找，依葫芦画瓢找。

下边是关键，从后台传过来的json格式必须正确，不然会出不来列名，但是列数的对的

后台json格式为：

{

“total”:239,

“rows”:[{……},{……},{……},{……},{……}],

“cols”:[{……},{……}]

}

cols中每隔大括号中为一个列名，有field,title,还有宽度，必须设置field，title。

贴出来我的一个json格式：

{
"cols":[
{"field":"Jan","title":"一月"},
{"field":"Feb","title":"二月"}
],
"rows":[
{"Feb":"222","Jan":"111","cId":"1","id":65,"outPut":"(1|2|迅雷 qq 浏览器)","queryId":388,"result":1,"time":"2015-03-04 14:52:17"},
{"Feb":"222","Jan":"111","cId":"1","id":66,"outPut":"(1|2|迅雷 qq 浏览器)","queryId":388,"result":1,"time":"2015-03-04 14:52:17"},
{"Feb":"222","Jan":"111","cId":"1","id":67,"outPut":"(1|2|迅雷 qq 浏览器)","queryId":388,"result":1,"time":"2015-03-04 14:52:17"}
],
"total":3
}