获取 Kendo UI Web TreeView 中的复选框列表答案

【问题标题】：Getting a list of checked boxes in Kendo UI Web TreeView获取 Kendo UI Web TreeView 中的复选框列表
【发布时间】：2012-11-15 00:14:14
【问题描述】：

如何在 Kendo UI Web TreeView 中获得选中复选框的列表？我在 API 的任何地方都找不到这个功能，但我认为这将是一个非常基本的操作..

【问题讨论】：

标签： telerik treeview kendo-ui

【解决方案1】：

实际上没有 API 方法，但您可以使用 jQuery 轻松获取它们。

要获得复选框选定的输入，请使用

$('#treeviewName :checked');

要获取选中的容器 li 元素，请使用：

$('#treeviewName :checked').closest('li');

一旦你有了 li 元素，你就可以将它传递给 TreeView 的 dataItem 方法，并获取底层模型以及它的 ID 或其他属性。

【讨论】：

此解决方案不考虑您检查子节点并且您尚未展开父节点的场景，因为尚未通过javascript添加li和复选框。我正在寻找更好的解决方案。

【解决方案2】：

在剑道演示中，他们提供以下算法：

    // function that gathers IDs of checked nodes
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    // show checked node IDs on datasource change
    function onCheck() {
        var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = "IDs of checked nodes: " + checkedNodes.join(",");
        } else {
            message = "No nodes checked.";
        }

        $("#result").html(message);
    }

【讨论】：

【解决方案3】：

来自Gathering the checked nodes from a treeview：

var treeview = $("#treeview").data("kendoTreeView");
var checkedNodes = [];

function gatherStates(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
           gatherStates(nodes[i].children.view());
        }
    }
}

gatherStates(treeview.dataSource.view());

这似乎没有考虑通过级联检查的未扩展节点：checkChildren 属性。

【讨论】：