
Table 统计功能
用于数据统计
数据统计示例
设置 ShowFooter=true
显示 Footer
自定义合计功能
Demo
Table
组件有 TableFooter
模板,其数据上下文为 Table
组件的数据集合 IEnumerable<TItem>
TableFooter
模板中关联的上下文 context
值为当页数据集合
TableFooter
模板内可以自定义单元格 td
内容,也可以使用内置的 TableFooterCell
组件进行数据显示
设置 FooterTemplate
自定义表格底部显示内容
Demo
无数据时默认显示 Footer
可通过设置 IsHideFooterWhenNoData
参数隐藏 Footer
@page "/tables/footer"
<h3>Table 统计功能</h3>
<h4>用于数据统计</h4>
<DemoBlock Title="数据统计示例" Introduction="设置 <code>ShowFooter=true</code> 显示 <code>Footer</code> 自定义合计功能" Name="Statistics">
<p><code>Table</code> 组件有 <code>TableFooter</code> 模板,其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable<TItem></code></p>
<p><code>TableFooter</code> 模板中关联的上下文 <code>context</code> 值为当页数据集合</p>
<p><code>TableFooter</code> 模板内可以自定义单元格 <code>td</code> 内容,也可以使用内置的 <code>TableFooterCell</code> 组件进行数据显示</p>
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<TableFooter>
<TableFooterCell Text="合计:" colspan="3" Align="@Align" />
<TableFooterCell Aggregate="@Aggregate" Field="@nameof(Foo.Count)" />
</TableFooter>
</Table>
<div class="mt-3 btn-group">
<Button Icon="fa fa-align-left" Text="@Left" OnClick="() => Align = Alignment.Left" />
<Button Icon="fa fa-align-center" Text="@Center" OnClick="() => Align = Alignment.Center" />
<Button Icon="fa fa-align-right" Text="@Right" OnClick="() => Align = Alignment.Right" />
</div>
<div class="mt-3 btn-group">
<Button Text="Sum" OnClick="() => Aggregate = AggregateType.Sum" />
<Button Text="Average" OnClick="() => Aggregate = AggregateType.Average" />
<Button Text="Count" OnClick="() => Aggregate = AggregateType.Count" />
<Button Text="Min" OnClick="() => Aggregate = AggregateType.Min" />
<Button Text="Max" OnClick="() => Aggregate = AggregateType.Max" />
</div>
</DemoBlock>
<DemoBlock Title="Footer 模板" Introduction="设置 <code>FooterTemplate</code> 自定义表格底部显示内容" Name="FooterTemplate">
<p>无数据时默认显示 <code>Footer</code> 可通过设置 <code>@nameof(Table<Foo>.IsHideFooterWhenNoData)</code> 参数隐藏 <code>Footer</code></p>
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<FooterTemplate>
<tr>
<td colspan="4">
<div style="text-align: right;">
这里可以写一些描述性的语句
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="d-flex align-items-center justify-content-end" style="line-height: 3;">合计:</div>
</td>
<td>
<div class="footer-customer">
<div>
Average: @GetAverage(context)
</div>
<hr />
<div>
Sum: @GetSum(context)
</div>
</div>
</td>
</tr>
</FooterTemplate>
</Table>
</DemoBlock>
<style>
.footer-customer {
text-align: center;
color: #222;
}
.footer-demo hr {
margin: 0;
}
</style>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
///
/// </summary>
public sealed partial class TablesFooter
{
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesFooter>? LocalizerFooter { get; set; }
private static IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
[NotNull]
private IEnumerable<Foo>? Items { get; set; }
[NotNull]
private string? Left { get; set; }
[NotNull]
private string? Center { get; set; }
[NotNull]
private string? Right { get; set; }
private Alignment Align { get; set; }
private AggregateType Aggregate { get; set; }
/// <summary>
///
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
Left ??= LocalizerFooter[nameof(Left)];
Center ??= LocalizerFooter[nameof(Center)];
Right ??= LocalizerFooter[nameof(Right)];
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
// 设置记录总数
var total = Items.Count();
// 内存分页
var items = Items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsSorted = true,
IsFiltered = true,
IsSearch = true
});
}
private static double GetAverage(IEnumerable<Foo> items) => items.Any() ? items.Average(i => i.Count) : 0;
private static int GetSum(IEnumerable<Foo> items) => items.Any() ? items.Sum(i => i.Count) : 0;
}