使用 Json 填充剑道树

Question

我在使用 Kendo 的 Angular 环境中。我想做的就是：

1. 以 Json 为例
2. 用它制作剑道树

我已经用简单的数据进行了尝试，它似乎工作正常。但是这次我有一些复杂的数据，它似乎不适用于复杂的 Json。我一直在尝试让它渲染 Json，但它似乎一直在思考并且永远不会回来。我创建了一个示例 Dojo 以供参考：

http://dojo.telerik.com/EdOqE

我不确定我做错了什么，但它似乎不起作用。谁能帮我解决这个问题？

Answer 1

我认为您可以控制生成的 json，因为您必须稍微更改它以适应 TreeView 的预期格式。看看这个：

{
    "items": [{ // Projects
        "Id": 0,
        "Name": "Your Example Project",
        "CreatedOn": "",
        "hasChildren": true,
        "items": [{ // Analyses
            "Id": 0,
            "Name": "1.0 - Your Example Run",
            "CreatedOn": "",
            "hasChildren": true,
            "items": [{ // Samples
                "Id": 0,
                "Name": "Sample 1",
                "hasChildren": false,
                "Description": "ample frample sample"
            }, {
                "Id": 0,
                "Name": "Sample 2",
                "hasChildren": false,
                "Description": null
            }]
        }]
    }]
};

上面的 json 是我在小部件中所做的工作。首先，集合属性重命名为items。所有这些，在所有级别。有了这个，剑道就会知道它应该如何处理财产。添加了一个hasChildren 属性，以使其知道何时必须显示展开图标。否则，即使该项目没有任何子项，它也会显示展开选项。所以用户点击它并得到一个空的结果。

这是小部件初始化选项：

{
    dataSource: new kendo.data.HierarchicalDataSource({ 
        data: things,
        schema: {
            data: "items"
        }
    }),
    dataTextField: "Name"
};   

通过schema.data，我告诉剑道将哪个属性作为收藏项目处理。 dataSource 需要一个数组，但如果你给他一个对象，你必须设置这个属性。如果它是一个数组，那么 kendo 将默认查找每个子项的 item 属性。 dataTextField 是它将用作标签的属性的名称。

Demo

Here is another demo 将数据作为数组。无需设置schema.data。

更新：

我怕你会这么说。是的，如果您无法在服务器端更改数据，有一种方法可以处理数据。您必须在schema.parse() 方法处截取数据并将生成的数据对象属性更改为items，这样小部件就会明白：

schema: {
    data: "items",
    parse: function(data) {
        if (data.hasOwnProperty("Projects")) {
            return { items: data.Projects };
        }
        else if (data.hasOwnProperty("Analyses")) { 
            return { items: data.Analyses };
        }
        else if (data.hasOwnProperty("Samples")) { 
            return { items: data.Samples };
        }
    }
}

Demo

每个节点打开时都会调用parse，并将items集合作为data参数。您必须返回一个属性名称为items 的新对象，而不是Projects、Analysis 或Samples。

---

我忘了你不能触摸数据，所以也不能添加hasChildren 属性。然后你必须在parse 中添加一个小逻辑来设置每个级别的这些属性，否则 expand 图标不会出现：

schema: {
    data: "items",
    parse: function(data) {
        if (data.hasOwnProperty("Projects")) {

            data.Projects.forEach(p => {
                p.hasChildren = false;

                if (p.hasOwnProperty("Analyses")) {
                    p.hasChildren = true;
                }
            });

            return { items: data.Projects };
        }
        else if (data.hasOwnProperty("Analyses")) { 

            data.Analyses.forEach(a => {
                a.hasChildren = false;

                if (a.hasOwnProperty("Samples")) {
                    a.hasChildren = true;
                }
            });

            return { items: data.Analyses };
        }
        else if (data.hasOwnProperty("Samples")) { 
            return { items: data.Samples };
        }
    }
}

Demo

这很丑，我知道。不过习惯了剑道，就顺其自然了。