Ag grid aggrid自定义状态栏

我想实现一个自定义状态栏，在那里我可以根据columnA获得所有选定数字单元格的特殊总和。若列A=pos，则将数字视为正；若列A=neg，则将数字视为负

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

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

函数SumStatusBarComponent（道具：IStatusPanelParams）{
const[count，setCount]=useState（0）；
useffect（（）=>{
setCount（props.api.getSelectedNodes（）.length）；
log（'count'，props.api.getSelectedNodes（）.length）；
}, []);
返回(
行计数组件
{count}
);
};

---

有人能给我一个主意吗？

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

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

函数SumStatusBarComponent（道具：IStatusPanelParams）{
常量[总和，设置值]=使用状态（“”）；
const[visible，setVisible]=useState（false）；
props.api.addEventListener（'rangeSelectionChanged'，（）=>
handleRangeSelectionChanged（props.api、setSum、setVisible），
);
返回(
总数：
{sum}
);
}

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