Javascript：需要帮助编写Treeview（来自JSON或嵌套类列表）

Question

我正在尝试创建一个Treeview来启用/禁用节点。我正在为使用js编写的应用程序编写插件，并且由于我从未使用过js或任何其他Web开发语言，所以我会在尝试过程中设法弄清楚它。我有一组嵌套的类，这些类是从JSON文件加载的。结构如下：

{
"name": "TopLevel",
"subLists": 
[
   {
      "id": "A1",
      "enabled": true
      subLists: 
      [
         {
            "id:"A1.1",
            "enabled" : false,
            "subLists": []
         },
         {
            "id" : "A1.2",
            "enabled" : true,
            "sublists" : []
         }
      ]
   }
]
}

导入的JSON文件是用户可配置的，并且可以具有任意数量的嵌套子列表。我希望用户能够在树视图中浏览它们并切换每个窗口的“启用”属性。

[当我查看treeview tutorial on w3schools时，它们显示了如何制作硬编码列表，而不是如何从数组填充或从外部JSON文件导入的列表。我还发现了jsTree resource，它似乎确实可以从JSON数据填充树，但似乎需要JSON来自服务器，并且我的JSON文件都是本地的。

理想情况下，我希望在内存中构建指向脚本的TopLevel类的树形视图，而不是直接指向JSON文件，以免每次用户启用/禁用分支时都必须重新加载JSON。有人可以指出我的学习方法吗？

Answer 1

在实践中学习js非常好，这是一个很好的练习。我可以向您展示如何在没有jsTree的情况下在纯JS中执行此操作，因为我相信最好在纯JS中学习执行此类操作。

这里首先要注意的是，您必须使用recursion才能处理任意数量的嵌套子列表。这意味着我们必须编写一个渲染树节点的函数，然后为每个子节点调用自身。

这里有一个我想出的例子。 （我对输入的JSON进行了一些修改-修正了输入错误，并在topLevel节点中将“名称”重命名为“ id”。）

const DATA = {
"id": "TopLevel",
"subLists": 
[
   {
      "id": "A1",
      "enabled": true,
      "subLists" : 
      [
         {
            "id":"A1.1",
            "enabled" : false,
            "subLists": [
              {
                "id": "A1.2",
                "enabled": false,
                "subLists": []
              }
            ]
         },
         {
            "id" : "A1.2",
            "enabled" : true,
            "subLists" : []
         }
      ]
   }
]
};

function renderNode(node, target) {
  const li = document.createElement('li');
  li.innerHTML = node.id;
  target.append(li);
  if(node.subLists && node.subLists.length) {
    const ul = document.createElement('ul');
    li.append(ul)
    node.subLists.forEach( (subList) => {
      renderNode(subList, ul);
    } );
  }
}


const root = document.getElementById('root');

renderNode(DATA, root);

<ul id="root">
</ul>

现在有关“已启用”属性。我猜您希望基于此折叠或展开分支。您可以重用已链接的w3schools中的代码来实现此目的。一个单独的脚本可以处理分支的折叠和展开。

我希望这会有所帮助;）