jquery - 如何使用本地数据形成 Kendo UI TreeView

Question

我有以下 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

Answer 1

您的 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>