强制组件使用 ag-grid 进行渲染

Question

大家好，我正在使用 ag-grid 创建一个表格，并在我自定义的单元格编辑器中做出反应，基本上我只需要在选择一个选项后在表格上设置值，但由于某种原因该值没有在单元格上呈现，为了渲染，我必须再次单击自定义单元格编辑器所在的单元格，并且在撤消单击后，值将呈现在单元格上

所以基本上我必须手动强制渲染才能看到值，所以一旦我对选择执行更改，我就尝试使用api中的refreshCells()，但它不起作用（可能我正在使用它不正确）它是我可以强制渲染 cellEditor 组件的方法，或者有没有一种方法可以在做出选择后强制刷新单元格？我是使用 ag-grid 的新手，如果有人可以帮助我，那将会非常有帮助，如果我需要提供更具体的信息，请告诉我，

这是我的 cellEditor 组件，是一个 ant-d select，因为它符合我的要求：

interface ICellEditorReactComp {
  api: any;
  values: string[];
  getValue: any;
  change: any;
  dropdownValue: string;
}

export const DropdownCell = observer(
  forwardRef((props: ICellEditorReactComp, ref) => {
    
    console.log("asdasd", props);
    const handleChange = (value) => {

      props.api.refreshCells();
      props.change(value);
    };

    const getValue = () => {
      return props.dropdownValue;
    };

    useImperativeHandle(ref, () => ({
      getValue,
    }));

    return (
      <Select
        defaultValue={props.dropdownValue}
        style={{ width: "100%", height: "100%" }}
        onChange={handleChange}
        options={props.values.map((item) => {
          return { value: item, label: item };
        })}
      ></Select>
    );
  }),
);

这基本上就是我的桌子

const ParametersListsTable: React.FC<ParametersListsTableProps> = ({
  filterText,
  rowData,
  descriptionInputs,
  onGeneratedListsChange,
  generatedLists,
  descriptionCellValue,
  methodCellValue,
})

const columns: any = [
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownCell,
      cellEditorParams: {
        values: inputs,
        change: (value) => {
          dropdownCellRenderState.SetDropdownInputDescValue(value);
        },
        dropdownValue: dropdownCellRenderState.dropdownInputDescValue,
      },
      cellDataType: true,
      singleClickEdit: true,
    },
    ]

  return (
    <Flex vertical gap="small">
      <Flex gap="middle" horizontal wrap="wrap">
        <SearchBar />

        <Button type="primary" onClick={onNewRecordClick}>
          New record
        </Button>

        <Button danger onClick={onDeleteSelectedRowsClick}>
          Delete selected rows
        </Button>

        <Button onClick={onGenerateParametersListClick}>
          Generate parameters list
        </Button>
      </Flex>
      <div
        className="ag-theme-balham"
        style={{ height: "100%", width: "100%" }}
      >
        <AgGridReact
          columnDefs={columns}
          defaultColDef={defaultColDef}
          rowData={rowData}
          rowHeight={44}
          rowMultiSelectWithClick={true}
          rowSelection="multiple"
          overlayNoRowsTemplate={noRowsTemplate}
          quickFilterText={filterText}
          animateRows={true}
          domLayout="autoHeight"
          onSelectionChanged={onSelectionChanged}
        />
      </div>
    </Flex>
  );
};

export default observer(ParametersListsTable);

Answer 1

默认情况下，Ag-grid 在

refreshCells

调用期间使用更改检测，因此它仅刷新已更改的单元格。如果您没有将新数据传递给 ag-grid，它不会知道有任何需要刷新的更改。

您可以使用

force

选项来覆盖此行为，并强制刷新单元格：

refreshCells({force: true})

另外，如果您只需要更新 1 行，出于性能原因，我还建议告诉 ag-grid 要刷新哪一行。像这样的东西：

refreshCells({force: true, rowNodes: [row]})

API 文档链接：https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-refresh-refreshCells

刷新单元指南链接：https://www.ag-grid.com/javascript-data-grid/view-refresh/