0

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

これはjsfiddleのURLです

4

1 に答える 1

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

于 2017-01-03T16:04:34.120 に答える