javascript - 使用 Json 填充剑道树

Question

我在使用 Kendo 的 Angular 环境中。我只想做以下事情:

1. 拿杰森
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。所有这些，在各个层面。有了它，剑道就会知道它应该如何处理属性(property)。添加了一个 hasChildren 属性，让它知道何时必须显示展开图标。否则即使该项目没有任何子项，它也会显示展开选项。所以用户点击它并得到一个空的结果。

这是小部件初始化选项:

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

使用 schema.data 我告诉 kendo 将处理哪个属性作为集合项。 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

这很丑，我知道。但是习惯了剑道，它就是这样。