[英]Create a table with colspan and a dynamic amount of columns
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. 我必须在第二行使用colspan,但不知道如何。 What would be a good way, maybe to create a directive? 什么是好方法,也许是创建一个指令? Or is there a simpler solution? 还是有一个更简单的解决方案?
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. 我可以修改json,只要我不必在后端将其转换为很多。 This angularjs and template table is related to my problem, but it's a little bit skimped. 这个angularjs和模板表与我的问题有关,但它有点吝啬。
You're there almost. 你快到了。 Here is the Working fiddle 这是工作小提琴
For colspan its 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.