TreeList 复选框性能
TreeList Checkbox Performance
我有一个包含 200 多行的 TreeView。
当我点击复选框时,执行检查大约需要 1 秒。
当我点击 header 复选框时,它冻结了浏览器。
这是 header 复选框更改时我使用的代码:
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);
}
出于某种原因("toggleAll is not defined")我无法将您的示例添加到 运行,但性能缓慢的原因是因为使用了 .set()。
每次调用 .set() 时,这都会导致 TreeList 完全重新绑定到更改的数据源。
您可以通过在循环中更改字段值 "directly" 而不是使用 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();
我有一个包含 200 多行的 TreeView。
当我点击复选框时,执行检查大约需要 1 秒。
当我点击 header 复选框时,它冻结了浏览器。
这是 header 复选框更改时我使用的代码:
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);
}
出于某种原因("toggleAll is not defined")我无法将您的示例添加到 运行,但性能缓慢的原因是因为使用了 .set()。
每次调用 .set() 时,这都会导致 TreeList 完全重新绑定到更改的数据源。
您可以通过在循环中更改字段值 "directly" 而不是使用 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();