上一篇實現了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非同步動態添加列名的即時重新整理。