4

查看树折叠和展开模式： 树视图折叠和展开模式

使用的标记是 HTML 表格。

使用 ng-repeat 变得越来越棘手。

每一行的数据如下

{  
    "id": 1,
    "name": "Groceries",
    "price": "0",
    "total": "20",
    "parentFlag": "true",
    "parentId": "",
    childItems: [{},{}]
}

使用ulandli标签，我们可以使用 ng-include 来实现。

但是现有的应用程序标记使用表格。我开始考虑将标记更改为 use ul，li并且div是“唯一”的方法。我在这里错过了什么吗？任何指针/方法？

4

2 回答 2

3

您可以尝试以下方法：

<table class="table">
    <thead>
        <tr>
            <th>Package</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start='Package in Packages'>
            <!-- take a look to ng-repeat-start -->
            <td>
                <button ng-click="viewChilds= !viewChilds">+</button>{{Package.name}}</td>
            <td>{{Package.total}}</td>
        </tr>
        <tr>
            <!-- this is repeated for package-->
            <td colspan='2' ng-class="viewChilds? '' : 'hide'">
                <!-- viewChilds controls the collapse () -->
                <table class="subTable">
                    <!-- make some ident in subTable style -->
                    <tbody>
                        <tr ng-repeat='chilItem in Package.childItems'>
                            <!-- a nested repeat for each children -->
                            <td>{{chilItem.name}}</td>
                            <td>{{chilItem.price}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr ng-repeat-end></tr>
        <!-- this is repeated also (if you need) -->

    </tbody>
</table>

我怀疑你能弄清楚。不要忘记展示最终作品。

这是一个plunker：http ://plnkr.co/edit/ENXYcu?p=preview

于 2014-02-13T15:57:44.117 回答
1

几个月前我遇到了同样的问题，我解决了。这是一个使用 Angular.js 和引导程序的树视图表。查看其代码和流程以了解其工作原理。它有带有解释和工作示例的文档。

GitHub链接

JSFiddle 上的工作示例

这个怎么运作？

我使用简单的概念来实现这个表，只需将您复杂的树数据结构更改为简单的一维数组并使用 Angular 的 ng-repeat 重复这个数组。该数组中的每个节点都包含父 ID 和级别信息，用于在适当的位置显示每个节点并正确缩进。例如。

var treeDS = [ { name : aptitude, id : 123, childNodes : [ { name :     time and work, id : 125 }, { name : problem on trains, id : 127 } ] } ]

将此树数据结构转换为以下一维数组

var oneDArray = [ { name : aptitude, id : 123, level : 0, indentClass : "indent-0", parentId : -1 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1" parentId : 123 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1", parentId : 123 } ]

这个 oneDArray 包含在具有正确父子关系和缩进的表中显示树数据结构的所有信息。

level ：它将显示节点深度 indentClass ：它将根据节点深度缩进行 parentId ：它将有助于显示哪个节点必须显示在哪个节点下。

于 2016-11-26T11:34:04.730 回答