0

我有一个记录列表，并将其转换为json：

[ { "id": 1, "name": "A", "parentID": 0, "hasItems": "true" },
  { "id": 2, "name": "B", "parentID": 1, "hasItems": "false" },
  { "id": 3, "name": "C",  "parentID": 1, "hasItems": "false" },
  { "id": 4, "name": "D",  "parentID": 0, "hasItems": "false" }
]

现在我想从上面的 json数据创建一个 KendoTreeView ：

<div id="treeview55"></div>

<script>
    dtSrc = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "http://localhost:1132/Discontent/GetTreeNodes",
            dataType: "json"
        }
    },
        ,
    schema:{
        model: {
            id: 'id',
            parentId: 'parentID',
            name: 'name'
        }
    }
});

$("#treeview55").kendoTreeView({
    dataSource: dtSrc,
    dataTextField: "name",
    dataValueField: 'id',
});

结果：

    A
    B
    C
    D

我的预期结果：

   > A
         B
         C
     D

我的问题：

有没有办法通过上述 json 数据创建具有上述预期结果（级联子级和父级）的 KendoTreeView？

4

2 回答 2

1

请参阅下面的部分代码将帮助您解决问题

     <div id="tree"></div>
   <script>
        var flatData = [ { "id": 1, "text": "A", "parent": 0, "hasItems":                "true" },
 { "id": 2, "text": "B", "parent": 1, "hasItems": "false" },
    { "id": 3, "text": "C",  "parent": 1, "hasItems": "false" },
   { "id": 4, "text": "D",  "parent": 0, "hasItems": "false" }
  ];

  function processTable(data, idField, foreignKey, rootLevel) {
  var hash = {};

 for (var i = 0; i < data.length; i++) {
var item = data[i];
var id = item[idField];
var parentId = item[foreignKey];

hash[id] = hash[id] || [];
hash[parentId] = hash[parentId] || [];

     item.items = hash[id];
    hash[parentId].push(item);
    }

   return hash[rootLevel];
 }

 // the tree for visualizing data
  $("#tree").kendoTreeView({
 dataSource: processTable(flatData, "id", "parent", 0),
     loadOnDemand: false
   });
  </script>

我只是根据您的样本数据准备了一个样本，希望对您有所帮助。

从此 jsbin 中找到答案

于 2016-06-23T06:51:32.950 回答
0

此刻，没有。Kendo UI TreeView 使用分层数据，上面是一个扁平的层次结构。您需要对其数据进行处理，使其变得分层，如Jon Skeet 在这个出色的答案中所示。

于 2013-06-12T14:12:56.403 回答