TreeList複選框性能

Question

我有一個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

Answer 1

我不能讓你的例子，由於某種原因，運行（「toggleAll沒有定義」）但性能較差的原因是由於使用了.set（）。

每次調用.set（）時，都會導致TreeList完全重新綁定到更改數據源。

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(); 

例子：

您可以通過改變循環中的字段值「直接」，而不是使用MVVM .SET（），然後觸發一個重新綁定完成後，即避免這種情況： http://dojo.telerik.com/@Stephen/OmoNu