[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView視圖簡單分析
大家都知道EasyUI的Datagrid組件在載入大資料量時的優勢並不是很明顯，相對於其他一些架構，如果資料量達到幾千，便會比較慢，特別是在IE下面。針對這種情況，我們首要做的是要相辦法最佳化datagrid組件的各方面效能，不過任何事情都是可以變通解決的，virtualScrollView就是一種不錯的解決方案。
virtualScrollView的準則就是盡量少畫tr到table裡，表格的高度是有限的，而使用者的可見地區是很有限的，所以資料量很大的時候，是沒有必要將所有資料資料都畫到表格中，這樣造成龐大的DOM，導致載入速度變慢。
源碼分析
jQuery EasyUI的datagrid組件官方也擴充了一個virtualScrollView視圖，我們來分析一下它的源碼：
- var scrollview = $.extend({}, $.fn.datagrid.defaults.view, { render: function(target, container, frozen){
- var state = $.data(target, 'datagrid'); var opts = state.options;
- //這個地方要特別注意，並不是用的state.data.rows資料 //而是用的view.rows，而view.rows在onBeforeRender事件中被設定為undefined了
- //onBeforeRender事件在scrollview中,即便是url方式有也只會被觸發一次，所以在第一次rend時，是沒有資料直接return了。 var rows = this.rows || [];
- if (!rows.length) { return;
- } var fields = $(target).datagrid('getColumnFields', frozen);
- //如果是rend frozen部分，但是有沒有行號和frozenColumns的話，那就直接返回
- if (frozen){ if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
- return; }
- }
- var index = this.index; var table = ['
- for(var i=0; i var classValue = ''; var styleValue = '';
- table.push(this.renderRow.call(this, target, fields, frozen, index, rows[i])); table.push('
- index++; }
'];
- if (typeof css == 'string'){ styleValue = css;
- } else if (css){ classValue = css['class'] || '';
- styleValue = css['style'] || ''; }
- var cls = 'class="datagrid-row ' + (index % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"'; var style = styleValue ? 'style="' + styleValue + '"' : '';
- // get the class and style attributes for this row // var cls = (index % 2 && opts.striped) ? 'class="datagrid-row datagrid-row-alt"' : 'class="datagrid-row"';
- // var styleValue = opts.rowStyler ? opts.rowStyler.call(target, index, rows[i]) : ''; // var style = styleValue ? 'style="' + styleValue + '"' : '';
- var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + index; table.push('
');
');
- table.push('
');
- $(container).html(table.join('')); },
- /**
- * onBeforeRender事件，首先要明白兩點： * 1-調用loadData方法載入資料資料時，loadData內部rend之前會觸發這個事件
- * 2-url方式時，擷取到遠端資料之後，也是使用loadData方法載入資料的，所以url方式也會觸發onBeforeRender事件 * @param {DOM} target datagrid執行個體的宿主DOM對象
- * @return {[type]} [description] */
- onBeforeRender: function(target){ var state = $.data(target, 'datagrid');
- var opts = state.options; var dc = state.dc;
- var view = this; // 刪除onLoadSuccess事件，防止被觸發，將備份到state.onLoadSuccess上
- state.onLoadSuccess = opts.onLoadSuccess; opts.onLoadSuccess = function(){};
- opts.finder.getRow = function(t, p){
- var index = (typeof p == 'object') ? p.attr('datagrid-row-index') : p; var row = $.data(t, 'datagrid').data.rows[index];
- if (!row){//什麼情況會取不到呢？ var v = $(t).datagrid('options').view;
- row = v.rows[index - v.index]; }
- return row; };
- dc.body1.add(dc.body2).empty();
- this.rows = undefined; // 把需要畫的tr綁定到view.rows上了 this.r1 = this.r2 = []; // view.r1和viwe.r2分別存放對第一頁tr和最後一頁tr的引用
- //這裡不要想當然，只是綁定了事件，在第一次載入資料時，究竟是什麼時候觸發這個事件的呢 //這個問題得追溯到loadData方法了，每次loadData之後都會直接使用triggerHandler觸發scroll的
- dc.body2.unbind('.datagrid').bind('scroll.datagrid', function(e){ if (state.onLoadSuccess){
- opts.onLoadSuccess = state.onLoadSuccess; // 恢複onLoadSuccess事件 state.onLoadSuccess = undefined;
- } if (view.scrollTimer){// 清除定時器
- clearTimeout(view.scrollTimer); }
- // 延時五十毫秒執行 view.scrollTimer = setTimeout(function(){
- scrolling.call(view); }, 50);
- });
- function scrolling(){ if (dc.body2.is(':empty')){//dc.body2對應普通列資料，如果為空白的話，說明沒有資料。
- //沒有資料就嘗試載入資料 reload.call(this);
- } else { var firstTr = opts.finder.getTr(target, this.index, 'body', 2);
- var lastTr = opts.finder.getTr(target, 0, 'last', 2); var headerHeight = dc.view2.children('div.datagrid-header').outerHeight();
- var top = firstTr.position().top - headerHeight; var bottom = lastTr.position().top + lastTr.outerHeight() - headerHeight;
- if (top > dc.body2.height() || bottom < 0){
- reload.call(this); } else if (top > 0){
- var page = Math.floor(this.index/opts.pageSize); this.getRows.call(this, target, page, function(rows){
- this.r2 = this.r1; this.r1 = rows;
- this.index = (page-1)*opts.pageSize; this.rows = this.r1.concat(this.r2);
- this.populate.call(this, target); });
- } else if (bottom < dc.body2.height()){// 需要載入下一頁的情況 var page = Math.floor(this.index/opts.pageSize)+2;
- if (this.r2.length){ page++;
- } this.getRows.call(this, target, page, function(rows){
- if (!this.r2.length){ this.r2 = rows;
- } else { this.r1 = this.r2;
- this.r2 = rows; this.index += opts.pageSize;
- } this.rows = this.r1.concat(this.r2);
- this.populate.call(this, target); });
- } }
- function reload(){
- var top = $(dc.body2).scrollTop();//被捲起的高度 var index = Math.floor(top/25);//擷取被捲起的行索引，如：捲起一行半37.5，index為1
- var page = Math.floor(index/opts.pageSize) + 1;//擷取頁數，如果每頁10條，捲起262.5，page為2
- this.getRows.call(this, target, page, function(rows){ this.index = (page-1)*opts.pageSize;//view.index存放的是page頁第一行的索引
- this.rows = rows;//view.rows存放需要畫的tr this.r1 = rows;
- this.r2 = []; this.populate.call(this, target);
- dc.body2.triggerHandler('scroll.datagrid'); });
- } }
- },
- getRows: function(target, page, callback){ var state = $.data(target, 'datagrid');
- var opts = state.options; var index = (page-1)*opts.pageSize;
- var rows = state.data.rows.slice(index, index+opts.pageSize); if (rows.length){//這是一次性載入完所有資料的方式，可以直接從本地javascript數組中取出資料
- callback.call(this, rows);
- } else {//懶載入方式 var param = $.extend({}, opts.queryParams, {
- page: page, rows: opts.pageSize
- }); if (opts.sortName){
- $.extend(param, { sort: opts.sortName,
- order: opts.sortOrder });
- } if (opts.onBeforeLoad.call(target, param) == false) return;
- $(target).datagrid('loading');
- var result = opts.loader.call(target, param, function(data){ $(target).datagrid('loaded');
- var data = opts.loadFilter.call(target, data); callback.call(opts.view, data.rows);
- // opts.onLoadSuccess.call(target, data); }, function(){
- $(target).datagrid('loaded'); opts.onLoadError.apply(target, arguments);
- }); if (result == false){
- $(target).datagrid('loaded'); }
- } },
- populate: function(target){
- var state = $.data(target, 'datagrid'); var opts = state.options;
- var dc = state.dc; var rowHeight = 25;
- if (this.rows.length){
- opts.view.render.call(opts.view, target, dc.body2, false); opts.view.render.call(opts.view, target, dc.body1, true);
- // 看到了麼，捲軸有那麼大空間是怎麼實現的了嗎？用的padding！ dc.body1.add(dc.body2).children('table.datagrid-btable').css({
- paddingTop: this.index*rowHeight, paddingBottom: state.data.total*rowHeight - this.rows.length*rowHeight - this.index*rowHeight
- }); opts.onLoadSuccess.call(target, {
- total: state.data.total, rows: this.rows
- }); }
- } });
分析結論virtualScrollView原理是通過設定div的上下padding來達到類比極大資料量的效果的，我們只畫比可視部分多一點的trEasyUI的virtualScrollView支援兩種方式：一是一次性請求完所有資料；二是每次都是ajax到pageSize條資料EasyUI的virtualScrollView畫的tr數量是2*pageSize(初次載入例外，這時候只畫1*pageSize的tr)EasyUI的virtualScrollView視圖把行高強制視為25px的，如果你設定非25px的行高，這個視圖就不能正常工作因為只畫2*pageSize個tr，所以我們dategrid的高度不能設定得超過2*25*pageSize個像素，超過的話就會造成可視區有留白使用loadData方法載入資料的話loadData入參不需要total屬性，只要是rows數組就可以了，total在loadData內部會自動計算對於前面幾點，大家自己看看源碼裡我寫的注釋，基礎差的，看個似懂非懂就行了，基礎好的，最好就徹底研究下。
存在的Bug請求後台死迴圈如果是url方式，第一次載入不到資料，就會不斷地請求後台。看到146行了麼，如果回呼函數沒有接受到rows，是不應該觸發scorll事件的，因為scroll事件會請求後台資料，我已我們只要加上條件就行了：
- if(rows && rows.length > 0){ dc.body2.triggerHandler('scroll.datagrid');
- } 二次請求後台
url方式下，如果後台返回資料不足以填充表格高度的時候，會重複請求後台(注意這地方只重複請求一次，跟第一個bug不同)。這個問題的原因也很簡單，其實這種情況，datagrid高度有點大，但是後台又只有很少幾條資料造成的，表現在只有一批資料，而這批資料又不足以填滿這個表格可視區高度。我們把122行對getRows方法的調用加個條件就可以了：
- if (this.rows.length == opts.pageSize) { this.getRows.call(this, target, page, function(rows) {
- if (!this.r2.length) { this.r2 = rows;
- } else { this.r1 = this.r2;
- this.r2 = rows; this.index += opts.pageSize;
- } this.rows = this.r1.concat(this.r2);
- this.populate.call(this, target); });
- }
this.rows是當前已經畫的一批rows，如果rows的條數沒有pageSize大，那就說明不需要再請求資料了。
virtualScrollView是一種很好的最佳化手段，以後會被應用的越來越廣的，EasyUI的VirtualScrollView視圖是否支援editor我並有去嘗試，估計是不支援的，有興趣的同學可以去研究研究。
