Question

使用Kendo-ui Demo page处的示例我现在有以下代码

<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个节点。在调试时，我注意到即使“Roles”节点具有属性hasChildren = true，children数组也是空的。在Demo页面的示例中，数据源在TreeView中定义：

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

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

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

Answer 1

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

loadOnDemand TreeView configuration

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

$("#treeView").kendoTreeView({
loadOnDemand: false, ...

带有复选框的Kendo UI Treeview，未完全加载分层数据源

1 个答案: