Javascript 创建一个带有 colspan 和动态列数的表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26809865/
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
Create a table with colspan and a dynamic amount of columns
提问by joerno
I'm new to angular and would like to create a table with an unknown amount of columns. Additionally the table contains a second row of header columns, also with a different and unknown amount of columns. I have to use colspan in the second line, but don't know how. What would be a good way, maybe to create a directive? Or is there a simpler solution?
我是 angular 的新手，想创建一个列数未知的表。此外，该表包含第二行标题列，也包含不同且未知数量的列。我必须在第二行使用 colspan，但不知道如何使用。什么是一个好方法，也许是创建一个指令？或者有更简单的解决方案吗？
For a better understanding I created: http://jsfiddle.net/uyLrjgyz/2/.
为了更好地理解，我创建了：http: //jsfiddle.net/uyLrjgyz/2/。
I get all the data in JSON format like:
我以 JSON 格式获取所有数据，例如：
{
"header": {
"columns": [
{
"name": "0ColHeader",
"subcolumns": [
{
"name": ""
}
]
},
{
"name": "1ColHeader",
"subcolumns": [
{
"name": "1Col1SubColHeader"
},
{
"name": "1Col2SubColHeader"
},
{
"name": "1Col3SubColHeader"
}
]
},
{
"name": "2ColHeader",
"subcolumns": [
{
"name": "2Col1SubColHeader"
}
]
},
{
"name": "3ColHeader",
"subcolumns": [
{
"name": "3Col1SubColHeader"
},
{
"name": "3Col2SubColHeader"
}
]
}
]
},
"rows": {
"data": [
[
{
"value": "text"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "0"
}
],
[
{
"value": "more text"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
},
{
"value": "1"
},
{
"value": "0"
},
{
"value": "1"
}
]
]
}
}
I can modify the json, as long as I don't have to convert it to much at the backend. This angularjs and template tableis related to my problem, but it's a little bit skimped.
我可以修改json，只要我不必在后端将其转换成太多。这个angularjs和模板表与我的问题有关，但它有点吝啬。
回答by Koti Panga
You're there almost. Here is the Working fiddle
你快到了。这是工作小提琴
For colspanits simple like this colspan="{{col.subcolumns.length}}"
对于 colspan就像这样简单 colspan="{{col.subcolumns.length}}"
But for next sub-headers we should write handler like below in controller after $scope.table
但是对于下一个子标题，我们应该在控制器中编写如下处理程序 $scope.table
$scope.subHeaders = function () {
var subs = [];
$scope.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
Markup for second row:
第二行的标记：
<tr>
<th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>
Full Table:
完整表格：
<div ng-app="tableApp" ng-controller="tableController">
<table>
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in table.rows.data">
<td ng-repeat="cell in row">{{cell.value}}</td>
</tr>
</table>
</div>
