SlikGrid虛擬滾動 - 巨大的數據集

Question

我能夠擴展Ajax-Loading Example以滿足我的要求。

在當前的實現中，slick.remotemodel.js中的加載器有一個名爲data的變量，它是一個javascript對象數組。這個數組是網格的數據源。當我們繼續滾動時，儘管DOM只有渲染行的頁面大小，但javascript數組不斷增長。

javascript對象的大小上限是多少？有沒有可能耗盡內存？假設我的數據集的排列順序爲〜125000行，多列〜10。我意識到可能需要更多的信息來定義數據集的大小，但有了上述信息，有人可以提供一些輸入嗎？

爲了處理上述情況，我更新了代碼。請參閱我的編輯。請讓我知道我是否缺少任何東西。

編輯：我的解決方案是調用onsuccess方法中的clear方法，以確保數據數組只有PAGESIZE項目數。

(function ($) { 
    /*** 
    * Ajax loading example which is an extension 
    * of the http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html 
    * example. 
    */ 
    function RemoteModel() { 
     // private 

     var fromPage = 0; 
     var rows = 0; 

     var PAGESIZE = 250; 
     var data = { length: 0 }; 
     var h_request = null; 
     var req = null; // ajax request 

     // events 
     var onDataLoading = new Slick.Event(); 
     var onDataLoaded = new Slick.Event(); 


     function init() { 
     } 


     function isDataLoaded(from, to) { 
      for (var i = from; i <= to; i++) { 
       if (data[i] == undefined || data[i] == null) 
        return false; 
      } 

      return true; 
     } 


     function clear() { 
      for (var key in data) { 
       delete data[key]; 
      } 
      data.length = 0; 
     } 


     function ensureData(from, to) { 

      if (req) { 
       req.abort(); 

       for (var i = req.fromPage; i <= req.toPage; i++) 
        data[i * PAGESIZE] = undefined; 
      } 

      if (from < 0) 
       from = 0; 

      fromPage = Math.floor(from/PAGESIZE); 
      var toPage = Math.floor(to/PAGESIZE); 

      while (data[fromPage * PAGESIZE] !== undefined && fromPage < toPage) 
       fromPage++; 

      while (data[toPage * PAGESIZE] !== undefined && fromPage < toPage) 
       toPage--; 

      rows = (((toPage - fromPage) * PAGESIZE) + PAGESIZE); 

      if (fromPage > toPage || ((fromPage == toPage) && data[fromPage * PAGESIZE] !== undefined)) { 

       // TODO: look-ahead 
       return; 
      } 

      var url = "" ; // IMPORTANT : you should set this to your url which returns the data 

      if (h_request != null) { 
       clearTimeout(h_request); 
      } 

      h_request = setTimeout(function() { 

       for (var i = fromPage; i <= toPage; i++) 
        data[i * PAGESIZE] = null; // null indicates a 'requested but not available yet' 

       onDataLoading.notify({ from: from, to: to }); 

       req = $.ajax({ 
        url: url, 
        dataType: 'json', 
        success: function (response) { 
         onSuccess(response); 
        }, 
        error: function() { 
         onError(fromPage, toPage); 
        } 
       }); 


       req.fromPage = fromPage; 
       req.toPage = toPage; 

      }, 100); 
     } 


     function onError(fromPage, toPage) { 
      alert("error loading pages " + fromPage + " to " + toPage); 
     } 

     function onSuccess(response) { 

      //Solution to keep the data array bounded to pagesize: Call the clear method to have only PAGESIZE elements in the data array at any given point 
      clear(); 

     //The visisble # of rows in the viewport could be only ~20 but 
      // i'm populating PageSIZE which acts like the client-side cache, in my case 250, 
     // so that I avoid too many server hops 
      var from = fromPage * PAGESIZE, to = from + PAGESIZE; 

      data.length = response.count; 

      for (var i = 0; i < response.Fields.length; i++) { 
       data[from + i] = response.Fields[i]; 
       data[from + i].index = from + i; 
      } 

      req = null; 

      onDataLoaded.notify({ from: from, to: to }); 
     } 


     function reloadData(from, to) { 
      for (var i = from; i <= to; i++) 
       delete data[i]; 

      ensureData(from, to); 
     } 


     init(); 

     return { 
      // properties 
      "data": data, 

      // methods 
      "clear": clear, 
      "isDataLoaded": isDataLoaded, 
      "ensureData": ensureData, 
      "reloadData": reloadData, 

      // events 
      "onDataLoading": onDataLoading, 
      "onDataLoaded": onDataLoaded 
     }; 
    } 

    // Slick.Data.RemoteModel 
    $.extend(true, window, { Slick: { Data: { RemoteModel: RemoteModel}} }); 
})(jQuery); 
enter code here 

感謝

Answer 1

我的解決辦法是調用的onSuccess方法Clear方法，以確保數據數組的項目只有PAGESIZE＃。這將只保留JavaScript對象數組中的數據，這是必需的，其他所有內容都應該設置爲undefined。