Question

我想实现一个自定义状态栏，在这里我可以基于columnA获取所有选定数字单元格的特殊总和。如果columnA = pos，则将数字视为正数；否则，如果columnA = neg，则将数字视为负数。

我试图添加自己的statusPanel组件，但是我什至无法返回正确的数量。无论选择多少个单元格，它始终返回0：

gridOption= {  
  ...
  frameworkComponents: {
    sumStatusBarComponent: SumStatusBarComponent,
  },
  ...
  statusBar: {
    statusPanels: [
      {
        statusPanel: 'sumStatusBarComponent',
      },
      {
        statusPanel: 'agAggregationComponent',
      },
    ],
  },
}

function SumStatusBarComponent(props: IStatusPanelParams) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(props.api.getSelectedNodes().length);
    console.log('count', props.api.getSelectedNodes().length);
  }, []);

  return (
    <div className="ag-status-name-value">
      <span className="component">Row Count Component&nbsp;</span>
      <span className="ag-status-name-value-value">{count}</span>
    </div>
  );
};

有人可以给我一个主意吗？

Answer 1

添加了一个自定义状态栏组件，以覆盖现有的总和汇总

GridOptions = {
...  
frameworkComponents: {
    sumStatusBarComponent: SumStatusBarComponent,
  },
  statusBar: {
    statusPanels: [
      {
        statusPanel: 'agAggregationComponent',
        statusPanelParams: {
          aggFuncs: ['count', 'min', 'max', 'avg'],
        },
      },
      {
        statusPanel: 'sumStatusBarComponent',
      },
    ],
  },
...
}

添加rangeSelectionChanged，以便在范围选择更改时可以采取行动

function SumStatusBarComponent(props: IStatusPanelParams) {
  const [sum, setSum] = useState('');
  const [visible, setVisible] = useState(false);

  props.api.addEventListener('rangeSelectionChanged', () =>
    handleRangeSelectionChanged(props.api, setSum, setVisible),
  );

  return (
    <div
      className="ag-status-name-value"
      style={{ display: visible ? 'inline' : 'none' }}
    >
      <span className="component">Sum:&nbsp;</span>
      <span className="ag-status-name-value-value">{sum}&nbsp;</span>
    </div>
  );
}

aggrid自定义状态栏

1 个答案: