Skip to content

Commit f66a332

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3781 doc(#I6B4W3): update TableFooter demos
* update TableFooter demos
1 parent c53f87b commit f66a332

8 files changed

Lines changed: 253 additions & 169 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/Table/TablesFooter/TablesFooterStatistics.razor‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@inject IStringLocalizer<TablesFooterStatistics> Localizer
2+
@inject IStringLocalizer<Foo> LocalizerFoo
3+
4+
<div>
5+
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
6+
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
9+
<TableColumn @bind-Field="@context.Name" />
10+
<TableColumn @bind-Field="@context.Address" />
11+
<TableColumn @bind-Field="@context.Count" />
12+
</TableColumns>
13+
<TableFooter>
14+
<TableFooterCell Text="@Localizer["TablesFooterStatisticsCellText"]" colspan="3" Align="@Align" />
15+
<TableFooterCell Aggregate="@Aggregate" Field="@nameof(Foo.Count)" />
16+
</TableFooter>
17+
</Table>
18+
<div class="mt-3 btn-group">
19+
<Button Icon="fa-solid fa-align-left" Text="@Left" OnClick="() => Align = Alignment.Left" />
20+
<Button Icon="fa-solid fa-align-center" Text="@Center" OnClick="() => Align = Alignment.Center" />
21+
<Button Icon="fa-solid fa-align-right" Text="@Right" OnClick="() => Align = Alignment.Right" />
22+
</div>
23+
<div class="mt-3 btn-group">
24+
<Button Text="Sum" OnClick="() => Aggregate = AggregateType.Sum" />
25+
<Button Text="Average" OnClick="() => Aggregate = AggregateType.Average" />
26+
<Button Text="Count" OnClick="() => Aggregate = AggregateType.Count" />
27+
<Button Text="Min" OnClick="() => Aggregate = AggregateType.Min" />
28+
<Button Text="Max" OnClick="() => Aggregate = AggregateType.Max" />
29+
</div>
30+
</div>
31+
32+
@code {
33+
34+
private static IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
35+
36+
/// <summary>
37+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
38+
/// Foo class is used for Demo test, please download the source code if necessary
39+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
40+
/// </summary>
41+
[NotNull]
42+
private IEnumerable<Foo>? Items { get; set; }
43+
44+
[NotNull]
45+
private string? Left { get; set; }
46+
47+
[NotNull]
48+
private string? Center { get; set; }
49+
50+
[NotNull]
51+
private string? Right { get; set; }
52+
53+
private Alignment Align { get; set; }
54+
55+
private AggregateType Aggregate { get; set; }
56+
57+
/// <summary>
58+
/// OnInitialized
59+
/// </summary>
60+
protected override void OnInitialized()
61+
{
62+
base.OnInitialized();
63+
64+
Items = Foo.GenerateFoo(LocalizerFoo);
65+
Left ??= nameof(Left);
66+
Center ??= nameof(Center);
67+
Right ??= nameof(Right);
68+
}
69+
70+
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
71+
{
72+
// 设置记录总数
73+
var total = Items.Count();
74+
75+
// 内存分页
76+
var items = Items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
77+
78+
return Task.FromResult(new QueryData<Foo>()
79+
{
80+
Items = items,
81+
TotalCount = total,
82+
IsSorted = true,
83+
IsFiltered = true,
84+
IsSearch = true
85+
});
86+
}
87+
88+
private static double GetAverage(IEnumerable<Foo> items) => items.Any() ? items.Average(i => i.Count) : 0;
89+
90+
private static int GetSum(IEnumerable<Foo> items) => items.Any() ? items.Sum(i => i.Count) : 0;
91+
}

src/BootstrapBlazor.Shared/Samples/Table/TablesFooter.razor.css renamed to src/BootstrapBlazor.Shared/Demos/Table/TablesFooter/TablesFooterStatistics.razor.css

File renamed without changes.

‎src/BootstrapBlazor.Shared/Demos/Table/TablesFooter/TablesFooterTemplate.razor‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@inject IStringLocalizer<TablesFooterTemplate> Localizer
2+
@inject IStringLocalizer<Foo> LocalizerFoo
3+
4+
<div>
5+
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
6+
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
9+
<TableColumn @bind-Field="@context.Name" />
10+
<TableColumn @bind-Field="@context.Address" />
11+
<TableColumn @bind-Field="@context.Count" />
12+
</TableColumns>
13+
<FooterTemplate>
14+
<tr>
15+
<td colspan="4">
16+
<div style="text-align: right;">
17+
<span>@Localizer["TablesFooterTemplateSentences"]</span>
18+
</div>
19+
</td>
20+
</tr>
21+
<tr>
22+
<td colspan="3">
23+
<div class="d-flex align-items-center justify-content-end" style="line-height: 3;">@Localizer["TablesFooterTemplateTotal"]</div>
24+
</td>
25+
<td>
26+
<div class="footer-customer">
27+
<div>
28+
Average: @GetAverage(context)
29+
</div>
30+
<hr />
31+
<div>
32+
Sum: @GetSum(context)
33+
</div>
34+
</div>
35+
</td>
36+
</tr>
37+
</FooterTemplate>
38+
</Table>
39+
</div>
40+
41+
@code {
42+
private static IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
43+
44+
/// <summary>
45+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
46+
/// Foo class is used for Demo test, please download the source code if necessary
47+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
48+
/// </summary>
49+
[NotNull]
50+
private IEnumerable<Foo>? Items { get; set; }
51+
52+
[NotNull]
53+
private string? Left { get; set; }
54+
55+
[NotNull]
56+
private string? Center { get; set; }
57+
58+
[NotNull]
59+
private string? Right { get; set; }
60+
61+
private Alignment Align { get; set; }
62+
63+
private AggregateType Aggregate { get; set; }
64+
65+
/// <summary>
66+
/// OnInitialized
67+
/// </summary>
68+
protected override void OnInitialized()
69+
{
70+
base.OnInitialized();
71+
72+
Items = Foo.GenerateFoo(LocalizerFoo);
73+
Left ??= nameof(Left);
74+
Center ??= nameof(Center);
75+
Right ??= nameof(Right);
76+
}
77+
78+
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
79+
{
80+
// 设置记录总数
81+
var total = Items.Count();
82+
83+
// 内存分页
84+
var items = Items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
85+
86+
return Task.FromResult(new QueryData<Foo>()
87+
{
88+
Items = items,
89+
TotalCount = total,
90+
IsSorted = true,
91+
IsFiltered = true,
92+
IsSearch = true
93+
});
94+
}
95+
96+
private static double GetAverage(IEnumerable<Foo> items) => items.Any() ? items.Average(i => i.Count) : 0;
97+
98+
private static int GetSum(IEnumerable<Foo> items) => items.Any() ? items.Sum(i => i.Count) : 0;
99+
}

‎src/BootstrapBlazor.Shared/Demos/Table/TablesFooter/TablesFooterTemplate.razor.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.footer-customer {
2+
text-align: center;
3+
color: #222;
4+
}
5+
6+
.footer-demo hr {
7+
margin: 0;
8+
}
9+
10+
.footer-demo tfoot tr,
11+
.footer-demo .table-row.table-footer .table-cell {
12+
color: #409eff;
13+
font-weight: bold;
14+
}

‎src/BootstrapBlazor.Shared/Locales/en.json‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5406,19 +5406,23 @@
54065406
"TablesTrackingNormaltips2": "All data editing in this mode edits the original data and updates the data source through <code>bind-Items</code>, so no <b>Cancel</b> button is provided"
54075407
},
54085408
"BootstrapBlazor.Shared.Samples.Table.TablesFooter": {
5409-
"H1": "Table Footer",
5410-
"H2": "For statistics",
5411-
"P1": "Statistics example",
5412-
"P2": "Set <code>ShowFooter=true</code> to show <code>Footer</code> custom total function",
5413-
"P3": "The <code>Table</code> component has a <code>TableFooter</code> template whose data context is the data collection of the <code>Table</code> component <code>IEnumerable&lt;TItem&gt;</code>",
5414-
"P4": "The associated context in the <code>TableFooter</code> template <code>context</code> is the current page data collection",
5415-
"P5": "The content of the cell <code>td</code> can be customized in the <code>TableFooter</code> template, or the built-in <code>TableFooterCell</code> component can be used for data display",
5416-
"P6": "Total:",
5417-
"P7": "Footer template",
5418-
"P8": "Set <code>FooterTemplate</code> to customize the content displayed at the bottom of the table",
5419-
"P9": "<code>Footer</code> is displayed by default when there is no data. You can hide <code>Footer</code> by setting the <code>@nameof(Table<Foo>.IsHideFooterWhenNoData)</code> parameter",
5420-
"P10": "Here you can write some descriptive sentences",
5421-
"P11": "Total:"
5409+
"TablesFooterTitle": "Table Footer",
5410+
"TablesFooterDescription": "For statistics",
5411+
"TablesFooterStatisticsTitle": "Statistics example",
5412+
"TablesFooterStatisticsIntro": "Set <code>ShowFooter=true</code> to show <code>Footer</code> custom total function",
5413+
"TablesFooterStatisticsTips1": "The <code>Table</code> component has a <code>TableFooter</code> template whose data context is the data collection of the <code>Table</code> component <code>IEnumerable&lt;TItem&gt;</code>",
5414+
"TablesFooterStatisticsTips2": "The associated context in the <code>TableFooter</code> template <code>context</code> is the current page data collection",
5415+
"TablesFooterStatisticsTips3": "The content of the cell <code>td</code> can be customized in the <code>TableFooter</code> template, or the built-in <code>TableFooterCell</code> component can be used for data display",
5416+
"TablesFooterTemplateTaitle": "Footer template",
5417+
"TablesFooterTemplateIntro": "Set <code>FooterTemplate</code> to customize the content displayed at the bottom of the table",
5418+
"TablesFooterTemplateDescription": "<code>Footer</code> is displayed by default when there is no data. You can hide <code>Footer</code> by setting the <code>@nameof(Table<Foo>.IsHideFooterWhenNoData)</code> parameter",
5419+
},
5420+
"BootstrapBlazor.Shared.Demos.Table.TablesFooter.TablesFooterStatistics": {
5421+
"TablesFooterStatisticsCellText": "Total:"
5422+
},
5423+
"BootstrapBlazor.Shared.Demos.Table.TablesFooter.TablesFooterTemplate": {
5424+
"TablesFooterTemplateSentences": "Here you can write some descriptive sentences",
5425+
"TablesFooterTemplateTotal": "Total:"
54225426
},
54235427
"BootstrapBlazor.Shared.Samples.Table.TablesAutoRefresh": {
54245428
"TablesAutoRefreshTitle": "Auto Refresh table",

‎src/BootstrapBlazor.Shared/Locales/zh.json‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4984,19 +4984,23 @@
49844984
"TF15": "曾曾孙菜单三"
49854985
},
49864986
"BootstrapBlazor.Shared.Samples.Table.TablesFooter": {
4987-
"H1": "Table 统计功能",
4988-
"H2": "用于数据统计",
4989-
"P1": "数据统计示例",
4990-
"P2": "设置 <code>ShowFooter=true</code> 显示 <code>Footer</code> 自定义合计功能",
4991-
"P3": "<code>Table</code> 组件有 <code>TableFooter</code> 模板，其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable&lt;TItem&gt;</code>",
4992-
"P4": "<code>TableFooter</code> 模板中关联的上下文 <code>context</code> 值为当页数据集合",
4993-
"P5": "<code>TableFooter</code> 模板内可以自定义单元格 <code>td</code> 内容，也可以使用内置的 <code>TableFooterCell</code> 组件进行数据显示",
4994-
"P6": "合计：",
4995-
"P7": "Footer 模板",
4996-
"P8": "设置 <code>FooterTemplate</code> 自定义表格底部显示内容",
4997-
"P9": "无数据时默认显示 <code>Footer</code> 可通过设置 <code>@nameof(Table<Foo>.IsHideFooterWhenNoData)</code> 参数隐藏 <code>Footer</code>",
4998-
"P10": "这里可以写一些描述性的语句",
4999-
"P11": "合计："
4987+
"TablesFooterTitle": "Table 统计功能",
4988+
"TablesFooterDescription": "用于数据统计",
4989+
"TablesFooterStatisticsTitle": "数据统计示例",
4990+
"TablesFooterStatisticsIntro": "设置 <code>ShowFooter=true</code> 显示 <code>Footer</code> 自定义合计功能",
4991+
"TablesFooterStatisticsTips1": "<code>Table</code> 组件有 <code>TableFooter</code> 模板，其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable&lt;TItem&gt;</code>",
4992+
"TablesFooterStatisticsTips2": "<code>TableFooter</code> 模板中关联的上下文 <code>context</code> 值为当页数据集合",
4993+
"TablesFooterStatisticsTips3": "<code>TableFooter</code> 模板内可以自定义单元格 <code>td</code> 内容，也可以使用内置的 <code>TableFooterCell</code> 组件进行数据显示",
4994+
"TablesFooterTemplateTaitle": "Footer 模板",
4995+
"TablesFooterTemplateIntro": "设置 <code>FooterTemplate</code> 自定义表格底部显示内容",
4996+
"TablesFooterTemplateDescription": "无数据时默认显示 <code>Footer</code> 可通过设置 <code>@nameof(Table<Foo>.IsHideFooterWhenNoData)</code> 参数隐藏 <code>Footer</code>",
4997+
},
4998+
"BootstrapBlazor.Shared.Demos.Table.TablesFooter.TablesFooterStatistics": {
4999+
"TablesFooterStatisticsCellText": "合计："
5000+
},
5001+
"BootstrapBlazor.Shared.Demos.Table.TablesFooter.TablesFooterTemplate": {
5002+
"TablesFooterTemplateSentences": "这里可以写一些描述性的语句",
5003+
"TablesFooterTemplateTotal": "合计："
50005004
},
50015005
"BootstrapBlazor.Shared.Samples.Table.TablesDetailRow": {
50025006
"DetailTextTrue": "关闭明细行",

‎src/BootstrapBlazor.Shared/Samples/Table/TablesFooter.razor‎

Lines changed: 15 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,21 @@
11
@page "/tables/footer"
2+
@inject IStringLocalizer<TablesFooter> Localizer
23

3-
<h3>@Localizer["H1"]</h3>
4-
<h4>@Localizer["H2"]</h4>
4+
<h3>@Localizer["TablesFooterTitle"]</h3>
5+
<h4>@Localizer["TablesFooterDescription"]</h4>
56

6-
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Statistics">
7-
<p>@((MarkupString)Localizer["P3"].Value)</p>
8-
<p>@((MarkupString)Localizer["P4"].Value)</p>
9-
<p>@((MarkupString)Localizer["P5"].Value)</p>
10-
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
11-
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
12-
<TableColumns>
13-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
14-
<TableColumn @bind-Field="@context.Name" />
15-
<TableColumn @bind-Field="@context.Address" />
16-
<TableColumn @bind-Field="@context.Count" />
17-
</TableColumns>
18-
<TableFooter>
19-
<TableFooterCell Text="@Localizer["P6"]" colspan="3" Align="@Align" />
20-
<TableFooterCell Aggregate="@Aggregate" Field="@nameof(Foo.Count)" />
21-
</TableFooter>
22-
</Table>
23-
<div class="mt-3 btn-group">
24-
<Button Icon="fa-solid fa-align-left" Text="@Left" OnClick="() => Align = Alignment.Left" />
25-
<Button Icon="fa-solid fa-align-center" Text="@Center" OnClick="() => Align = Alignment.Center" />
26-
<Button Icon="fa-solid fa-align-right" Text="@Right" OnClick="() => Align = Alignment.Right" />
27-
</div>
28-
<div class="mt-3 btn-group">
29-
<Button Text="Sum" OnClick="() => Aggregate = AggregateType.Sum" />
30-
<Button Text="Average" OnClick="() => Aggregate = AggregateType.Average" />
31-
<Button Text="Count" OnClick="() => Aggregate = AggregateType.Count" />
32-
<Button Text="Min" OnClick="() => Aggregate = AggregateType.Min" />
33-
<Button Text="Max" OnClick="() => Aggregate = AggregateType.Max" />
34-
</div>
7+
<DemoBlock Title="@Localizer["TablesFooterStatisticsTitle"]"
8+
Introduction="@Localizer["TablesFooterStatisticsIntro"]"
9+
Name="Statistics"
10+
Demo="typeof(Demos.Table.TablesFooter.TablesFooterStatistics)">
11+
<p>@((MarkupString)Localizer["TablesFooterStatisticsTips1"].Value)</p>
12+
<p>@((MarkupString)Localizer["TablesFooterStatisticsTips2"].Value)</p>
13+
<p>@((MarkupString)Localizer["TablesFooterStatisticsTips3"].Value)</p>
3514
</DemoBlock>
3615

37-
<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="FooterTemplate">
38-
<p>@((MarkupString)Localizer["P9"].Value)</p>
39-
<Table TItem="Foo" ShowFooter="true" class="footer-demo"
40-
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
41-
<TableColumns>
42-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
43-
<TableColumn @bind-Field="@context.Name" />
44-
<TableColumn @bind-Field="@context.Address" />
45-
<TableColumn @bind-Field="@context.Count" />
46-
</TableColumns>
47-
<FooterTemplate>
48-
<tr>
49-
<td colspan="4">
50-
<div style="text-align: right;">
51-
<span>@Localizer["P10"]</span>
52-
</div>
53-
</td>
54-
</tr>
55-
<tr>
56-
<td colspan="3">
57-
<div class="d-flex align-items-center justify-content-end" style="line-height: 3;">@Localizer["P11"]</div>
58-
</td>
59-
<td>
60-
<div class="footer-customer">
61-
<div>
62-
Average: @GetAverage(context)
63-
</div>
64-
<hr />
65-
<div>
66-
Sum: @GetSum(context)
67-
</div>
68-
</div>
69-
</td>
70-
</tr>
71-
</FooterTemplate>
72-
</Table>
16+
<DemoBlock Title="@Localizer["TablesFooterTemplateTaitle"]"
17+
Introduction="@Localizer["TablesFooterTemplateIntro"]"
18+
Name="Template"
19+
Demo="typeof(Demos.Table.TablesFooter.TablesFooterTemplate)">
20+
<p>@((MarkupString)Localizer["TablesFooterTemplateDescription"].Value)</p>
7321
</DemoBlock>

0 commit comments

Comments
 (0)