easyUI datagrid ajax实时刷新 动态添加列名

上一篇实现了datagrid加载时列名的动态添加,因项目需求,需要对此页面设置定时器,3秒刷新一次,用datagrid的reload方法刷新时会有闪屏的效果,网上搜的在本页面中添加css样式的方法虽然对闪屏有一定的改善,但效果依然不佳,还是可以看到刷新的痕迹。于是想到了ajax的异步刷新无闪屏效果,先设置个定时器
setInterval("freshgrid()",3000);
接下来实现刷新的方法greshgrid();

function freshgrid(){
    //$("#grid").datagrid("reload");
    var grid = $('#grid'); 
    var options = grid.datagrid('getPager').data("pagination").options;
    var page = options.pageNumber;  //获得当前的页数
    var rows = options.pageSize;    //获得设置的每页显示的行数,此两个参数为分页查询需要
    $.ajax({ 
        type:'POST',
        url:'queryResult.action',
        data: {'queryId':${param.queryId},'rows':rows,'page':page},
        success:function(data){ 
                $('#grid').datagrid('loadData', eval('('+data+')'));
            } 
    });     
}

后台传回的为标准json格式(上次说到的格式)。
写到这里如果刚开始加载时动态添加的列名已经有的话不会出现任何错误,但项目中刚开始动态添加的列名为空,之后刷新easyui的源码不刷新列名,所以此时虽然json中有相应的数据,但是将不会显示,此时需要在loadData的源码处加入添加的列名。easyUI1.3.2
先找到loadData,在8173行

});
},loadData:function(jq,data){
return jq.each(function(){
_4e5(this,data);
_562(this);
});

在_4e5(this,data);中添加列名的解析即可。此方法的实现在7245行

function _4e5(_4e6,data){
var _4e7=$.data(_4e6,"datagrid");
var opts=_4e7.options; 
var dc=_4e7.dc;
data=opts.loadFilter.call(_4e6,data);
data.total=parseInt(data.total);
_4e7.data=data;
if(data.footer){
_4e7.footer=data.footer;
}

在其中添加的代码与上节添加的类似

function _4e5(_4e6,data){
var _4e7=$.data(_4e6,"datagrid");
var opts=_4e7.options;
if(data!=null && data.cols!=null){  
    var cols = opts.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(_4e6);
       }        
    }      
}  
var dc=_4e7.dc;
data=opts.loadFilter.call(_4e6,data);
data.total=parseInt(data.total);
_4e7.data=data;
if(data.footer){
_4e7.footer=data.footer;
}

此时即可实现ajax异步动态添加列名的实时刷新。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值