Kendo:我该如何在树视图中创建一个递归的hieiarchy

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

本文关键字:一个 hieiarchy 递归 创建 视图 Kendo      更新时间:2023-09-26

我正在使用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->模型中设置"children"属性是不起作用的。我如何实现我想要的?

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

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