【发布时间】：2021-08-09 20:16:18
【问题描述】：
我正在为看似简单的任务寻找解决方案，但我根本无法解决：
我有一个 Years -> Months -> Events 的嵌套数据结构，我试图将其填充到具有可扩展行的表中，也就是父行是子行的聚合。
问题在于我需要的深度量是三：我根本找不到任何方法来遍历第三级的表，因为我不能使用 div，也不能使用嵌套的 tr或 tbody 为好。解决方案绑定到 bootstrap 3 和 angularjs 1.5。
希望有人有一个好主意。
表格
<table class="table">
<thead>
<tr>
<th></th>
<th>{{I18n.i18n('label.period')}}</th>
<th>{{I18n.i18n('label.failure-duration')}}</th>
<th>{{I18n.i18n('label.availability')}}</th>
</tr>
</thead>
<tbody ng-repeat="year in data">
<tr data-toggle="collapse" data-target="{{'.a'+year.period}}">
<td><div>></div></td>
<td>{{year.period}}</td>
<td>{{year.duration}}</td>
<td>{{year.availability}}</td>
</tr>
<tr ng-repeat="month in year.months" class="{{'collapse a' + year.period}}" data-toggle="collapse" data-target="{{'.'+month.period+year.period}}">
<td><div>></div></td>
<td>{{month.period}}</td>
<td>{{month.duration}}</td>
<td>{{month.availability}}</td>
</tr>
<!-- Iterating here obiously doesn't work because of variable scope and position in the table-->
<tr ng-repeat="event in month" class="{{'collapse a' + +month.period+year.period}}">
<td></td>
<td>{{event.period}}</td>
<td>{{event.duration}}</td>
<td></td>
</tr>
</tbody>
示例数据：
{
period : '2021',
duration : '647 Minutes',
availability : '99,78978%',
months : [
{
period : 'January',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'February',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'March',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'April',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'May',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'June',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'July',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'August',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'September',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'October',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'November',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},{
period : 'December',
duration : '132 Minutes',
availability : '99,99458%',
events : [
{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},{
period : '12.01. 12:34 - 12.01. 12:46',
duration : '24 Minutes',
},
]
},
]
}
【问题讨论】：
-
我有一个解决方案，但是当您已经循环浏览所有月份时，我不确定您的意图是什么 - 您想在这些月份显示哪些事件？
-
@Kinglish 年份显示聚合数据并扩展月份行，月份显示聚合数据并扩展单个事件行。喜欢：1级：年[x]； 2级：年[x].月[y]； 3 级：年[x].months[y].events[z]
标签： html angularjs twitter-bootstrap-3