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异步动态添加列名的实时刷新。