时间戳

首页 > 解决方案 > agggrid 自定义状态栏

ag-grid - agggrid 自定义状态栏

问题描述

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

我尝试添加自己的 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>
  );
};

谁能给我一个想法？

标签： ag-gridag-grid-react

解决方案

添加了一个自定义状态栏组件来覆盖现有的 sum 聚合

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>
  );
}

推荐阅读