21

设想

假设我是一家拥有许多商店的大公司的所有者。根据我在公司中的角色（在组织中的位置），我将拥有不同的数据访问权限。会有不同的模块，对于这个特定的问题，有一个可以访问的用户可以了解日常成本和销售情况。（如果这是否合法......不要在意，这只是一个例子。）

因此，用户通过 REST API 从后端（Java 应用程序）获取所有数据，其中包含用户有权访问的所有商店的所有数据。然后，用户应该能够通过不同的过滤器组合过滤数据。与我的问题最相关的是按天计算的日期间隔。

会有一些图表显示不同级别的数据，下面会有一个表格区域，我想要多级表格，因此我的问题。

到目前为止完成

  1. 我首先创建了在手风琴组级别存储的手风琴，然后在手风琴正文中的表中创建了下一级数据。（目前只有硬编码数据。）这里的问题是相应的标题是一个字符串，经过一些讨论，我们认为这不是一个好的解决方案，因为标题将包含表格中的部分数据单独的列。因此，当折叠时很难“列”标题数据以水平匹配不同的“存储”（在手风琴标题之间）（当然，当一个或多个手风琴展开时更加混乱）。
  2. 我用 table 和 ng-repeat 替换了手风琴。已经成功地用来自具象 API 的数据和 JSON 数据填充了第一个表级别，并让 i18next 为标题工作。

JSON

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "+46 31 1234567",
            "storeAddress": "Some street 1",
            "storeCity" : "Gothenburg"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "100000",
            "salesTotal" : "150000",
            "revenueTotal" : "50000",
            "averageEmployees" : "3.5",
            "averageEmployeesHours" : "26.5",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "25000",
                    "sales" : "15000",
                    "revenue" : "4000",
                    "employees" : "3",
                    "employeesHoursSum" : "24"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "25000",
                    "sales" : "16000",
                    "revenue" : "5000",
                    "employees" : "4",
                    "employeesHoursSum" : "29"
                }
            ]
        }
    },
    {
        "store" : {
            "storeId" : "2000",
            "storeName" : "Store 2",
            "storePhone" : "+46 8 9876543",
            "storeAddress": "Big street 100",
            "storeCity" : "Stockholm"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "170000",
            "salesTotal" : "250000",
            "revenueTotal" : "80000",
            "averageEmployees" : "4.5",
            "averageEmployeesHours" : "35",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "85000",
                    "sales" : "120000",
                    "revenue" : "35000",
                    "employees" : "5",
                    "employeesHoursSum" : "38"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "85000",
                    "sales" : "130000",
                    "revenue" : "45000",
                    "employees" : "4",
                    "employeesHoursSum" : "32"
                }
            ]
        }
    }
],
"_links":{
    "self":{
        "href":"/storedata/between/2013-07-01/2013-07-02"
    }
}
}

可视化示例 - JSFiddle

检查结果框中的值，左上角。尝试单击商店 ID 为 2000 的示例行，然后单击 3000，然后再次单击 3000 以查看值如何变化。 我的 JSFiddle 的当前更新

想要的功能

单击一行时（如 JSFiddle 中所示），我想要一个指令或触发的东西，以获取单击的商店的基础数据（dayData）并显示日期间隔中的所有天。即扩展行，并在单击的行下包括一个新表，该表也应该使用 ng-repeat 来获取与现有数据类似的所有数据，但内联。

问题

所以我已经有了从点击的行中获取 $index 以及特定数据的功能。我还需要什么样的指令或任何其他解决方案才能获取“单击行时的数据”并显示在单击行下的表格中？

我不希望它一直在 DOM 中，因为每个商店和许多商店可能有很多 dayData。（稍后将使用分页，但即便如此，并非一直在 DOM 中。）这意味着我必须能够在单击一行时添加，以及从先前单击的相同或另一个 REMOVE 中单击时。

编辑

新更新的 JSFiddle。

4

3 回答 3

26

要求是不要用所有二级表填充 DOM，我想出了一个解决方案。

首先，我尝试创建一个自定义指令，并让它在正确的位置（单击的行下方）插入一行，并创建了一个带有标题的二级表，但无法使用 ng-repeat 填充行。

由于我找不到完全有效的解决方案，我回到我已经创建的解决方案，使用 ng-show 并寻求类似的解决方案......并且存在一个。Angular 没有使用 ng-show/ng-hide，而是使用了一个名为 ng-switch 的指令。

在一级

<tbody data-ng-repeat="storedata in storeDataModel.storedata" 
       data-ng-switch on="dayDataCollapse[$index]">

...然后在第二个级别，即第二个 tr

<tr data-ng-switch-when="true">

，其中您有第二级 ng-repeat。

这是一个新的JSFiddle。

检查元素，您会看到每个“折叠”的 2 级表都有一个注释占位符。

更新 (2014-09-29)

应要求还扩展/折叠级别 3，这是一个新的JSFIDDLE。

笔记！- 此解决方案始终在 DOM 中包含所有信息，即不像早期的解决方案那样，它仅添加了应请求添加信息的位置的符号。

（不过我不能相信这个，因为我的朋友 Axel 分叉了我的，然后添加了功能。）

于 2013-08-07T23:27:40.520 回答
4

我认为更好的解决方案是在 tr 元素上使用 ng-repeat-start 和 ng-repeat-end 指令，而不是在 tbody 上使用 ng-repeat（这种情况并不能证明不止一个 tbody）。

看看这里：

PLNKR

<tr ng-repeat-start="person in people">
  <td>
    <button ng-if="person.expanded" ng-click="person.expanded = false"></button>
    <button ng-if="!person.expanded" ng-click="person.expanded = true"></button>
  </td>
  <td>{{person.name}}</td>
  <td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
  <td colspan="3">{{person.details}}</td>
</tr>
于 2016-07-27T13:59:08.263 回答
0

我还没有足够的声誉发表评论，所以我正在跟进一个我遇到的附加功能问题的答案。我成功地使用了 Pixic 的结构，因为我真的很喜欢 DOM 不会被二级数据/表污染，直到它们被查看并且一切正常。

直到我被要求允许对顶级表进行动态排序。没问题 - 我可以对顶级表进行排序。问题是我一直无法想出一种方法来保持二级表（即隐藏）同步并与顶级表的那种“移动”。这只是一个显示问题。基础数据与顶层正确关联，但显示混乱，因为它显示原始“索引”行，因为第二级表不与父行重新排序。

我唯一能想到的是在扩展一行时从控制器动态插入第二级 html，但想知道其他人是否有其他想法。我尝试了 ng-repeat-start 和 ng-repeat-end （在隐藏的第三个 tr 标签上，包括所有认为应该将 tbody 中的所有项目放在一起的元素，以及隐藏的 tbody 上），但这不起作用。

编辑： 根据要求，我开始了另一个问题：Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table

于 2018-02-14T19:35:04.870 回答