如何在MudBlazor中动态更改MudTable的SortLabel和SortDirection?

huangapple go评论70阅读模式
英文:

How to dynamically change the MudTable's SortLabel and SortDirection in MudBlazor?

问题

我使用 MudBlazor 的 MudTable 创建了一个表格,通过 ServerData 属性从数据库检索数据,并支持排序、搜索和筛选功能。以下是代码的一部分。

@inject NavigationManager NavigationManager;
@inject HttpClient httpClient
@using BlazorApp1.Data

<MudTable @ref="itemTable" Dense="true" Hover="true" Striped="true" Bordered="true" Breakpoint="Breakpoint.Sm" ServerData="@(new Func<TableState, Task<TableData<Item>>>(ServerReload))">
    <NoRecordsContent>
        <MudButton @onclick="Refresh" Variant="Variant.Outlined" Color="Color.Info">
            Click here to reload data from database
        </MudButton>
    </NoRecordsContent>
    <ColGroup>
        <col style="width: 60px;" />
    </ColGroup>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="property_no_field" T="Item">Serial Number</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="name_field" T="Item">Name</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Serial Number"></MudTd>
        <MudTd DataLabel="Name"></MudTd>
    </RowTemplate>
    <LoadingContent>
        <MudText>Loading Data...</MudText>
    </LoadingContent>
</MudTable>

@code {
    private MudTheme Theme = new MudTheme();
    private MudTable<Item> itemTable { get; set; }
    private int totalItems = 0;

    private async Task<TableData<Item>> ServerReload(TableState state)
    {
        IEnumerable<Item> data = await httpClient.GetFromJsonAsync<List<Item>>(NavigationManager.BaseUri + "api/item");
        await Task.Delay(100);
        totalItems = data.Count();
        switch (state.SortLabel)
        {
            case "property_no_field":
                data = data.OrderByDirection(state.SortDirection, o => o.property_no);
                break;
            case "name_field":
                data = data.OrderByDirection(state.SortDirection, o => o.name);
                break;
        }
        return new TableData<Item>() { TotalItems = totalItems, Items = data };
    }
    private void Refresh()
    {
        // 需要在这里重置 SortLabel 和 SortDirection

        itemTable.ReloadServerData();
    }
}

我的问题是,除了点击列标题之外,是否有一种手动更改 MudTable 的 SortLabel 和 SortDirection 的方法?当我执行 MudTable.ReloadServerData() 时,表格的 SortLabel 和 SortDirection 没有重置,但我希望在表格从数据库重新加载数据时它们能够重置。

我尝试过使用 SortDirection 和 MudTableSortLabel 的 onClick 事件手动操作排序方向。

<MudTh>
    <MudTableSortLabel SortLabel="property_no_field" T="Item" SortDirection="dire" @onclick="@(() => { dire = ChangeDirection(dire); })">
        Serial Number
    </MudTableSortLabel>
</MudTh>

然而,当我重写 onClick 并点击列标题时,TableState 不会更新 SortDirection 和 SortLabel。这意味着我无法通过设置 SortDirection 和 onClick 事件来控制 TableState 所携带的 SortDirection 和 SortLabel。

英文:

I created a table using MudBlazor's MudTable, which retrieves data from the database through the ServerData property and supports sorting, searching, and filtering functionalities. Here's a portion of the code.

@inject NavigationManager NavigationManager;
@inject HttpClient httpClient
@using BlazorApp1.Data

