动态改变行高

Posted 2023-03-28

【中文标题】动态改变行高

【英文标题】：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]]

【参考方案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