Question

我有以下数据：

[
{"id":1,"parendId":0,"name":"Foods","hasItems":"true},  
{"id":2,"parentId":1,"name":"Fruits","hasItems":"true"},  
{"id":3,"parentId":1,"name":"Vegetables","hasItems":"true"},  
{"id":4,"parentId":2,"name":"apple","hasItems":"false"},  
{"id":5,"parentId":2,"name":"orange","hasItems":"true"},  
{"id":6,"parentId":3,"name":"tomato","hasItems":"true"},  
{"id":7,"parentId":3,"name":"carrot","hasItems":"true"},  
{"id":8,"parentId":3,"name":"cabbage","hasItems":"true"},  
{"id":9,"parentId":3,"name":"potato","hasItems":"true"},  
{"id":10,"parentId":3,"name":"lettuce","hasItems":"false"}
]

有人可以告诉我如何为上述数据配置kendo ui treeview吗？此外，是否可以将此树视图放在kendo ui下拉列表中？

更新

这就是我到目前为止......

categories = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: UrlThatFetchesData
        }
    },
    schema: {
        model: {
            id: 'id',
            parentId: 'parentId',
            name: 'name'
        }
    }
});

$('#tvCategories').kendoTreeView({
    dataSource: categories,
    dataTextField: 'name',
    dataValueField: 'id'
});

所有项目都显示为主要类别，一个在另一个下方。如何让treeview使用parentId？

Answer 1

您是否尝试将其他数据嵌入到树视图项目中？如果是这样，您的KendoTreeview应如下所示：

@(  Html.Kendo().TreeView()
                            .Name("Treeview")
                            .DataTextField("name") //display text
                            .DataSource(dataSource => dataSource
                                .Read(read => read
                                .Action("ActionThatFetchesData", "ControllerName")
                                )
                            )
                            .TemplateId("treeview-template") //name of the template
                            )

然后使用将显示json的Kendo模板

<script id="treeview-template" type="text/kendo-ui-template">
     <span>#:  item.id#</span>
     <span>#:  item.parentId#</span>
     <span>#:  item.name#</span>
     <span>#:  item.hasItems#</span>
</script>

为我的json数据配置kendo ui treeview

1 个答案: