使用colspan和动态数量的列创建一个表

时间:2014-11-07 20:51:36

标签: javascript json angularjs

我是角色的新手,想要创建一个包含未知数量列的表格。此外,该表包含第二行标题列,也包含不同且未知数量的列。我必须在第二行使用colspan,但不知道如何。什么是好方法,也许是创建一个指令?还是有一个更简单的解决方案?

为了更好地理解我创建了:http://jsfiddle.net/uyLrjgyz/2/

我以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"
        }
      ]
    ]
  }
}

我可以修改json,只要我不必在后端将它转换为很多。 这angularjs and template table与我的问题有关,但它有点吝啬。

1 个答案:

答案 0 :(得分:15)

你差不多了。这是 Working fiddle

对于colspan ,就像这个colspan="{{col.subcolumns.length}}"

一样简单

但对于下一个子标题,我们应该在$scope.table

之后在控制器中编写如下的处理程序
$scope.subHeaders = function () {
    var subs = [];
    $scope.table.header.columns.forEach(function (col) {
        col.subcolumns.forEach(function (sub) {
            subs.push(sub);
        });
    });
    return subs;
};

第二行标记

<tr>
    <th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>

完整表:

<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>