javascript - 具有复杂数据的 Kendo UI TreeListViews

Question

背景资料

简而言之，我希望实现“大部分”这里显示的内容......

http://demos.telerik.com/kendo-ui/treelist/remote-data-binding

...除了它有点让人费解，而且在我的情况下，数据不仅来自基本端点 url。

我正在尝试构建一个通用查询构建页面，该页面允许用户选择一个上下文，然后是一个“类型”(或端点)，然后从那里在该端点上构建一个自定义查询。

我已经设法达到了为简单查询执行此操作的地步，但现在我正在尝试处理更复杂的场景，即从相关端点检索子项或更深的数据项。

考虑到这一点...

理念

我有许多端点，并非所有端点都是 OData，但主要遵循 OData v4 规则，因此我正在尝试构建一个“TreeGrid”，该端点已选择一个端点，该端点将公开可用于查询的扩展选项。
我所有的端点都有一个名为 GetMetadata() 的自定义函数，它描述了该端点的类型信息，其中一个端点基本上是 REST CRUD<T>实现，它可能有也可能没有一些进一步的自定义功能来处理其他一些业务场景。

所以，给定一个 HTTP get 请求，比如......
~/SomeContext/SomeType/GetMetadata()
...我会取回一个看起来很像 MVC/WebAPI 元数据容器的对象。
该对象有一个称为“属性”的属性，其中一些是标量的，其中一些是复杂的(如数据中所定义)。

我正在尝试构建一个 TreeListDataSource 或 HierarchicalDataSource 对象，我可以使用它来绑定(bind)到仅复杂属性的 Kendo treeList 控件，它动态地为元构建正确的获取 url 并列出基于该类型的复杂属性来自父类型的属性信息，根端点在页面上的其他控件中定义。

问题

我似乎无法弄清楚如何为 TreeGrid 配置 Kendo 数据源对象以获得所需的输出，我认为可能是两个原因之一......

此处显示的演示中的 TreeListDataSource 对象:http://demos.telerik.com/kendo-ui/treelist/local-data-binding似乎暗示基于层次结构的控件需要一个平面数据源。

我无法弄清楚如何配置数据源，以便我可以传入父元信息(来自源的数据项)以便为 get 请求构建正确的端点 url。

function getDatasource(rootEndpoint) {
    return {
        pageSize: 100,
        filter: { logic: 'and', filters: [{ /* TODO:possibly filter properties in here? */ }] },
        type: 'json',
        transport: {
            read: {
                url: function (data) {
                    //TODO: figure out how to set this based on parent
                    var result = my.api.rootUrl + endpoint + "/GetMetadata()";
                    return result;
                },
                dataType: 'json',
                beforeSend: my.api.beforeSend
            }
        },

        schema: {
            model: {
                id: 'Name',
                fields: {
                    Type: { field: 'Type', type: 'string' },
                    Template: { field: 'Template', type: 'string' },
                    DisplayName: { field: 'DisplayName', type: 'string' },
                    ShortDisplayName: { field: 'ShortDisplayName', type: 'string' },
                    Description: { field: 'Description', type: 'string' },
                    ServerType: { field: 'ServerType', type: 'string' }
                }
            }
            parse: function (data) {
                // the object "data" passed in here will be a meta container, a single object that contains a property array.
                $.each(data.Properties, function (idx, item) {
                    item.ParentType = data;
                    item.Parent = ??? where do I get this ???
                });

                return data.Properties;
            }
        }
    };
}

我的一些问题可能归结为元数据本身没有主键这一事实，我想知道是否使用 parse 附加生成的 guid 作为键可能是一个想法，但后来我认为 Kendo 使用 id 来解决问题询问 child 时在 API 上。

Answer 1

所以事实证明， Kendo 除了从单个端点提供数据之外，还没有准备好做任何事情，而我在这里做的事情比这要复杂一些，而且更多是因为数据正在“不是实体类型数据”我没有键和外键之类的常见事物。

考虑到这一点，我选择将问题完全从 Kendo 中解脱出来，并简单地通过一些“行为类似于普通 Kendo 扩展但不是真正的黑客”来处理这种情况......

在树形网格中，当 Kendo 显示可扩展行时，它会在第一个单元格中呈现类似这样的内容......

如果没有扩展数据或绑定(bind)到服务器的数据源，则不会呈现此单元格。

所以我伪造了它，并在我的版本.not-loaded 中添加了一个额外的类。

这意味着我可以在单击“假扩展”时连接一个自定义的 js block ，以构建正确的 url，做我的自定义内容，伪造/创建一些 id，然后将数据交给数据源。

expandList.on('click', '.k-i-expand.not-loaded', function (e) {
    var source = expandList.data("kendoTreeList");
    var cell = $(e.currentTarget).closest('td');
    var selectedItem = source.dataItem($(e.currentTarget).closest('tr'));
    my.type.get(selectedItem.ServerType, ctxList.val(), function (meta) {
        var newData = JSLINQ(meta.Properties)
            .Select(function (i) {
                i.id = selectedItem.id + "/" + i.Name;
                i.parentId = selectedItem.id;
                i.Selected = my.type.ofProperty.isScalar(i);
                i.TemplateSource = buildDefaultTemplateSourceFor(i);
                return i;
            })
            .ToArray();

        for (var i in newData) {
            source.dataSource.add(newData[i]);
        }

        $(e.currentTarget).remove();
        source.expand(selectedItem);
        buildFilterGrid();
        generate();
    });
});

这样， Kendo 就得到了它对 Treeview 列表“具有父子关系的平面集”的期望，而我完成了所有繁重的工作。

我使用了一些 JSLINQ 魔法来使繁重的工作更像“c#”(毕竟我更喜欢 c#)，但简而言之，它所做的只是抓取扩展的父项并使用其中的 id 作为parent 然后为当前项目生成一个新 id 作为 parent.id + "/"+ current.name，这样一切都是唯一的，因为对象上的 2 个属性不能具有相同的名称，并且两个对象由相同的父 父属性名称的前缀使引用唯一。

这不是理想的解决方案，但这就是telerik的情况，这里有hack，那里有hack，通常可以让它工作!

有些东西告诉我有一种更聪明的方法可以做到这一点!