Javascript 更改agGRIDReaction中的单元格格式

发布于02月01日

我在我的单元格中显示数字，对于colDefs，我只想将它们显示给2DP.所以在我的胸口里我有这个-

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

我想增加的能力，为用户双击单元格，并为它显示完整的数字(但当他们点击离开时，它回到2DP格式).

我已经将CellDoubleCliced附加到我的网格，但是我在排序时遇到了麻烦.

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

我知道在click事件中有setDataValue可用，因为我试图使用它，但是我不想更改数据(因为我仍然希望在复制/粘贴/导出等时始终有完整的数字).我只是想完整的数字被揭示，然后为它回到2DP格式，当你点击离开.

有办法做到这一点吗？

推荐答案

我们可以使用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个