Blazor:如何自动对MudBrazor表中的行进行编号

Question

我有一个ASP.NET Blazor服务器项目，它使用MudBrazor库来创建一个HTML表。我的问题是编号。在下面的示例代码中，行的编号是从类属性中检索的。然而，在我的类中，我没有number属性，并且在我打算在表中显示的所有类中都有数字属性是不好的。

由于该表接受项目列表，是否有一种方法可以获得正在渲染的项目的索引，并使用它而不是@context.Number来显示MudBrazor表中的行号？

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Sign</MudTh>
<MudTh>Name</MudTh>
<MudTh>Position</MudTh>
<MudTh>Molar mass</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
<MudTd DataLabel="Molar mass">@context.Molar</MudTd>
</RowTemplate>
</MudTable>
<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

这个示例代码可以在MudBlazor表中找到。

Answer 1

使用Linq的TakeWhile，您可以对元素进行计数，直到找到与当前所在行的元素匹配的元素：

<MudTable Items="@MyElements">
<HeaderContent>
<MudTh>Row</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd>@GetRowNumber(context)</MudTd>
</RowTemplate>
</MudTable>
@code{
public IEnumerable<object> MyElements => Elements.Take(4);
public int? GetRowNumber(object element) =>
MyElements?.TakeWhile(x => x != element).Count();
}

Answer 2

最好使用列表索引，因为在表中显示行号要简单得多。

@(Elements.IndexOf(context)+1)

<MudTable Items="@Elements" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Sign</MudTh>
<MudTh>Name</MudTh>
<MudTh>Position</MudTh>
<MudTh>Molar mass</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Nr">@(Elements.IndexOf(context)+1)</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
<MudTd DataLabel="Molar mass">@context.Molar</MudTd>
</RowTemplate>
</MudTable>

Answer 3

我提出的最简单但最有效的方法是使用表的RowClassFunc或RowStyleFunc属性。这种方法适用于客户端或服务器端的数据模式，包括分页、排序和过滤。

但是，此方法不适用于虚拟化表

诀窍是在从上述任何一个属性内部进行渲染之前设置每个项目的行号。

<MudTable ServerData="@(new Func<TableState, Task<TableData<Element>>>(ServerReload))"
@ref="table" RowClassFunc="@RowClassFunc">
<HeaderContent>
<MudTh>Nr</MudTh>
...
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
...
</RowTemplate>
...
</MudTable>

在代码中，创建函数：

private string RowClassFunc(Element element, int rowNumber)
{
element.Number = 1 + rowNumber + table.CurrentPage * table.RowsPerPage;
return string.Empty; // or any class name as per existing logic
}

元素属性Number是设置行号并在页面上显示的字段。

以下是测试链接：TryMudBlazor

Answer 4

好吧，有点粗糙但最简单的解决方案是将当前无数字对象映射到包含所需数字的模型
创建以下内容：

public class Model<T>
{
public int Number {get; set;}
public T Value {get; set;}
}

然后，根据您选择的某些属性对原始集合进行排序，并进行迭代，每次都创建新的Model对象，该对象具有原始对象的连续Number和Value
使用这个新模型作为表的显示数据源，一切都会很好。

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>

将成为

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Value.Sign</MudTd>
// etc...

再说一遍，这对眼睛来说有点粗糙，但会奏效的。

Answer 5

让我们使用一个计数器变量，并为每个行模板递增它我正在使用的一个示例：

<RowTemplate>
<MudTd DataLabel="#">@(rowIndex++)</MudTd>
...
</RowTemplate>
@code{
private int rowIndex = 1;
}