Kendo: 如何在 TreeView 中创建递归层次结构？

Question

我正在使用 Kendo UI 并试图找出如何让 TreeView 显示递归层次结构。首先，这是我的模型（我正在通过 OData 检索这些对象的列表）：

public class PageTreeItem
    {
        public Guid Id { get; set; }

        public string Name { get; set; }

        public bool IsEnabled { get; set; }

        public PageTreeItem[] SubPages { get; set; }
    }

这是我的 JavaScript:

var PagesDS = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                url: "/odata/cms/PageTree",
                dataType: "json"
            }
        },
        schema: {
            data: function (response) {
                return response.value;
            },
            total: function (response) {
                return response.value.length;
            },
            model: {
                id: "Id",
                children: "SubPages"
            }
        }
    });

    PagesDS.read();

    $("#treeview").kendoTreeView({
        template: kendo.template($("#treeview-template").html()),
        dataSource: PagesDS,
        dataTextField: ["Name"]
    });

最后，标记：

<div id="treeview"></div>

<script id="treeview-template" type="text/kendo-ui-template">
        <a href="javascript:void(0)" onclick="viewModel.edit('#=item.Id#')">#= item.Name #</a>
    </script>

我只能显示顶级项目。显然，在 schema->model 中设置 "children" 属性是行不通的。我如何实现我想要的？

Answer 1

好的，忽略..我的问题是子页面一开始并没有真正返回...哎呀！我只是假设它们会自动与其他所有内容一起序列化。我需要在我的 OData 查询中提供 $expand 选项，如下所示：

read: {
                url: "/odata/cms/PageTree?$expand=SubPages",
                dataType: "json"
            }

Kendo: 如何在 TreeView 中创建递归层次结构？

Kendo: How do I create a recursive hieiarchy in the TreeView?

javascript

kendo-ui

kendo-treeview