Erweitern und reduzieren Sie alle Knoten im MUI DataGrid durch ReactJS-Programmierung

Question

Wie kann man alle Zeilen in DataGrid programmgesteuert erweitern/reduzieren?

Was habe ich versucht? Ich habe die Eigenschaft defaultGroupingExpansionDepth verwendet:

export const EXPAND_ALL = -1;
export const COLLAPSE_ALL = 0;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...

return <Stack>
        <Stapelabstand={2} Direction="Reihe" m={1}>
            <Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>Alles erweitern</Button>
            <Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>Alle reduzieren</Button>
        </Stack>
        <DataGridPro
            Baumdaten
            ...
            apiRef={dataGridApi}
            defaultGroupingExpansionDepth={expandedState}
            .../>
    </Stack>;

Das Problem besteht darin, dass diese Schaltflächen nur funktionieren, wenn der Baum nicht

Sobald ich das Baumraster teilweise erweitere, funktionieren die Schaltflächen nicht mehr. Wie kann ich dafür sorgen, dass diese Schaltflächen unabhängig vom aktuellen erweiterten/reduzierten Zustand des Baumrasters funktionieren?

Answer 1

看起来你正在使用defaultGroupingExpansionDepth属性来控制DataGrid的初始展开状态，但它可能不会随着你展开或折叠行而动态更新。为了使按钮在当前展开/折叠状态下工作，你可以使用受控状态的方法来管理展开状态：

<DataGridPro
    treeData
    apiRef={dataGridApi}
    groupingExpansionState={expandedState === EXPAND_ALL}
    onGroupingExpandedChange={(params) =>
      setExpandedState(params.expanded ? EXPAND_ALL : COLLAPSE_ALL)
    }
    // ...
  />