typescript AgGridReact -当isRowSelectable更改时，网格不更新

k2fxgqgv 于 2022-12-24 发布在 TypeScript

关注(0)|答案(2)|浏览(226)

我尝试将isRowSelectable作为 prop 动态传递给AgGridReact。在下面的玩具示例中，您希望单击"切换条件"按钮将更改网格中具有复选框的项目集，但实际上网格没有更改。
截图：

interface Item { name: string, age: number, height: number}
const data: Item[] = [
    {name: "old and tall", age: 80, height: 80}, 
    {name: "old and short", age: 80, height: 20},
    {name: "young and tall", age: 10, height: 80}, 
    {name: "young and short", age: 10, height: 20}, 
]
const colDefs: ColDef[] = [
    {
        headerName: "",
        checkboxSelection: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        width: 60,
        sortable: false
    },
    { field: "name"},
    { field: "age"},
    { field: "height"}
]

const criteria1 = (node: RowNode) => node.data.age > 50
const criteria2 = (node: RowNode) => node.data.height > 50

export const DevPage: FunctionComponent = () => {

    const [isCriteria1, setIsCriteria1] = useState<boolean>(false)

    return ( <Fragment>
    
        <h2> {isCriteria1 ? "By Age" : "By Height"} </h2>
        <Button onClick = { () => setIsCriteria1(!isCriteria1) }> 
            Switch criteria
        </Button> 
        
        <div className="ag-theme-alpine" style={{height:"800px"}}>
            <AgGridReact
                rowSelection="multiple"
                columnDefs = {colDefs}
                rowData={data}
                isRowSelectable = {isCriteria1 ? criteria1 : criteria2}
                suppressRowClickSelection={true}
            />
        </div>
        
    </Fragment> )
}

typescript

来源：https://stackoverflow.com/questions/64014770/aggridreact-grid-does-not-update-when-isrowselectable-changes

2条答案

按热度按时间

pieyvz9o1#

作为一种解决方法，您可以强制所有RowNode在onClick事件触发时重新计算selectable属性。

const [rowData, setRowData] = React.useState<RowDataType[]>([]);
const criterial = React.useRef(true);
const isSelectable = (rowNode: RowNode) => {
  const result = rowNode.data.age > 25;
  const selectable = result === criterial.current;

  return selectable;
};
const toggleCriteria = () => {
  const updateSelectable = (rowNode: RowNode) => {
    rowNode.setRowSelectable(isSelectable(rowNode));
  };

  criterial.current = !criterial.current;
  gridApi.deselectAll();
  gridApi.forEachNodeAfterFilterAndSort(updateSelectable);
};

return (
  <>
    <button onClick={toggleCriteria}>Toggle Criteria</button>
    <AgGridReact
      rowSelection="multiple"
      suppressRowClickSelection
      columnDefs={columnDefs}
      onGridReady={onGridReady}
      isRowSelectable={isSelectable}
      rowData={rowData}
    />
  </>
);

现场演示

赞(0）回复(0）举报 2022-12-24

v1uwarro2#

这是AG网格问题。当isRowSelectable函数发生变化时，AG网格（使用28.2.1测试）未刷新状态。
您可以通过setRowSelectable函数强制设置行可选

apiRef.current?.grid?.forEachNode(
  (rowNode: RowNode) => rowNode.setRowSelectable(isSelectable(rowNode))
)

在NearHuscarl方法的分支下，声明了对useCallback和useState函数的React依赖性。

const [rowData, setRowData] = React.useState<Athlete[]>([]);
const [criterial, setCriteria] = React.useState(true);
const isSelectable = React.useCallback((rowNode: RowNode) => {
  const result = rowNode.data.age > 25;
  const selectable = result === criterial;
  return selectable;
}, [criterial]);
const toggleCriteria = React.useCallback(() => {
  setCriteria((c) => !c);
}, []);
React.useEffect(() => {
  apiRef.current?.grid?.deselectAll();
  apiRef.current?.grid?.forEachNode(
    (rowNode: RowNode) => rowNode.setRowSelectable(isSelectable(rowNode))
  )
}, [apiRef, isSelectable]);

return (
  <>
    <button onClick={toggleCriteria}>Toggle Criteria</button>
    <AgGridReact
      rowSelection="multiple"
      suppressRowClickSelection
      columnDefs={columnDefs}
      onGridReady={onGridReady}
      isRowSelectable={isSelectable}
      rowData={rowData}
    />
  </>
);

现场演示

enter link description here

赞(0）回复(0）举报 2022-12-24

我来回答

typescript AgGridReact -当isRowSelectable更改时，网格不更新

2条答案

现场演示

现场演示

相关问题

热门标签

最新问答