UI 对 kendo 网格变得无响应

Question

在以下情况下，我一直面临 kendo 网格的问题。

我有一个包含 18 列的 kendo 网格。用户可以 select 多行。行数大多在10000以上

要获得 selected 行，我使用 grid.select()。要从行中提取内容，我使用 grid.dataItem(row).

以下是代码片段。

            var listofselectedrows = grid.select();
            listofselectedrows.each(function (index, row) {
            var currentDataRow = grid.dataItem(row);
           });

每当 selected 行数更多时。 UI 变得没有反应。我调试了代码。 grid.dataItem(row) 执行时间过长，导致网页无响应。

请帮我解决这个问题。

此致

Answer 1

性能调整

绑定到大型数据集或使用大型页面时，减少内存中的活动 DOM 对象对性能很重要。 Kendo Grid 提供内置的 UI 虚拟化以高度优化绑定到大型数据集。通过简单配置即可启用 UI 虚拟化。

$(document).ready(function(){
      $("#grid").kendoGrid({
         scrollable: {
             virtual: true
         }
      });
  });

Answer 2

使用分页：

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },       
        pageSize: 10,
        serverPaging: true        
    },
    height: 250,    
    pageable: true,
    selectable: "row multiple",
    columns: [
        "OrderID",
        "Freight",        
        "ShipName",                            
        "ShipCity"        
    ],   
});

Answer 3

如果我查看他们的来源，dataItem 函数使用正则表达式 /k-grouping-row|k-detail-row|k-group-footer/ 循环遍历所有行元素以获取行索引。我相信使用数据源 getByUid 会比使用 dataItem 函数更快。

把你的代码改成这样

$.each(listofselectedrows, function (index, row) {
    var uid = $(row).data("uid");
    var currentData = grid.dataSource.getByUid(uid);
});

UI 对 kendo 网格变得无响应

UI becoming unresponsive for kendo grid

javascript

jquery

kendo-ui

kendo-grid