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

时间:2015-02-06 17:48:32

标签: javascript jquery html css tree

我希望在树模型中显示一组非常大的数据。节点可能有多个孩子,以及多个父母。理想情况下,树应该是动态的,因为它代表动态数据。

我已经看过几个不同的JS库,比如D3,Raphael等,虽然它们符合要求,但我不能使用除JQuery之外的任何JS库。我正在寻找仅使用HTML,CSS和JS / JQuery的解决方案。

唯一的受众是IE8。

有什么建议吗?

1 个答案:

答案 0 :(得分:3)

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()

的方法

http://api.jquery.com/category/traversing/

http://api.jquery.com/category/manipulation/