求可将嵌套对象数组转为带行列跨度表格的JavaScript库及方案

现成库推荐 #

如果不想手动实现，这些成熟的表格库可以直接处理嵌套表头的生成：

• AG Grid：原生支持复杂表头分组，自动计算并渲染rowspan/colspan，配置项丰富。
• React Table（React生态）：通过自定义表头组件结合分组逻辑，快速实现嵌套表头结构。
• DataTables：经典jQuery表格库，支持配置多层级表头，自动处理单元格跨度。

手动实现思路与代码 #

核心是计算两个关键属性：

• colspan：等于当前节点下所有叶子子节点的总数（叶子节点自身colspan=1）。
• rowspan：如果节点有子节点，rowspan=1（仅占当前行）；如果是叶子节点，rowspan等于表头总层级数减去当前节点的层级数加1（跨到最后一行）。

实现代码

// 计算表头的总层级数
function getMaxDepth(nodes, currentDepth = 1) {
  let maxDepth = currentDepth;
  nodes.forEach(node => {
    if (node.children?.length) {
      const childDepth = getMaxDepth(node.children, currentDepth + 1);
      maxDepth = Math.max(maxDepth, childDepth);
    }
  });
  return maxDepth;
}

// 计算节点的叶子节点总数（用于colspan）
function getLeafCount(node) {
  if (!node.children?.length) return 1;
  return node.children.reduce((sum, child) => sum + getLeafCount(child), 0);
}

// 按层级构建表头行数据
function buildHeaderRows(nodes, totalDepth, currentDepth = 1, rows = []) {
  rows[currentDepth - 1] ??= [];
  nodes.forEach(node => {
    const colspan = getLeafCount(node);
    const rowspan = node.children?.length ? 1 : totalDepth - currentDepth + 1;
    rows[currentDepth - 1].push({
      headerName: node.headerName,
      colspan,
      rowspan
    });
    if (node.children?.length) {
      buildHeaderRows(node.children, totalDepth, currentDepth + 1, rows);
    }
  });
  return rows;
}

// 生成最终HTML表格字符串
function generateTableHtml(headerRows) {
  let html = '<table>\n';
  headerRows.forEach(row => {
    html += '  <tr>\n';
    row.forEach(cell => {
      const attrs = [];
      if (cell.colspan > 1) attrs.push(`colspan="${cell.colspan}"`);
      if (cell.rowspan > 1) attrs.push(`rowspan="${cell.rowspan}"`);
      const attrsStr = attrs.length ? ' ' + attrs.join(' ') : '';
      html += `    <th${attrsStr}>${cell.headerName}</th>\n`;
    });
    html += '  </tr>\n';
  });
  html += '</table>';
  return html;
}

// 使用示例
const headerData = [
  { "headerName": "Product" },
  {
    "headerName": "Sale Rate",
    "children": [
      {
        "headerName": "Sales",
        "children": [
          { "headerName": "Last Year Sale" },
          { "headerName": "This Year Sale" }
        ]
      },
      {
        "headerName": "Profits",
        "children": [
          { "headerName": "Last Year Profit" },
          { "headerName": "This Year Profit" }
        ]
      }
    ]
  }
];

const totalDepth = getMaxDepth(headerData);
const headerRows = buildHeaderRows(headerData, totalDepth);
console.log(generateTableHtml(headerRows));

代码说明

1. getMaxDepth：递归遍历所有节点，确定表头的总行数（最大层级）。
2. getLeafCount：递归统计当前节点下的叶子节点数量，作为colspan的值。
3. buildHeaderRows：按层级收集每个表头单元格，同时计算对应的rowspan和colspan。
4. generateTableHtml：将构建好的表头行数据转换为标准HTML字符串，与你提供的示例输出完全匹配。

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