&lt;MudTable @ref=&quot;itemTable&quot; Dense=&quot;true&quot; Hover=&quot;true&quot; Striped=&quot;true&quot; Bordered=&quot;true&quot; Breakpoint=&quot;Breakpoint.Sm&quot; ServerData=&quot;@(new Func&lt;TableState, Task&lt;TableData&lt;Item&gt;&gt;&gt;(ServerReload))&quot;&gt;
    &lt;NoRecordsContent&gt;
        &lt;MudButton @onclick=&quot;Refresh&quot; Variant=&quot;Variant.Outlined&quot; Color=&quot;Color.Info&quot;&gt;
            Click here to reload data from database
        &lt;/MudButton&gt;
    &lt;/NoRecordsContent&gt;
    &lt;ColGroup&gt;
        &lt;col style=&quot;width: 60px;&quot; /&gt;
    &lt;/ColGroup&gt;
    &lt;HeaderContent&gt;
        &lt;MudTh&gt;&lt;MudTableSortLabel SortLabel=&quot;property_no_field&quot; T=&quot;Item&quot;&gt;Serial Number&lt;/MudTableSortLabel&gt;&lt;/MudTh&gt;
        &lt;MudTh&gt;&lt;MudTableSortLabel SortLabel=&quot;name_field&quot; T=&quot;Item&quot;&gt;Name&lt;/MudTableSortLabel&gt;&lt;/MudTh&gt;
    &lt;/HeaderContent&gt;
    &lt;RowTemplate&gt;
        &lt;MudTd DataLabel=&quot;Serial Number&quot;&gt;&lt;/MudTd&gt;
        &lt;MudTd DataLabel=&quot;Name&quot;&gt;&lt;/MudTd&gt;
    &lt;/RowTemplate&gt;
    &lt;LoadingContent&gt;
        &lt;MudText&gt;Loding Data...&lt;/MudText&gt;
    &lt;/LoadingContent&gt;
&lt;/MudTable&gt;

@code {
    private MudTheme Theme = new MudTheme();
    private MudTable&lt;Item&gt; itemTable { get; set; }
    private int totalItems = 0;

    private async Task&lt;TableData&lt;Item&gt;&gt; ServerReload(TableState state)
    {
        IEnumerable&lt;Item&gt; data = await httpClient.GetFromJsonAsync&lt;List&lt;Item&gt;&gt;(NavigationManager.BaseUri + &quot;api/item&quot;);
        await Task.Delay(100);
        totalItems = data.Count();
            switch (state.SortLabel)
            {
                case &quot;property_no_field&quot;:
                    data = data.OrderByDirection(state.SortDirection, o =&gt; o.property_no);
                    break;
                case &quot;name_field&quot;:
                    data = data.OrderByDirection(state.SortDirection, o =&gt; o.name);
                    break;
            }
        return new TableData&lt;Item&gt;() { TotalItems = totalItems, Items = data };
    }
    private void Refresh()
    {
        // need to reset SortLabel and SortDirection here

        itemTable.ReloadServerData();
    }
}

My question is, is there a way to manually change the SortLabel and SortDirection of the MudTable, other than clicking on the Column Header? When I execute MudTable.ReloadServerData(), the SortLabel and SortDirection of the table are not reset, but I would like them to reset when the table reloads data from the database.

I have tried to manually manipulate the sorting direction using SortDirection and the onClick event in MudTableSortLabel.

&lt;MudTh&gt; &lt;MudTableSortLabel SortLabel=&quot;property_no_field&quot; T=&quot;Item&quot; SortDirection=dire @onclick=&quot;@(() =&gt; {dire = ChangeDirection(dire;})&quot;&gt; Serial Number &lt;MudTableSortLabel&gt; &lt;MudTh&gt;

However, when I override onClick and click on the Column Header, the TableState does not update SortDirection and SortLabel. This means that I cannot control the SortDirection and SortLabel that TableState carries through setting SortDirection and the onClick event.

答案1

得分: 0

首先,在MudTableSortLabel中设置InitialDirection

<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortLabel="property_no_field" T="Item">序列号</MudTableSortLabel></MudTh>

然后,在刷新时,您可以调用InitializeSorting() 来重置为InitialDirection

private void Refresh()
{
    // 需要在这里重置 SortLabel 和 SortDirection
    itemTable.TableContext.InitializeSorting();
    
    itemTable.ReloadServerData();
}
英文:

First set an InitialDirection in MudTableSortLabel :

&lt;MudTh&gt;&lt;MudTableSortLabel InitialDirection=&quot;SortDirection.Ascending&quot; SortLabel=&quot;property_no_field&quot; T=&quot;Item&quot;&gt;Serial Number&lt;/MudTableSortLabel&gt;&lt;/MudTh&gt;

Then, in Refresh, you can call InitializeSorting() to reset to the InitialDirection

private void Refresh()
{
    // need to reset SortLabel and SortDirection here
    itemTable.TableContext.InitializeSorting();
    
    itemTable.ReloadServerData();
}

huangapple
  • 本文由 发表于 2023年7月20日 10:33:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726325.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定