剑道网格性能

Kendo Grid performance

本文关键字：性能 网格      更新时间：2023-09-26

我们有一个Kendo Grid控件，它显示从数据库服务器提取的数据。没有分页功能。所有的数据被拉一次，并显示一个滚动条(取决于行数)。

有一些用户操作涉及一个数字文本框(输入类型为number)列和一个日期控件(输入类型为date)列。用户可以更改这些控件中的值，这些控件会触发用javascript编写的onchange事件处理函数。在这些javascript函数中没有服务器访问，它是纯粹的客户端代码。

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

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

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

正如您所发现的，大多数类型的用户交互都会自动刷新网格。这可能是昂贵的，并不总是理想的，可以通过以下方式停止:

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

您需要基于特定的网格细节实现isgridpopulate方法。这里的想法是，如果网格没有数据或仍在加载中，您不想通过调用preventDefault来干扰它。一旦网格被绑定，刷新应该关闭:

function onGridDataBound() {
    gridNeedsRefresh = false;
}

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

function onGridSort(e) {
    gridNeedsRefresh = true;
}

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

相关文章：