html-table - 如何使 ag-Grid 表响应以使标题和行被转置？

Question

请参阅“折叠行”动画示例：

这与我想要实现的目标相似。

我希望我的表格能够使用重组自身的方法进行响应，以便它显示每个原始行转置（但也转置标题并复制它们以便它们标记每一行）。

ag-Grid 似乎是一个具有无数功能的非凡库，所以我很惊讶文档似乎没有指定如何实现我的目标。

Answer 1

不幸的是，此功能不是开箱即用的。

这实际上是一个功能请求，可以在这里找到： https ://www.ag-grid.com/ag-grid-pipeline/

AG-3142 允许网格更改行的列（转置行），因此网格将每一行显示为一列，每一列显示为一行

为此，您必须自己编写一个函数来将行转置为一列。

然后，您可以利用 Grid API 方法相应地更新列和行数据。

我创建了一个简单的plunker，它基于单击按钮执行此操作：

function onBtnClick() {
  let newColumnDefs = [{ field: 'transposed_rows' }];

  let newRowData = [];

  gridOptions.api.forEachNode((node) => {
    let nodeDataValues = Object.values(node.data);
    nodeDataValues.forEach((val) => newRowData.push({ transposed_rows: val }));
  });

  gridOptions.api.setColumnDefs(newColumnDefs);
  gridOptions.api.setRowData(newRowData);
}