我有以下 JSON 数据:
{
"Id": "Network_01",
"name": "Network",
"nodes": {
"siteName": {
"name": "sites",
.....
}
},
"links":{
"linksName": {
"name": "sites",
.....
}
},
"demands":{
"demandsName": {
"name": "sites",
.....
}
}
}
我有这种格式,我从服务器获取并分配给一个变量,如“数据”
在 Kendo UI Treeview 中,
var treeview = $("#tree").data("kendoTreeView");
var viewModel = new kendo.data.HierarchicalDataSource({
data: datas,
schema: {
model: {
children: ["nodes", "siteName"]
}
}
});
var treeview = $("#tree").kendoTreeView({
dataSource: kendo.observableHierarchy(viewModel),
dataTextField: ["name"]
}).data("kendoTreeView");
在这里,我得到了名字(网络)。但我无法获得子节点。
我要网络有三个 child
网络 -> 站点、链接、需求
asn Sites 有一个子节点是 siteName。
如何在 Kendo UI 中格式化此 Treeview
最佳答案
您的 JSON 数据格式不正确。它有几个问题
我已经包含了一个显示工作示例的代码片段。
如果你去 http://demos.telerik.com/kendo-ui/treeview/local-data-binding ,你会看到如何做一个多级树。
var viewModel = new kendo.data.HierarchicalDataSource({
data: [{
"Id": "Network_01",
"name": "Network",
"nodes": [{
"name": "siteName"
}, {
"name": "linksName"
}, {
"name": "demandsName"
}]
}],
schema: {
model: {
children: "nodes"
}
}
});
$("#tree").kendoTreeView({
dataSource: viewModel,
dataTextField: "name"
});
#example {
text-align: center;
}
.demo-section {
display: inline-block;
vertical-align: top;
width: 220px;
text-align: left;
margin: 0 2em;
}
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div class="demo-section k-header">
<h4>Inline data (default settings)</h4>
<div id="tree"></div>
</div>
关于jquery - 如何使用本地数据形成 Kendo UI TreeView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27704842/