jquery - 如何在 Kendo UI Treeview 中跟踪选中的节点 ID

Question

我在asp.net mvc 中使用带有复选框的Kendo UI 的 Treeview 控件。父节点和子节点都有 id 属性。当用户检查任何子节点时，我想跟踪哪些子节点已被检查。以下是我的 cshtml 代码以及用于跟踪 id 和用于填充 Treeview 的 json 的 javascript 代码。

                <div style="padding-top: 2em;">
                <h4>Status</h4>
                <p id="result">No nodes checked.</p>
            </div>

        <script>                   
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true,
                },
                dataSource: {
                    //type: "odata",
                    transport: {
                        read: {
                            url: '@Url.Content("~/Document/GetDocuments")',
                            type: "post",
                            dataType: "json"
                        }
                    },                        
                    schema: {
                        model: {
                            id: "id", text: "Name",
                            children:  "Files"
                        }
                    }
                },
                dataTextField: [ "Name", "FileName"],
                check: onCheck                                 
            });
            // 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].name);
                    }
                    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);
            }
        </script>

json object
    [{"id":1,"Name":"Checking",
    "Files":[{"Filename":"doc10","id":"1afd5a4f-086f-44d2-9287-8098384e379e"},
    {"Filename":"doc11","id":"89ea3366-14b8-4e91-8273-6e2a51fbe516"}]},
    {"id":2,"Name":"Saving",
    "Files":[{"Filename":"doc20","id":"c7a88f5d-067e-4f20-93b6-da6eff69d532"},
    {"Filename":"doc21","id":"8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0"}]}]

当我检查某些子节点时，它只显示“已检查节点的 ID:,,,”。所以看起来 ID 值是空白的。

谢谢

Answer 1

请尝试使用以下代码片段。

要获取所有选定的 ID:-

<div id="treeview"></div>
<script>
    var data = [{ "id": 1, "Name": "Checking", "Files": [{ "Filename": "doc10", "id": "1afd5a4f-086f-44d2-9287-8098384e379e" }, { "Filename": "doc11", "id": "89ea3366-14b8-4e91-8273-6e2a51fbe516" }] }, { "id": 2, "Name": "Saving", "Files": [{ "Filename": "doc20", "id": "c7a88f5d-067e-4f20-93b6-da6eff69d532" }, { "Filename": "doc21", "id": "8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0" }] }];

    var inline = new kendo.data.HierarchicalDataSource({
        data: data,
        schema: {
            model: {
                id: "id", text: "Name",
                children: "Files"
            }
        }
    });

    $(document).ready(function () {
        $("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true,
            },
            dataSource: inline,
            dataTextField: ["Name", "Filename"],
            check: onCheck
        });
    });

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

    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.";
        }
        console.log(message);
    } 
</script>

要获取所有选定的名称和文件名详细信息:-

<div id="treeview"></div>
<script>
    var data = [{ "id": 1, "Name": "Checking", "Files": [{ "Filename": "doc10", "id": "1afd5a4f-086f-44d2-9287-8098384e379e" }, { "Filename": "doc11", "id": "89ea3366-14b8-4e91-8273-6e2a51fbe516" }] }, { "id": 2, "Name": "Saving", "Files": [{ "Filename": "doc20", "id": "c7a88f5d-067e-4f20-93b6-da6eff69d532" }, { "Filename": "doc21", "id": "8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0" }] }];

    var inline = new kendo.data.HierarchicalDataSource({
        data: data,
        schema: {
            model: {
                id: "id", text: "Name",
                children: "Files"
            }
        }
    });

    $(document).ready(function () {
        $("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true,
            },
            dataSource: inline,
            dataTextField: ["Name", "Filename"],
            check: onCheck
        });
    });

    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                if (nodes[i].Name)
                    checkedNodes.push(nodes[i].Name);
                else
                    checkedNodes.push(nodes[i].Filename);
            }
            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    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.";
        }
        console.log(message);
    }


</script>

如果有任何问题，请告诉我。