blazor - 使 MudBlazor 表的一行可点击?
问题描述
我用 MudBlazor 制作了这张桌子:
<MudTable ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))"
RowsPerPage="@_PageSize"
Dense="true"
Hover="true"
Bordered="false"
Striped="true"
Outlined="true"
Filter="new Func<DossierInfo,bool>(FilterFunc)" Elevation="0">
<ToolBarContent>
<MudTextField @bind-Value="searchString" Label="Ricerca" Placeholder="Digitare il testo da ricercare" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" />
<!--<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"></MudTextField>-->
</ToolBarContent>
<HeaderContent>
<MudTh>Tipo</MudTh>
<MudTh>Nr</MudTh>
<MudTh>Targa</MudTh>
<MudTh>Tipo veicolo</MudTh>
<MudTh>Marca</MudTh>
<MudTh>Modello</MudTh>
<MudTh>Km</MudTh>
<MudTh>Totale validato</MudTh>
<MudTh>Data apertura OL</MudTh>
<MudTh></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Tipo pratica"><MudIcon Icon="@DossierTypeIconService.GetDossierTypeIcon(context.Type)"></MudIcon></MudTd>
<MudTd DataLabel="Numero">@context.Number</MudTd>
<MudTd DataLabel="Targa">@context.VehiclePlate</MudTd>
<MudTd DataLabel="Tipo veicolo">@context.VehicleType</MudTd>
<MudTd DataLabel="Marca">@context.VehicleMake</MudTd>
<MudTd DataLabel="Modello">@context.VehicleModel</MudTd>
<MudTd DataLabel="Km">@context.VehicleKm</MudTd>
<MudTd DataLabel="Totale validato">@context.ValidatedTotalAmount</MudTd>
<MudTd DataLabel="Data apertura OL">@context.OpenedDate</MudTd>
<MudTd DataLabel="Azioni" Style="text-align:right">
<MudButton Variant="Variant.Filled" DisableElevation="true" Color="Color.Primary" Size="Size.Small" OnClick="@((e) => ToDossierDetail(@context.Id))"><strong>Apri</strong></MudButton>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="@_pageSizeOption" RowsPerPageString="Pratiche per pagina" />
</PagerContent>
我不知道这是否可能,但我想让表格的每一行完全可点击以访问每个档案的信息,而不是像现在那样使用 MudButton。我在 MudBlazor 主站点上进行了搜索,但没有找到任何关于此的内容。
解决方案
您可以使用 eventcallback OnRowClick
。
一个例子:
<MudTable
ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))"
T="YourT"
OnRowClick="@RowClicked">
// ...
</MudTable>
代码 :
public void RowClicked(TableRowClickEventArgs<YourT> p)
{
// Example:
NavigationManager.NavigateTo($"/DossierInfo/{p.Item.IdDossier}");
}
完整的 API 文档MudTable<T>
:https ://mudblazor.com/api/table
推荐阅读
- amazon-web-services - 如何限制 cognito 身份验证用户将 iot 策略附加到 cognito 身份?
- java - 使用带有 spring-boot 的 kotlin 时启用 Hystrix 会导致 NullPointerException
- java - 如何使用 Camel rest 获取 url 查询的 Map?
- excel - VBA 日期数组转置为字符串
- python - StringIO(HighSurrogate) 是否应该在 Python 2.7 中引发错误?
- karate - 使用 Runner.parallel 时未运行的功能
- amazon-web-services - 在 EMR 中添加 S3 同步步骤
- spring-integration - jpa入站通道适配器输出问题
- apache - 需要从 apache 访问日志中获取唯一的 url - 以及它们的计数
- php - php guzzle 一个简单的 R 包函数的 OpenCPU POST 请求在执行期间卡住了