1

我最近在处理较大的数据集（500-1000+ 个节点）时遇到了处理Telerik Treeview 组件和使用复选框处理递归选择的问题。

对于较小的数据集（100-300 个节点），Treeview 及其选择方法的工作方式如下（应该如此）：

  • 最初 - 选择所有节点。

  • 单击父节点会切换所有子节点的选择。

  • 取消选择单个子节点将取消选择父节点（以及任何祖父/顶级节点）

我认为在处理 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 回答