1

最近、 Telerik Treeview コンポーネントを処理し、より大きなデータ セット (500 ～ 1000 以上のノード) を処理するときにチェックボックスを使用して再帰的な選択を処理するという問題に遭遇しました。

より小さなデータ セット (100 ～ 300 ノード) では、Treeview とその選択方法は次のように機能します (当然のことです)。

  • 最初は、すべてのノードが選択されています。

  • 親ノードをクリックすると、すべての子ノードの選択が切り替わります。

  • 1 つの子ノードを選択解除すると、親 (およびすべての祖父母/最上位ノード) が選択解除されます。

Treeviews と選択を扱う場合、これらのほとんどはかなり一般的だと思います。使用されている現在のメソッドは最もクリーンではなく、選択プロセス中に不要な量の追加イベントを呼び出します。

現在のコードを分解し始める前に、誰かがこれと同様の問題を処理したかどうか、ただ興味がありました (以下で入手できます)。

既存の選択コード:

$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) {

        var isChecked = $(e.target).is(':checked');
        var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
        var item = $(e.target).closest('.t-item');
        var checkboxes = item.find('.t-checkbox :checkbox');
        $.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); });
        var siblings = item.parent().find('> li .t-checkbox');
        var siblingsLength = siblings.length;
        var checkedLength = siblings.find(':checked').length;
        if (siblingsLength == checkedLength) {
            var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            parentCheckBox.attr('checked', true)
            grandparentCheckBox.attr('checked', true)
            treeView.checkboxClick(e, parentCheckBox)
            treeView.checkboxClick(e, grandparentCheckBox)
        }
        else {
            var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            parentCheckBox.attr('checked', false)
            grandparentCheckBox.attr('checked', false)
            treeView.checkboxClick(e, parentCheckBox)
            treeView.checkboxClick(e, grandparentCheckBox)
        }
    });
4

2 に答える 2

3

非常に大きなデータセットを処理する場合でも、現時点では少なくとも効果的に機能し、既存のソリューションよりもはるかに高速に機能すると思われるソリューションを見つけました。

TreeView内のCheckedイベントで起動し、必要なすべての子の選択を処理する単純な関数を作成しました。

function TreeView_Checked(e) {
    var current = $(e.item).find(':checkbox:eq(0)');
    //Check or uncheck all child nodes from this one
    var children = $(e.item).find(':checkbox');
    current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked');
}

これは、TreeView宣言内に以下を追加することによって実装されます。

TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked"))
于 2012-07-24T15:16:32.207 に答える
1

このコードは、親とそのすべての子を選択または選択解除します。祖父母が必要な場合は、おそらく.closest（ "。t-item"）を実行できます。

  $(document).ready(function () {
        $("#btnSelectChildren").click(function () {
            nodeCheck(true);
        });
        $("#btnDeselectChildren").click(function () {
            nodeCheck(false);
        });
    });

    function nodeCheck(isChecked) {
        var treeView = $('#TreeView').data('tTreeView');
        var selected = $('#TreeView .t-state-selected');
        treeView.nodeCheck(selected, isChecked);
        selected.closest('li').find(".t-item").each(function () {
            treeView.nodeCheck($(this), isChecked);
        });
    }
于 2012-08-10T20:02:39.070 に答える