使用 DataTable 可排序 Blazor DataGrid

Question

我正在嘗試使用 MudBlazor、QuickGrid、Radzen 等組件庫中的 Blazor DataGrid。我遇到的問題是我需要一個 DataGrid 來處理 DataTable，因為我的表中的結果將是各種 Sql 查詢結果，我沒有 model 我可以 map 到 TItem 或列屬性。

我發現這篇文章試圖做同樣的事情。 我將在下面粘貼這篇文章中的代碼解決方案。 只有一個答案，有人提供了如何在 QuickGrid 中完成此操作的示例。 我可以讓它工作，但我無法讓排序工作。

有誰知道我如何進行排序或在 MudBlazor 中進行排序？ 謝謝！

@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="provider" Virtualize="true" ItemSize="35">
            @foreach (DataColumn column in table.Columns)
            {
                <PropertyColumn Property="@(c => c[column.ColumnName])" Sortable="true">
                    <HeaderTemplate>
                        @column.ColumnName
                    </HeaderTemplate>
                </PropertyColumn>
            }
        </QuickGrid>
    </div>
}

@code
{
    DataTable table = new();
    //IQueryable<DataRow> = table.AsQueryable();
    GridItemsProvider<DataRow>? provider;

    void Load(int setNum)
    {
        table = DataService.GetDataTable(setNum);   // some testdata
        var rows = table.AsEnumerable().ToList(); 
        var providerResult = GridItemsProviderResult
            .From<DataRow>(rows, rows.Count);
        provider = req => ValueTask.FromResult(providerResult);
    }

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

Answer 1

這不使用DataTable ，但它確實顯示了如何連接到委托以響應 QuickGrids 排序 state。

此代碼為支持大型數據集虛擬化的 ODATA 端點生成查詢字符串

<QuickGrid ItemsProvider=itemsProvider
           TGridItem="Tenant"
           Class="table table-bordered table-striped table-sm table-hover"
           Virtualize=true>
...

...
GridItemsProvider<Tenant> itemsProvider => GetTenants;

private async ValueTask<GridItemsProviderResult<Tenant>> 
    GetTenants(GridItemsProviderRequest<Tenant> request)
{
    var sortColumns = request.GetSortByProperties();
    string queryString = string.Empty;

    foreach (var item in sortColumns)
    {
        var name = item.PropertyName;
        var direction = item.Direction switch
        {
            SortDirection.Descending => "desc",
            _ => "asc"
        };

        queryString += $"{name} {direction}";
    }

    if (queryString != string.Empty)
    {
        queryString = "$orderby=" + queryString;
    }

    ItemsPageResult<ItemContextResult<Tenant>> r
        = await this.apiBroker.GetTenantsAsync(request.StartIndex, request.Count ?? 200, queryString, request.CancellationToken)!;

    GridItemsProviderResult<Tenant> result = new()
    {
        Items = r.Items.Select(a => a.Item).ToList(),
        TotalItemCount = r.TotalItemsCount
    };

    return result;
}

public partial class ApiBroker : IApiBroker
{
...
    public async ValueTask<ItemsPageResult<ItemContextResult<Tenant>>> GetTenantsAsync(
        int startIndex,
        int count,
        string queryString,
        CancellationToken cancellationToken)
        => await GetItemsAsync<Tenant>(
            endpoint: "Tenants",
            startIndex: startIndex,
            count: count,
            queryString: queryString,
            cancellationToken: cancellationToken);

    private async ValueTask<ItemsPageResult<ItemContextResult<TItem>>> GetItemsAsync<TItem>(
        string endpoint,
        int startIndex,
        int count,
        string queryString,
        CancellationToken cancellationToken)
    {
        var query = $"odata/{endpoint}?{queryString}&$skip={startIndex}&$top={count}&$count=true";

        OdataResponce<TItem> response = await this.HttpClient.GetContentAsync<OdataResponce<TItem>>(relativeUrl: query, cancellationToken);

        var contextItems = response.Items.Select((item, index) => new ItemContextResult<TItem>(item, index + startIndex)).ToList();

        return new ItemsPageResult<ItemContextResult<TItem>>(contextItems, totalItemsCount: response.TotalItemsCount);
    }
...