Question

我有以下JSON数据：

{
  "Id": "Network_01",
  "name": "Network",
  "nodes": {
    "siteName": {
      "name": "sites",
      .....
    }
  },
  "links":{
    "linksName": {
      "name": "sites",
      .....
    }
  },
  "demands":{
    "demandsName": {
      "name": "sites",
      .....
    }
  }
}

我有这种格式，我从服务器获取并分配给一个变量，如“datas”

在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");

我在这里获得名字（网络）。但我不能得到儿童节点。

我希望网络有三个孩子

网络 - ＆gt;网站，链接，要求

asn Sites有一个孩子是siteName。

如何在kendo UI中格式化此树视图

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>

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

1 个答案: