显示明细行功能
用于展示父子关系表数据
简单应用
通过设置 DetailRowTemplate
模板设置明细行内容
Demo
明细行内显示绑定行的另外一个字段 学历
以普通文字形式呈现
Loading...
<Table TItem="BindItem"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<DetailRowTemplate>
<div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
</DetailRowTemplate>
</Table>
嵌套 Table 组件应用
通过设置 DetailRowTemplate
模板设置明细行为子表数据
Demo
明细行内嵌套另外一个 Table
组件,由于每行都要关联子表数据,出于性能的考虑,此功能采用 懒加载
模式,即点击展开按钮后,再对嵌套 Table
进行数据填充,通过 ShowDetailRow
回调委托可以控制每一行是否显示明细行,本例中通过 Complete
属性来控制是否显示明细行,可通过翻页来测试本功能
Loading...
<Table TItem="BindItem"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<DetailRowTemplate>
@{
var DetailDataSource = GetDetailRowsByName(context.Name ?? "");
}
<Table TItem="DetailRow" IsBordered="true" ShowToolbar="false" Items="@DetailDataSource">
<TableColumns Context="Detail">
<TableColumn @bind-Field="@Detail.Name" />
<TableColumn @bind-Field="@Detail.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Complete" Width="70">
<Template Context="v">
<Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
</Template>
</TableColumn>
</TableColumns>
</Table>
</DetailRowTemplate>
</Table>
@code {
private IEnumerable<DetailRow> GetDetailRowsByName(string name) => Enumerable.Range(1, 4).Select(i => new DetailRow()
{
Id = i,
Name = name,
DateTime = DateTime.Now.AddDays(i - 1),
Complete = random.Next(1, 100) > 50
});
private class DetailRow
{
[DisplayName("主键")]
public int Id { get; set; }
[DisplayName("培训课程")]
public string Name { get; set; } = "";
[DisplayName("日期")]
public DateTime DateTime { get; set; }
[DisplayName("是/否")]
public bool Complete { get; set; }
}
}
固定表头开启明细行功能
通过设置 Height
固定表头后模板设置明细行内容
Demo
本例中固定表头后,再开启明细行功能
Loading...
<Table TItem="BindItem" Height="200"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<DetailRowTemplate>
<div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
</DetailRowTemplate>
</Table>
明细行中使用 Tab 组件
通过设置 DetailRowTemplate
模板设置明细行内容
Demo
本例中明细行内使用 Tab
组件再次将数据分割成两个 TabItem
内容,进行再次数据拆分演示
Loading...
<Table TItem="BindItem" IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<DetailRowTemplate>
<Tab>
<TabItem Text="明细数据">
@{
// 此段代码为提高性能
var cacheKey = context.Name ?? "";
var DetailDataSource = Enumerable.Empty<DetailRow>();
if (Cache.ContainsKey(cacheKey))
{
DetailDataSource = Cache[cacheKey];
}
else
{
DetailDataSource = GetDetailRowsByName(cacheKey).ToList();
Cache.Add(cacheKey, DetailDataSource);
}
}
<Table TItem="DetailRow" IsBordered="true" ShowToolbar="false" Items="@DetailDataSource">
<TableColumns Context="Detail">
<TableColumn @bind-Field="@Detail.Name" />
<TableColumn @bind-Field="@Detail.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Complete" Width="70">
<Template Context="v">
<Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
</Template>
</TableColumn>
</TableColumns>
</Table>
</TabItem>
<TabItem Text="关联数据">
<div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
</TabItem>
</Tab>
</DetailRowTemplate>
</Table>