创建一个包含列pan和动态列数的表

Create a table with colspan and a dynamic amount of columns

本文关键字：动态 pan 包含列 一个 创建      更新时间：2023-09-26

我是angular的新手，想创建一个列数未知的表。此外，该表还包含第二行头列，也包含不同数量的未知列。我不得不在第二行使用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和模板表与我的问题有关，但它有点吝啬。

你差不多到了。这是工作小提琴

对于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>
相关文章：