3

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

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 创建一个树表来显示此层次结构，但它不起作用。我还尝试了来自 Brendan Owen http://jsfiddle.net/brendanowen/uXbn6/8/的这个不错的解决方案，它使用 ul 和 li 标签，但在使用 table 和 tr/td 标签时它也不起作用。有可能为一张桌子完成这个吗？

4

2 回答 2

0

虽然它不使用 HTML 表格，但您检查过angular dynamic-tree吗？

也可能值得查看产生它的博客文章，因为那里要消化的代码要少一些。

如果您正在寻找示例，这里是jsFiddle。您的 html 将简单地变成如下内容：

<ui-tree
    ng-model="assets"
    load-fn="loadChildren"
    expand-to="hierarchy"
    selected-id="111"
    attr-node-id="assetId" />
于 2014-04-15T16:36:17.717 回答
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/

每个节点（父节点、子节点或后续子节点）都需要是table中的一个tr元素，需要指定自己的id和父节点的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>
于 2015-05-17T15:39:03.440 回答