easyUI datagrid ajax即時重新整理 動態添加列名

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.