具有角度重复的树表

时间:2013-11-13 02:37:01

标签: javascript html css angularjs

我们需要根据层次结构显示一些表格数据。例如,包含人口和所覆盖区域的国家列表,以及他们的一些城市。它可以进入更深层次,如neiborhood等。

Place        Population    Area
---------------------------------
Canada      33,500,000     10,000,000
  Toronto    2,600,000         612
  Montreal   1,300,000         300
USA         317,000,000     9,800,000
  ...          ...             ...
  ...          ...             ...
     ...       ...             ...           
     ...       ...             ... 

我尝试使用Angular和ngRepeat创建一个Tree表来显示这个层次结构,但它不起作用。我也尝试过使用ul和li标签的Brendan Owen http://jsfiddle.net/brendanowen/uXbn6/8/的这个很好的解决方案,但是当使用table和tr / td标签时它也不起作用。是否有可能为表格做到这一点?

2 个答案:

答案 0 :(得分:0)

虽然它不使用HTML表格,但您是否签出了angular dynamic-tree

可能值得查看spawned it的博客文章,因为那里的代码要少一些。

如果您正在寻找示例,请参阅jsFiddle。 你的html会变成这样的东西:

<ui-tree
    ng-model="assets"
    load-fn="loadChildren"
    expand-to="hierarchy"
    selected-id="111"
    attr-node-id="assetId" />

答案 1 :(得分:0)

这个项目提供了很好的Angular树,有很好的追随者(435+已加星标)。

https://github.com/nickperkinslondon/angular-bootstrap-nav-tree

可以在这里找到树的样本。 http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html

对于非Angular选项,jquery treetable确实提供了相当简单的实现。

http://ludo.cubicphuse.nl/jquery-treetable/

每个节点(父节点,子节点或后续子节点)都需要是表中的tr元素,需要指定自己的节点和父节点的id。

<table>
    <tr data-tt-id="1">
        <td>Parent</td>
    </tr>
    <tr data-tt-id="2" data-tt-parent-id="1">
        <td>Child</td>
    </tr>
</table>