Question

我在使用剑道的Angular环境中。我想要做的就是：

Take Json
使用它制作剑道树

我用简单的数据试过它，似乎工作正常。但这次我有一些复杂的数据，似乎它不适用于复杂的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我告诉哪个属性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

我知道这很难看。但是习惯了剑道，就是它随之而来。

使用Json

1 个答案: