无法在Kendo TreeView中展示多级嵌套JSON数据求解决方案

嘿，我之前也踩过这个坑！你的JSON数据里每个层级的子节点用了Level2、Level3这种动态变化的键名，但Kendo TreeView默认需要子节点有统一的标识字段（比如items或者children），这就是你折腾半天schema都没搞定的核心原因。下面给你个直接能用的解决方案：

核心思路：把动态子节点转成TreeView认的统一结构 #

我们写个递归函数，把每个节点里的LevelX字段都转成TreeView默认识别的items字段，同时保留id、name这些关键属性，再给TreeView配置好对应的schema就行。

完整可运行代码示例

<div id="treeview"></div>

<script>
// 你的原始JSON数据（补全了示例里的缺失部分）
const yourRawData = {
  "Level1": [{
    "id": "idlevel1",
    "name": "Level1",
    "Level2": [{
      "id": "idlevel2",
      "name": "Level2",
      "Level3": [{
        "id": "id1level3",
        "name": "Level3_1",
        "Level4": [{
          "id": "id1level4",
          "name": "1_level4"
        }, {
          "id": "id2level4",
          "name": "2_level4"
        }]
      }, {
        "id": "id2level3",
        "name": "Level3_2",
        "Level4": [{
          "id": "id3level4",
          "name": "3_level4"
        }]
      }]
    }]
  }]
};

// 递归转换节点结构的工具函数
function convertTreeNodes(node) {
  // 先把当前节点的基础属性拎出来，name转成TreeView默认的text字段（也可以用自定义模板改）
  const processedNode = {
    id: node.id,
    text: node.name
  };

  // 找当前节点里的子节点字段（匹配Level开头的键）
  const childField = Object.keys(node).find(key => /^Level\d+$/.test(key));
  if (childField && node[childField].length > 0) {
    // 递归处理所有子节点，存到items字段里
    processedNode.items = node[childField].map(child => convertTreeNodes(child));
  }

  return processedNode;
}

// 初始化Kendo TreeView
$("#treeview").kendoTreeView({
  dataSource: {
    // 把Level1里的第一个节点（你的根节点）转成TreeView能认的结构
    data: convertTreeNodes(yourRawData.Level1[0]),
    schema: {
      model: {
        id: "id",
        // 判断节点是否有子节点，方便TreeView显示展开/折叠图标
        hasChildren: node => !!node.items && node.items.length > 0
      }
    }
  }
  // 要是你想自定义节点显示内容，比如加个图标啥的，就用template：
  // template: "<span class='k-icon k-i-folder'></span> #= item.text #"
});
</script>

额外说明 #

• 如果你的Level1里有多个根节点（不是只有一个），那数据源的data部分改成这样就行：

  data: yourRawData.Level1.map(node => convertTreeNodes(node))
  

• 要是你不想把name转成text，也可以在TreeView里配置template来指定显示name字段，比如template: "#= item.name #"。

亲测这个方法能完美渲染你的多级嵌套结构，你直接复制代码试试就行！

内容的提问来源于stack exchange，提问作者anand