Développez et réduisez tous les nœuds dans MUI DataGrid via la programmation ReactJS
P粉068486220
2023-08-13 10:39:36
<p>Comment développer/réduire toutes les lignes par programme dans <code>DataGrid</code> </p>
<p><strong>Qu'ai-je essayé ? </strong> J'ai utilisé la propriété <code>defaultGroupingExpansionDepth</code> selon la documentation MUI : </p>
<pre class="brush:php;toolbar:false;">export const EXPAND_ALL = -1;
exporter const COLLAPSE_ALL = 0 ;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...
return <Pile>
<Espacement de pile={2} direction="ligne" m={1}>
<Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>Développer tout</Button>
<Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>Tout réduire</Button>
</Pile>
<DataGridPro
arbreDonnées
...
apiRef={dataGridApi}
defaultGroupingExpansionDepth={expandedState}
... />
</Pile>;</pre>
<p>Le problème est que ces boutons ne fonctionnent que lorsque l'arborescence est <strong>pas</strong> </p>
<p>Une fois que j'ai partiellement développé la grille de l'arborescence, les boutons ne fonctionnent plus. Comment puis-je faire fonctionner ces boutons quel que soit l'état actuel développé/réduit de la grille arborescente ? </p>
Il semble que vous utilisiez la propriété defaultGroupingExpansionDepth pour contrôler l'état d'expansion initial du DataGrid, mais il se peut qu'elle ne se mette pas à jour dynamiquement lorsque vous développez ou réduisez les lignes. Afin de faire fonctionner le bouton dans l'état développé/réduit actuel, vous pouvez utiliser la méthode contrôléestate pour gérer l'état développé :