如何使用Kendo-ui網格虛擬化遠程數據？

我使用kendo-ui網格爲AngularJs並且想要激活virtualization of remote data功能。爲了測試，我設置了pageSize: 5。下面是從Telerik的網站virtualization of remote data描述：如何使用Kendo-ui網格虛擬化遠程數據？

有些時候你可能需要在電網大數據量的操作，並且獲取和同時處理該數據將並處由於性能上的損失限制瀏覽器資源。幸運的是，Kendo UI網格有一個名爲數據虛擬化的解決方案，可以緩解在處理大量數據時產生的任何減速。當通過可滾動 - >虛擬配置選項啓用後，它將爲網格內容顯示一個垂直滾動條，並僅顯示通過網格數據源的pageSize屬性設置的項目數。拖動滾動條並超出pageSize後，會自動請求檢索並呈現下一組網格行。網格虛擬化功能支持本地和遠程數據，而在此演示中，記錄從遠程端點獲得。

而且我已經設置如下：

HTML：

<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>

JS電網：

var vm = $scope; 
vm.viewMode = { 
    mainGridOptions: { 
    visible: true 
    } 
}; 
vm.mainGridOptions = { 

      columns: [ 
       // here columns 
      ], 
      onRegisterApi: function (gridApi) { 
       vm.gridApi = gridApi; 
      }, 
      dataSource: { 
       schema: { 
        model: { 
         fields: { 
          YearBalance: { type: 'number' }, 
          Typezalezh: { type: 'string' }, 
          License: { type: 'string' }, 
          ObjectName: { type: 'string' }, 
          ZalezhName: { type: 'string' }, 
          PlastName: { type: 'string' }, 
          Category: { type: 'string' }, 
          Parameter: { type: 'string' }, 
          LastVal: { type: 'string' }, 
          Val: { type: 'string' }, 
          Operation: { type: 'string' }, 
          EndT: { type: 'date' } 
         } 
        } 
       }, 

       pageSize: 5, 
       transport: { 
        read: function(e) { 
         dataservice.getImportResultReport().then(function(data) { 
          e.success(JSON.parse(data)); 
          console.log(data); 
         }); 
        } 
       } 
      }, 
      serverPaging: true, 
      height: screen.height - 330, 
      minwidth : 1190, 
      batch: true, 
      scrollable: { 
       virtual: true 
      }, 
      sortable: true, 

      serverSorting: true, 
      filterable: { 
       extra: false, 
       operators: { 
        string: { 
         // here filters 
        }, 
        number: { 
         // here filters 
        }, 
        date: { 
         // here filters 
        } 
       } 
      } 
     };

在Telerik的網站（官網），它說，沒有更多的需求要做。在滾動時，我應該看到服務器的請求，在我的情況下應該是dataservice.getImportResultReport()調用。但是這不會發生。該函數僅被調用一次，並返回所有數據。

可能是因爲我沒有設置type: "odata"？但是我使用另一種類型的數據源。

如何使用此功能？

來源

2017-09-01 Seva

究竟你'遠程data'的虛擬化是什麼意思？你想在劍道網格中顯示數據嗎？ –

我添加了這個功能的描述。 – Seva

好吧，明白了，你也可以告訴你用什麼html來呈現劍道網格？ angularjs語法看起來不錯，但我想你可能錯過了在html –

添加k-scrollable指令，因爲在你的HTML呈現您的劍道格如下：

<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>

而且你必須使用k-data-source指令爲您的數據源。希望能幫助到你。

工作演示plunkr

來源

2017-09-01 16:39:17

如何使用Kendo-ui網格虛擬化遠程數據？

回答

相關問題