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
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值