更改ag-grid/react中的单元格格式

Question

我在单元格中显示数字，对于 colDef，我只想将它们显示为 2dp。所以在我的 colDefs 中我有这个 -

valueFormatter: (params: ValueFormatterParams) => params.value?.price?.toFixed(2)

我想添加用户双击单元格并显示完整数字的功能（但是当他们单击离开时，它会返回到 2dp 格式）。

我已将 onCellDoubleClicked 附加到我的网格中，但是我在排序时遇到问题。

    <Grid
      onGridReady={onGridReady}
      {...gridOptions}
      quickFilterText={searchValue}
      onCellDoubleClicked={manageCellDoubleClick}
    />

我知道点击事件中有 setDataValue 可用，因为我尝试使用它，但我不想更改数据（因为我仍然希望在复制/粘贴/导出等时始终保留完整的数字）。我只是希望显示完整的数字，然后当您单击离开时它返回到 2dp 格式。

有办法做到这一点吗？

Answer 1

我们可以使用

onCellDoubleClicked

事件来触发行数据上变量

isFull

的切换。

const cellDoubleClicked = (params) => {
  console.log(1)
  const data = params.data;
  data['showFull'] = !data['showFull'];
  params.node.setData(data);
}

在格式化程序上，使用三元条件我们可以切换完整/舍入值，如下所示！

const customFormatter = (params) => params.data.showFull ? params.value : params && params.value && params.value.toFixed(2);

最后，我们可以添加一个

onCellClicked

监听器来将

isFull

属性重置为 false，使其恢复到旧状态，只有当您单击网格中的另一个单元格时它才有效！

  const onCellClicked = useCallback((event) => {
    console.log(event);
    setRowData(rowData.map(x => {
      x.showFull = false;
      return x;
    }));
  }, []);

完整代码

'use strict';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import { AgGridReact } from 'ag-grid-react';
import React, { StrictMode, useMemo, useState, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';


const customFormatter = (params) => params.data.showFull ? params.value : params && params.value && params.value.toFixed(2);

const cellDoubleClicked = (params) => {
  console.log(1)
  const data = params.data;
  data['showFull'] = !data['showFull'];
  params.node.setData(data);
}


const createRowData = () => {
  var rowData = [];
  for (var i = 0; i < 100; i++) {
    rowData.push({
      price: Math.random() * 100,
    });
  }
  return rowData;
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
  const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
  const [rowData, setRowData] = useState(createRowData());
  const [columnDefs, setColumnDefs] = useState([
    { headerName: 'Price', field: 'price', valueFormatter: customFormatter, onCellDoubleClicked: cellDoubleClicked },
  ]);
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      cellClass: 'number-cell',
    };
  }, []);


  const onCellClicked = useCallback((event) => {
    console.log(event);
    setRowData(rowData.map(x => {
      x.showFull = false;
      return x;
    }));
  }, []);

  return (
    <div style={containerStyle}>
      <div
        style={gridStyle}
        className={
          "ag-theme-quartz"
        }
      >
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          onCellClicked={onCellClicked}
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>
);

plunkr