UI 对剑道网格无响应答案

【问题标题】：UI becoming unresponsive for kendo gridUI 对剑道网格无响应
【发布时间】：2015-05-26 06:21:53
【问题描述】：

我一直面临以下场景的剑道网格问题。

我有一个 18 列的剑道网格。用户可以选择多行。行数大多在10000以上。

为了获得选定的行，我使用grid.select()。要从行中提取内容，我使用的是grid.dataItem(row)。

下面是代码sn-p。

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

只要选定的行数更多。 UI 变得无响应。我调试了代码。 grid.dataItem(row) 需要执行很多操作，导致网页无响应。

请帮我解决这个问题。

问候

【问题讨论】：

请发布您的网格代码。
“行数大多超过10000”是什么意思，你想在一页上显示10000行吗？大多数情况下，我使用带有服务器/客户端过滤的分页，例如每页显示 20 行，这意味着来自服务器的数据更少、更快、更易于维护。

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

性能调整

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

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

【讨论】：

您好，我尝试了您的解决方案。但似乎不适用于大量数据行。 UI stll 在 'grid.dataItem(row);' 处变得无响应
只是一个建议。尝试在加载数据时禁用布局，一旦完成启用它

【解决方案2】：

如果我查看它们的来源，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);
});

【讨论】：

【解决方案3】：

使用分页：

$("#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"        
    ],   
});

【讨论】：

需要进行各种同步，这里不能使用分页。