MudDataGrid：如何追踪子行展开状态并实现编程展开行？

一、持久化行展开状态（解决重新加载数据后折叠问题） #

要保留用户操作过的行展开状态，核心是捕获层级行的展开/折叠事件，将状态同步到字典中，重新加载数据时通过InitiallyExpandedFunc读取保存的状态自动恢复。

修改后的完整代码 #

<MudDataGrid Items="@_elements" @ref="_dataGrid">
    <Columns>
        <!-- 绑定展开状态变更事件，同步状态到字典 -->
        <HierarchyColumn T="string" 
                         InitiallyExpandedFunc="@(x => _isRowExpanded.TryGetValue(x, out var status) ? status : false)"
                         ExpandedChanged="@((item, isExpanded) => UpdateExpansionStatus(item, isExpanded))"/>
        <PropertyColumn Property="x => x" />
    </Columns>
    <ChildRowContent>
        Child row content of @context
    </ChildRowContent>
</MudDataGrid>

<!-- 测试用：模拟重新加载数据的按钮 -->
<MudButton OnClick="ReloadDataset" Variant="Variant.Filled" Margin="Margin.Top">重新加载数据</MudButton>

@code {
    private IEnumerable<string> _elements = new List<string>() { "Bird", "Cat", "Dog"};
    private Dictionary<string, bool> _isRowExpanded = new();
    private MudDataGrid<string> _dataGrid;

    protected override void OnInitialized()
    {
        // 初始化所有行的状态，默认折叠，指定行初始展开
        foreach (var item in _elements)
        {
            _isRowExpanded.TryAdd(item, item == "Cat");
        }
    }

    // 更新行展开状态字典
    private void UpdateExpansionStatus(string item, bool isExpanded)
    {
        _isRowExpanded[item] = isExpanded;
    }

    // 模拟重新加载数据集的逻辑
    private void ReloadDataset()
    {
        // 模拟从接口获取新数据
        _elements = new List<string>() { "Bird", "Cat", "Dog", "Fish"};
        // 给新行初始化折叠状态
        foreach (var item in _elements)
        {
            _isRowExpanded.TryAdd(item, false);
        }
        StateHasChanged();
    }
}

关键细节 #

• ExpandedChanged事件：每次行展开/折叠时触发，实时同步状态到字典
• InitiallyExpandedFunc：重新加载数据时，读取字典中保存的状态，自动恢复之前的展开/折叠状态
• 用TryAdd初始化字典，避免重复键冲突，同时给新加入的行设置默认折叠状态

二、编程方式控制行展开（关联RowClick事件） #

可以通过MudDataGrid的内置方法实现编程展开/折叠，绑定RowClick事件后，点击行即可切换展开状态，提升操作直观性。

修改后的代码（基于上文扩展） #

<MudDataGrid Items="@_elements" @ref="_dataGrid" RowClick="HandleRowClick">
    <!-- 列定义保持不变 -->
</MudDataGrid>

@code {
    // ... 其他代码保持不变 ...

    // 行点击事件：切换当前行的展开状态
    private async Task HandleRowClick(DataGridRowClickEventArgs<string> args)
    {
        var targetItem = args.Item;
        if (_dataGrid.IsRowExpanded(targetItem))
        {
            await _dataGrid.CollapseRowAsync(targetItem);
        }
        else
        {
            await _dataGrid.ExpandRowAsync(targetItem);
        }
        // 同步更新状态字典，保证数据一致
        _isRowExpanded[targetItem] = !_isRowExpanded[targetItem];
    }
}

关键细节 #

• 通过@ref="_dataGrid"获取组件实例，才能调用ExpandRowAsync/CollapseRowAsync方法
• IsRowExpanded(item)可以快速判断当前行的展开状态
• 操作后同步更新状态字典，避免手动点击展开按钮和编程操作的状态不一致

内容的提问来源于stack exchange，提问作者Michael