在 HTML/CSS/JQuery 中以树模型显示数据

Question

我希望在树模型中显示大量数据。节点可能有多个子节点，也可能有多个父节点。理想情况下，树应该是动态的，因为它代表动态数据。

我查看了一些不同的 JS 库，例如 D3、Raphael 等，虽然它们符合要求，但我无法使用 JQuery 以外的任何 JS 库。我正在寻找仅使用 HTML、CSS 和 JS/JQuery.

的解决方案

唯一的受众是 IE8。

有什么建议吗？

Answer 1

Html本身就是一种树结构的表示。每个元素都是一个节点，节点内的元素是子节点，节点本身是父节点。

如果只需要显示数据，您可以这样做：

<div> <-- Parent
     <p>Data Node Parent</p> <-- Data
     <div> <-- Child
         <p>Data Node Child</p> <-- Child Data
     </div>
</div>

然后使用一些 css 将其设计得像一棵树。

使用jquery，您可以遍历dom（树）并将数据添加到这些元素中的每一个，或者根据数据动态创建元素。您将使用像 .next() .prev() .parent() .child()

这样的方法

Displaying data in a tree model in HTML/CSS/JQuery