剑道网格性能答案

【问题标题】：Kendo Grid performance剑道网格性能
【发布时间】：2016-10-06 17:37:03
【问题描述】：

我们有一个 Kendo Grid 控件，它显示从数据库服务器中提取的数据。没有分页。所有数据都被拉出一次并用滚动条显示（取决于行数）。

虽然涉及数字文本框（输入类型数字）列和日期控件（输入类型日期）列，但仍有一些用户操作。用户可以更改这些控件中的值，这些值会触发用 javascript 编写的 onchange 事件处理函数。这些 javascript 函数中没有服务器命中，它是纯粹的客户端代码。

我们面临的问题是，只要在任一输入控件中触发更改，就会出现轻微的 UI 阻塞。当使用 console.log 语句跟踪 javascript 代码时，发现在这些操作中花费了大量时间： kendoGrid.dataSource.sort()、$("#dataGrid").data("kendoGrid").dataSource.data(sortedDataObject) 和 $('#dataGrid').data('kendoGrid').refresh()。

我正在寻找一种提高性能的方法，这可能包括部分网格刷新（类似于带有服务器分页的虚拟滚动），涉及网格显示区域中可见的数据，以及部分网格刷新仅涉及一些列。在花了一些时间研究之后，我找不到部分刷新网格的方法。

我无法粘贴任何源代码，因为我不确定有多少代码以及哪些代码可以真正代表问题。这就是为什么我试图更多地用文字来表达这个问题，希望我能得到一些解决方案或方法。

【问题讨论】：

一次显示多少行而不分页？另外，我相信（但不是 100%）.sort()。 data() 和 .refresh() 都会导致网格重新绑定/重绘，因为网格和 dataSource 是相互绑定的 MVVM。所以，我认为您正在重新绑定所有行 3 次。
这可能会有所帮助：demos.telerik.com/kendo-ui/grid/virtualization-local-data
能否请您显示网格并制作输入控件？

标签： javascript asp.net-mvc-4 razor kendo-ui kendo-grid

【解决方案1】：

如您所见，大多数类型的用户交互都会自动刷新网格。这可能很昂贵，并不总是可取的，可以按如下方式停止：

var gridNeedsRefresh = false;

function onGridDataBinding(e) {
    if (!gridNeedsRefresh && isGridPopulated()) {
        e.preventDefault();  // cancel data binding to prevent refresh
    }
}

您需要根据您的特定网格详细信息实现 isGridPopulated 方法。那里的想法是，如果网格没有数据或仍在加载，您不想通过调用 preventDefault 来干扰它。一旦网格被绑定，刷新应该被关闭：

function onGridDataBound() {
    gridNeedsRefresh = false;
}

接下来是确定网格合法需要刷新的所有情况，并设置刷新标志。例如，如果您的网格支持排序或过滤，则需要刷新才能正常运行，因此您需要处理这些事件并设置标志：

function onGridSort(e) {
    gridNeedsRefresh = true;
}

一旦排序完成，onGridDataBound 事件将被调用，导致标志被重置并且网格再次变得高效。

【讨论】：