MudBlazor MudDataGrid ServerData分页加载及选中状态保留问题咨询

在ServerData模式下，MudDataGrid依赖服务端返回分页数据，组件本身不会维护跨页的选中状态，且官方未暴露全选/取消全选的原生事件，导致分页时点击全选无法维持状态。以下是可行的解决方案：

核心思路 #

手动维护全局选中项的主键集合，通过自定义表头复选框实现全选逻辑，在分页/排序加载数据后恢复当前页的选中状态。

1. 定义全局状态与模型扩展 #

• 新增全局集合存储所有选中项的主键：

  private HashSet<Guid> _selectedItemIds = new(); // 假设模型主键是Guid类型，根据实际调整
  private HashSet<YourModel> SelectedItems { get; set; } = new();
  private List<YourModel> _currentPageItems = new();
  private bool _isAllSelected;
  

• 给你的数据模型添加IsSelected属性（用于绑定行复选框状态）：

  public class YourModel
  {
      public Guid Id { get; set; }
      // 其他业务属性...
      public bool IsSelected { get; set; }
  }
  

2. 自定义全选列与事件处理 #

替换默认的选择列，用模板列实现自定义表头复选框和行复选框：

<MudDataGrid T="YourModel" 
             ServerData="@LoadServerData" 
             @bind-SelectedItems="@SelectedItems"
             SortMode="SortMode.Single">
    <Columns>
        <TemplateColumn>
            <HeaderTemplate>
                <MudCheckbox @bind-Checked="_isAllSelected" 
                             CheckedChanged="OnHeaderCheckboxToggled" />
            </HeaderTemplate>
            <CellTemplate>
                <MudCheckbox @bind-Checked="@context.Item.IsSelected" 
                             CheckedChanged="() => OnRowCheckboxToggled(context.Item)" />
            </CellTemplate>
        </TemplateColumn>
        <!-- 其他业务列 -->
        <PropertyColumn Property="x => x.Name" Title="名称" />
        <!-- ... -->
    </Columns>
</MudDataGrid>

实现复选框的事件逻辑：

// 表头全选/取消全选
private void OnHeaderCheckboxToggled(bool isChecked)
{
    foreach (var item in _currentPageItems)
    {
        item.IsSelected = isChecked;
        if (isChecked)
            _selectedItemIds.Add(item.Id);
        else
            _selectedItemIds.Remove(item.Id);
    }
    SelectedItems = _currentPageItems.Where(x => x.IsSelected).ToHashSet();
    StateHasChanged();
}

// 单行选中/取消选中
private void OnRowCheckboxToggled(YourModel item)
{
    if (item.IsSelected)
        _selectedItemIds.Add(item.Id);
    else
        _selectedItemIds.Remove(item.Id);
    
    // 更新表头全选状态：判断当前页是否所有项都被选中
    _isAllSelected = _currentPageItems.All(x => _selectedItemIds.Contains(x.Id));
    StateHasChanged();
}

3. 分页/排序时恢复选中状态 #

在ServerData的加载回调中，获取服务端数据后，根据全局集合恢复当前页的选中状态：

private async Task<GridData<YourModel>> LoadServerData(GridState<YourModel> state)
{
    // 调用服务端接口获取分页、排序后的数据
    var result = await YourDataService.GetPagedData(
        page: state.Page + 1, // 注意MudDataGrid的Page从0开始，根据你的接口调整
        pageSize: state.PageSize,
        sortField: state.SortDefinitions.FirstOrDefault()?.SortBy,
        isAscending: state.SortDefinitions.FirstOrDefault()?.Direction == SortDirection.Ascending
    );
    
    _currentPageItems = result.Items.ToList();
    
    // 恢复当前页的选中状态
    foreach (var item in _currentPageItems)
    {
        item.IsSelected = _selectedItemIds.Contains(item.Id);
    }
    
    // 更新SelectedItems和全选状态
    SelectedItems = _currentPageItems.Where(x => x.IsSelected).ToHashSet();
    _isAllSelected = _currentPageItems.All(x => x.IsSelected);
    
    return new GridData<YourModel>
    {
        Items = _currentPageItems,
        TotalItems = result.TotalCount
    };
}

4. 额外处理：清空所有选中 #

如果需要清空所有选中项，直接操作全局集合并同步状态：

private void ClearAllSelections()
{
    _selectedItemIds.Clear();
    foreach (var item in _currentPageItems)
    {
        item.IsSelected = false;
    }
    SelectedItems.Clear();
    _isAllSelected = false;
    StateHasChanged();
}

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