动态改变行高答案

【问题标题】：Changing row height dynamically动态改变行高
【发布时间】：2021-08-24 03:21:00
【问题描述】：

我的 reactjs agggrid 上有两列：Ids 和 Description.Data 正在从 REST api 中获取搜索按钮单击。如果 API 为一行返回多个 Id，我将使用换行符（“
”）将它们显示在另一个下方的单元格中。例如

2101
5102
9808

我需要根据返回的 Id 数量自动调整网格行高。

我已经尝试了以下标题定义中的各种属性。但是，行高似乎并没有动态变化。

[{
    headerName: "Description",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true
},
{
    headerName: "Ids",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true
}]

这里有什么建议吗？

谢谢。

【问题讨论】：

你能举一个你从api得到的数据的例子吗？
{ "data":[ { "Description": D1" "Ids": [ { "Id": 2101 } { "Id": 5102 } { "Id": 9808 } ] }, {“描述”：D2““Ids”：[{“Id”：9808}]}，{“描述”：D3““Ids”：[{“Id”：5102}{“Id”：9808}]] }

标签： reactjs ag-grid

【解决方案1】：

尝试这样做

创建 customCellRendererComponent

function CustomCellRenderer(props) {
  return (
    <div>
      {props.value.map((x, index) => <div key={index}>{x.Id}</div>)}
    </div>
  )
};

然后像这样在网格中注册customCellRenderer

function GridExample () {
    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);
  
    const onGridReady = (params) => {
      setGridApi(params.api);
      setGridColumnApi(params.columnApi);
    };
  
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <div
          id="myGrid"
          style={{
            height: '95%',
            width: '100%',
          }}
          className="ag-theme-alpine"
        >
          <AgGridReact
            frameworkComponents={{
              customCellRenderer: CustomCellRenderer,
            }}
            rowData={rowData}
            rowHeight={120}
            onGridReady={onGridReady}
          >
            <AgGridColumn
              field="Description"
            />
            <AgGridColumn
              field="Ids"
              cellRenderer="customCellRenderer"
            />
          </AgGridReact>
        </div>
      </div>
    );
};

在此处查看完整的代码示例https://plnkr.co/edit/w7Jar0xaq7yZ4wtJ

【讨论】：