Javascript Treeview | Telerik MVC中的递归复选框选择

我最近遇到了一个问题，在处理500-1000多个节点的较大数据集时，如何处理和使用复选框处理递归选择

对于较小的数据集100-300个节点，Treeview及其选择方法如下所示：

最初-选择所有节点

单击父节点可切换所有子节点的选择

取消选择单个子节点将取消选择父节点和任何祖辈/顶级节点 我认为，在处理TreeView和选择时，这些事情中的大多数是相当常见的。正在使用的当前方法不是最干净的，并且在选择过程中调用了不必要的额外事件量

我只是好奇，在我开始分解下面可用的当前代码之前，是否有人处理过类似的问题

现有选择代码：

---

我找到了一个解决方案，我觉得至少到目前为止，该解决方案能够有效运行，并且比现有的解决方案快得多，即使在处理非常大的数据集时也是如此

我创建了一个简单的函数，该函数在树视图中的选中事件时触发，并处理所有必要的子选择：

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"))

---

我找到了一个解决方案，我觉得至少到目前为止，该解决方案能够有效运行，并且比现有的解决方案快得多，即使在处理非常大的数据集时也是如此

我创建了一个简单的函数，该函数在树视图中的选中事件时触发，并处理所有必要的子选择：

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"))

---

此代码将选择或取消选择父项及其所有子项。如果你想要祖父母，你可以这样做

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

---

此代码将选择或取消选择父项及其所有子项。如果你想要祖父母，你可以这样做

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