英文:
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
<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>Loding 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()
{
// 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.
<MudTh> <MudTableSortLabel SortLabel="property_no_field" T="Item" SortDirection=dire @onclick="@(() => {dire = ChangeDirection(dire;})"> Serial Number <MudTableSortLabel> <MudTh>
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
:
<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortLabel="property_no_field" T="Item">Serial Number</MudTableSortLabel></MudTh>
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();
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论