TreeList复选框性能

时间:2017-01-03 04:55:54

标签: checkbox kendo-ui kendo-treelist

我有一个200多行的TreeView。

当我点击复选框时,执行检查大约需要1秒。

当我点击标题复选框时,它会冻结浏览器。

这是我在标题复选框更改时使用的代码:

function toggleAll(e) {
        setTimeout(function() {
                const view = dataSource.view();
                const checked = e.target.checked;

                //$(`input[data-name=${e.target.dataset.name}]`).prop('checked', checked);
                for (let i = 0; i < view.length; i++) {
                    view[i].set(e.target.dataset.name, checked);
                }
            },
            0);
    }

This is jsfiddle url

1 个答案:

答案 0 :(得分:1)

我无法让你的例子出于某种原因运行(“toggleAll未定义”),但性能缓慢的原因是因为使用了.set()。

每次调用.set()时,都会导致TreeList完全重新绑定到更改dataSource。

您可以通过在循环中“直接”更改字段值而不是使用MVVM .set()来避免这种情况,然后在完成后触发单个重新绑定,即:

for (let i = 0; i < view.length; i++) {
    // Does not trigger a rebind of TreeList and its dataSource.
    view[i][e.target.dataset.name] = checked;
}
// Now that the dataSource is done being mass updated, trigger a single rebind.
$("#treelist").getKendoTreeList().refresh();

示例:http://dojo.telerik.com/@Stephen/OmoNu