javascript 使用 rowspan 对分层数据进行分组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21104750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use of rowspan to group hierarchical data
提问by bsr
Is it possible to group data (using rowspan as explained here) in a table rendered with angularjs. Data is hierarchical, with statehaving many countiesand each counties has multiple zipcodes. I want a table with only column for state, county, zip etc (so give a rowspan for length of the collection). I am not sure ng-repeat-startand ng-repeat-endcan be used to achieve this. Please see the starter template here
是否可以在使用 angularjs 呈现的表中对数据进行分组（使用此处解释的 rowspan ）。数据是分层的，state有很多counties，每个县有多个zipcodes。我想要一个只有州、县、邮编等列的表格（所以为集合的长度提供一个行跨度）。我不确定ng-repeat-start并且ng-repeat-end可以用来实现这一点。请在此处查看入门模板
<table>
<thead>
<tr>
<th>State</th>
<th>County</th>
<th>Zip</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='st in states'>
<td>{{st.name}}</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
data
数据
var oh_counties = [
{name: "Franklin", zips: [111,222,333,444,555]},
{name: "Adams", zips: [111,222,333,444]},
{name: "Allen", zips: [111,222,333]}
],
wi_counties = [
{name: "Dane", zips: [111]},
{name: "Adams", zips: [111,222,333,444]}
]
$scope.states = [
{name: "OH", counties: oh_counties},
{name: "WI", counties: wi_counties},
];
Edit:
编辑：
A handcrafted version of the desired output is here http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview
所需输出的手工版本在这里http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview
回答by Robert Brooker
This is a variant of Holly Cummins' answer. The repeat is moved into the trwith ng-repeat-startand ng-repeat-endto prevent the tbodyfrom being repeated. Also uses a slightly different method to hide the first row.
这是霍莉·康明斯 (Holly Cummins) 回答的变体。将重复移入trwithng-repeat-start和ng-repeat-end以防止tbody重复。还使用了稍微不同的方法来隐藏第一行。
<tbody>
<tr ng-repeat-start='st in states'>
<th rowspan="{{st.counties.length}}">{{st.name}}</th>
<td>{{st.counties[0].name}}</td>
</tr>
<tr ng-repeat-end ng-repeat='county in st.counties' ng-hide="$first">
<td>{{county.name}}</td>
</tr>
</tbody>
回答by Holly Cummins
This variant of KayakDave's answer improves the structuring by pulling the first nested row out to share the <tr>of the header:
KayakDave 答案的这个变体通过拉出第一个嵌套行以共享<tr>标题的来改进结构：
<tbody ng-repeat='st in states'>
<tr>
<th rowspan="{{st.counties.length}}">{{st.name}}</th>
<td>{{county[0].name}}</td>
</tr>
<tr ng-repeat='county in st. counties' ng-show="$index > 0">
<td>{{county.name}}</td>
</tr>
</tbody>
回答by KayakDave
Sure. Is something like this what you had in mind:
当然。你的想法是这样的：
<tbody ng-repeat='st in states'>
<td rowspan="{{st.counties.length+1}}">{{st.name}}</td>
<tr ng-repeat='county in st.counties'>
<td>{{county.name}}</td>
</tr>
</tbody>
I kept this example simple, nested 2 deep. But in the fiddle, below, I've got it nested 3 deep (so it includes zip).
我保持这个例子简单，嵌套 2 层深。但是在下面的小提琴中，我将它嵌套了 3 层（因此它包含 zip）。
回答by Aravind Kumar
This may be usefull
这可能有用
<table>
<tbody ng-repeat='st in states'>
<tr>
<th >{{st.name}}</th>
<td>
<table>
<tr ng-repeat='county in st.counties'>
<td>{{county.name}}</td>
<td>
<table>
<tr ng-repeat='zip in county.zips'>
<td>{{zip}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
