0

使用Kendo-ui 演示页面上的示例,我现在有以下代码

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        data: [
            { 
                id: 1, text: "Useraccess", expanded: true, items: [
                    { id: 2, text: "Roles", items: [
                        { id: 3, text: "Access", checked: true },
                        { id: 4, text: "Edit", checked: true }
                    ]},
                    { id: 5, text: "Users", items: [
                        { id: 6, text: "Access" },
                        { id: 7, text: "Edit" }
                    ]}
                ]
            },
            {   
                id: 8, text: "Customer", expanded: true, items: [
                    { id: 9, text: "Customer", items: [
                        { id: 10, text: "Access" },
                        { id: 11, text: "Edit", checked: true }
                    ]},
                    { id: 12, text: "Account", items: [
                        { id: 13, text: "Access" },
                        { id: 14, text: "Edit" }
                    ]}
                ]
            }
        ]
    });

    $("#treeView").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: dataSource
    });

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

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

    function refreshResult() {
        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);
    }

    // show checked node IDs on datasource change
    $("#treeView").data("kendoTreeView").dataSource.bind("change", function() {
        refreshResult();
    });

    refreshResult();
</script>

加载页面时,结果文本为“未检查节点。”,即使确实检查了 3 个节点。在调试时,我注意到即使“角色”节点具有属性 hasChildren = true,子数组也是空的。在 Demo 页面的示例中,数据源在 TreeView 中定义:

 $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },

        dataSource: [
            { 
                id: 1, text: ....

当我在 Treeview 中定义数据源时,结果文本会显示正确的节点。有没有办法模拟这种行为?我计划将来使用远程数据。

4

1 回答 1

1

我在 TreeView API 中找到了答案。答案在这里:

loadOnDemand TreeView 配置

所以我需要做的是在 TreeView 中设置 loadOnDemand: false :

$("#treeView").kendoTreeView({
loadOnDemand: false, ...
于 2013-08-27T15:54:16.073 回答