通过ReactJS编程方式实现MUI DataGrid中所有节点的展开和折叠
P粉068486220
2023-08-13 10:39:36
<p>如何在MUI ReactJS的<code>DataGrid</code>中以编程方式使所有行展开/折叠？</p>
<p><strong>我尝试了什么？</strong> 我根据MUI文档使用了<code>defaultGroupingExpansionDepth</code>属性：</p>
<pre class="brush:php;toolbar:false;">export const EXPAND_ALL = -1;
export const COLLAPSE_ALL = 0;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...
return <Stack>
<Stack spacing={2} direction="row" m={1}>
<Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>展开全部</Button>
<Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>折叠全部</Button>
</Stack>
<DataGridPro
treeData
...
apiRef={dataGridApi}
defaultGroupingExpansionDepth={expandedState}
... />
</Stack>;</pre>
<p>但问题是，这些按钮只在树形结构<strong>未</strong>部分展开时起作用。</p>
<p>一旦我部分展开树形网格，这些按钮就不再起作用了。如何使这些按钮无论树形网格的当前展开/折叠状态如何都能起作用？</p>
看起来你正在使用defaultGroupingExpansionDepth属性来控制DataGrid的初始展开状态，但它可能不会随着你展开或折叠行而动态更新。为了使按钮在当前展开/折叠状态下工作，你可以使用受控状态的方法来管理展开状态：
<DataGridPro treeData apiRef={dataGridApi} groupingExpansionState={expandedState === EXPAND_ALL} onGroupingExpandedChange={(params) => setExpandedState(params.expanded ? EXPAND_ALL : COLLAPSE_ALL) } // ... />