Question

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

使用较小的数据集（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)
        }
    });

Answer 1

我找到了一种解决方案，我觉得它现在至少可以有效运行，并且比现有解决方案工作得更快，即使在处理非常大的数据集时也是如此。

我创建了一个简单的函数，它触发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"))

Answer 2

此代码将选择或取消选择父级及其所有子级。如果你想要祖母，你可以做.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);
        });
    }

树视图中的递归复选框选择| Telerik MVC

2 个答案: