AG Grid会在单元格中剪切长文本，并在单击时显示全部

Question

我有这样高的一排

我设法这样显示它

我也想在点单击后在第一张图片上显示它。 为此，我制作了一个自定义单元格渲染器，它正在更改单元格的内部HTML内容。我的问题是将内容更改为长行后具有相同的高度，所以我看不到全文。 有什么方法可以重新呈现行或整个表。

Answer 1

您需要在正在扩展的列上设置这两个属性。

wrapText: true,
autoHeight: true,

如果在所有列上都需要此行为，或者您不确定在以下情况下更好地定义这些行为

defaultColDef: {
    ....    
    flex: 1,
    minWidth: 110,
    editable: true,
    resizable: true,
    wrapText: true,
    autoHeight: true,
    ...
  },

然后在resetRowHeights();事件中致电cellValueChanged。

onCellValueChanged : function(params){ params.api.resetRowHeights();}

Answer 2

如果只想显示长文本，则不需要自定义单元格渲染器。您唯一需要做的就是在ColDef

下方添加2个属性

{
  ...
  autoHeight: true,
  cellStyle: { "white-space": "normal" }
},

但是由于这些属性仅适用于文本较长的列，因此您可以将其提取为命名的列类型，以便其可重复使用

const columnTypes = {
  longText: {
    width: 300,
    autoHeight: true,
    cellStyle: { "white-space": "normal" }
  }
};

const columnDefs = [
  {
    headerName: "Content",
    field: "content",
    type: "longText"
  },
  {
    headerName: "Description",
    field: "description",
    type: "longText"
  },
]

并在渲染方法中传递这些道具

<AgGridReact
  columnDefs={columnDefs}
  columnTypes={columnTypes}
  ...
/>

例如，要告诉AgGrid在内容更改后更新特定行的高度，可以使用RowNode.setRowHeight(null)

onCellValueChanged={(e) => {
  e.node.setRowHeight(null);
  gridApi.onRowHeightChanged(); // apply row height transaction
}}

实时演示