将含colspan的HTML表格数据转为JSON以实现动态重新绑定

1. 定义适配colspan的JSON结构 #

要兼容合并表头，需要把表头分组、列属性和数据分开定义，示例结构如下：

{
  "headerGroups": [
    { "label": "基础信息", "colspan": 2, "fields": ["name", "age"] },
    { "label": "成绩信息", "colspan": 3, "fields": ["chinese", "math", "english"] },
    { "label": "其他", "colspan": 1, "fields": ["remark"] }
  ],
  "tableData": [
    { "name": "张三", "age": 18, "chinese": 90, "math": 85, "english": 92, "remark": "优秀" },
    { "name": "李四", "age": 17, "chinese": 80, "math": 95, "english": 88, "remark": "进步快" }
  ]
}

• headerGroups：存储合并表头的分组信息，colspan对应原表格的属性，fields关联该分组下的具体数据字段
• tableData：存储表格的行数据，每个字段对应表头的具体列

2. 动态渲染表格（以PrimeNG为例） #

在模板中通过循环遍历JSON结构，实现表头和数据的动态绑定：

<p-table [value]="tableConfig.tableData">
  <ng-template pTemplate="header">
    <!-- 渲染合并的一级表头 -->
    <tr>
      <th *ngFor="let group of tableConfig.headerGroups" [attr.colspan]="group.colspan">
        {{ group.label }}
      </th>
    </tr>
    <!-- 渲染二级表头（对应具体字段） -->
    <tr>
      <ng-container *ngFor="let group of tableConfig.headerGroups">
        <th *ngFor="let field of group.fields">{{ field | titlecase }}</th>
      </ng-container>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <ng-container *ngFor="let group of tableConfig.headerGroups">
        <td *ngFor="let field of group.fields">{{ row[field] }}</td>
      </ng-container>
    </tr>
  </ng-template>
</p-table>

3. 组件逻辑层处理 #

在组件TS文件中直接引入定义好的JSON结构，或从后端接口获取：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tableConfig = {
    "headerGroups": [
      { "label": "基础信息", "colspan": 2, "fields": ["name", "age"] },
      { "label": "成绩信息", "colspan": 3, "fields": ["chinese", "math", "english"] },
      { "label": "其他", "colspan": 1, "fields": ["remark"] }
    ],
    "tableData": [
      { "name": "张三", "age": 18, "chinese": 90, "math": 85, "english": 92, "remark": "优秀" },
      { "name": "李四", "age": 17, "chinese": 80, "math": 95, "english": 88, "remark": "进步快" }
    ]
  };
}

关键注意事项 #

• 确保所有表头分组的colspan数值总和，等于所有fields数组的字段总数，避免表格结构错乱
• 如果涉及rowspan合并行，只需在JSON结构中增加rowspan属性，渲染时对应设置[attr.rowspan]即可
• 字段绑定使用row[field]的动态方式，可完全适配任意字段名的表格，无需硬编码

内容的提问来源于stack exchange，提问作者Sunny