Développez et réduisez tous les nœuds dans MUI DataGrid via la programmation ReactJS
P粉068486220
P粉068486220 2023-08-13 10:39:36
0
1
671
<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>
P粉068486220
P粉068486220

répondre à tous(1)
P粉722521204

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é :

<DataGridPro
    treeData
    apiRef={dataGridApi}
    groupingExpansionState={expandedState === EXPAND_ALL}
    onGroupingExpandedChange={(params) =>
      setExpandedState(params.expanded ? EXPAND_ALL : COLLAPSE_ALL)
    }
    // ...
  />
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal