Blazor DataGrid适配DataTable：排序实现及MudBlazor适配方案咨询

一、QuickGrid排序功能修复 #

当前代码的核心问题是ItemsProvider未处理QuickGrid传入的排序请求，直接返回原始数据列表。要实现排序，需解析请求中的排序规则，对DataRow集合做动态排序。

修改后的完整代码：

@using System.Data
@using Microsoft.AspNetCore.Components.QuickGrid
@inject DataService DataService

@if (table.Rows.Count > 0)
{
    <div style="height:25em; overflow:scroll">
        <QuickGrid TGridItem="DataRow" ItemsProvider="GetItemsAsync" Virtualize="true" ItemSize="35">
            @foreach (DataColumn column in table.Columns)
            {
                <PropertyColumn Property="@(c => c[column.ColumnName])" Sortable="true" SortBy="@(column.ColumnName)">
                    <HeaderTemplate>
                        @column.ColumnName
                    </HeaderTemplate>
                </PropertyColumn>
            }
        </QuickGrid>
    </div>
}

@code
{
    DataTable table = new();

    async ValueTask<GridItemsProviderResult<DataRow>> GetItemsAsync(GridItemsProviderRequest<DataRow> request)
    {
        var rows = table.AsEnumerable().ToList();

        // 处理排序逻辑
        if (request.SortBy.Any())
        {
            var sortRule = request.SortBy.First();
            var columnName = sortRule.SortBy;
            var isAscending = sortRule.Direction == SortDirection.Ascending;

            rows = rows.OrderBy(row =>
            {
                var value = row[columnName];
                // 统一处理DBNull值，避免排序异常
                return value == DBNull.Value ? null : value;
            }, isAscending ? Comparer<object>.Default : Comparer<object>.Default.Reverse()).ToList();
        }

        // 处理虚拟滚动的分页需求
        var totalCount = rows.Count;
        var pagedRows = rows.Skip(request.StartIndex).Take(request.Count).ToList();

        return GridItemsProviderResult.From(pagedRows, totalCount);
    }

    void Load(int setNum)
    {
        table = DataService.GetDataTable(setNum);
    }

    protected override void OnInitialized()
    {
        Load(1);
    }
}

关键调整点：

• 用GetItemsAsync方法替代硬编码的provider，接收QuickGrid的排序、分页请求参数
• 解析SortBy规则，根据列名和排序方向对DataRow列表排序
• 处理DBNull值，避免排序时抛出类型异常
• 适配虚拟滚动的分页逻辑，返回指定范围的数据

二、MudBlazor适配DataTable实现方案 #

MudBlazor的MudTable天然支持动态列配置，以下是直接适配DataTable的完整实现，包含排序、分页、基础过滤功能：

@using System.Data
@using MudBlazor
@inject DataService DataService

<MudTable Items="@dataRows" T="DataRow" PageSize="10" SortLabel="排序" Filterable="true" FilterPlaceholder="搜索列">
    <HeaderContent>
        @foreach (DataColumn column in table.Columns)
        {
            <MudTh Sortable="true" SortBy="@(row => row[column.ColumnName])">@column.ColumnName</MudTh>
        }
    </HeaderContent>
    <RowTemplate>
        @foreach (DataColumn column in table.Columns)
        {
            <MudTd>@context[column.ColumnName]</MudTd>
        }
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{5,10,25}" />
    </PagerContent>
</MudTable>

@code {
    DataTable table = new();
    IEnumerable<DataRow> dataRows => table.AsEnumerable();

    void Load(int setNum)
    {
        table = DataService.GetDataTable(setNum);
    }

    protected override void OnInitialized()
    {
        Load(1);
    }
}

如果需要处理复杂类型的排序（如日期、数值的优先级排序），可自定义排序逻辑：

// 在@code块中添加自定义排序方法
private IEnumerable<DataRow> SortDataRows(IEnumerable<DataRow> rows, string columnName, SortDirection direction)
{
    return direction == SortDirection.Ascending
        ? rows.OrderBy(row => GetSortableValue(row[columnName]))
        : rows.OrderByDescending(row => GetSortableValue(row[columnName]));
}

private object GetSortableValue(object value)
{
    return value switch
    {
        DBNull _ => null,
        DateTime dt => dt,
        IComparable comparable => comparable,
        _ => value.ToString()
    };
}

然后通过SortChanged事件触发自定义排序：

<MudTable Items="@dataRows" T="DataRow" PageSize="10" SortChanged="OnSortChanged" SortLabel="排序" Filterable="true">
    <!-- 其余内容不变 -->
</MudTable>

@code {
    // ... 其他代码 ...
    private void OnSortChanged(TableState state)
    {
        if (!string.IsNullOrEmpty(state.SortLabel))
        {
            dataRows = SortDataRows(table.AsEnumerable(), state.SortLabel, state.SortDirection);
        }
        else
        {
            dataRows = table.AsEnumerable();
        }
    }
}

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