Skip to content

Commit 5c6d7f5

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3778 doc(#I6B4SN): update TablePage demos
* update tablepage demos
1 parent 1825080 commit 5c6d7f5

5 files changed

Lines changed: 93 additions & 52 deletions

File tree

src/BootstrapBlazor.Shared/Samples/Table/TablesPages.razor.cs renamed to src/BootstrapBlazor.Shared/Demos/Table/TablesPage/TablesPagePagination.razor

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
2-
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3-
// Website: https://www.blazor.zone or https://argozhang.github.io/
4-
5-
namespace BootstrapBlazor.Shared.Samples.Table;
6-
7-
/// <summary>
8-
/// Table
9-
/// </summary>
10-
public partial class TablesPages
11-
{
12-
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20, 40, 80, 100 };
13-
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo"
5+
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
6+
<TableColumns>
7+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
8+
<TableColumn @bind-Field="@context.Name" />
9+
<TableColumn @bind-Field="@context.Address" />
10+
</TableColumns>
11+
</Table>
12+
</div>
13+
14+
@code {
15+
/// <summary>
16+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
17+
/// Foo class is used for Demo test, please download the source code if necessary
18+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
19+
/// </summary>
1420
[NotNull]
1521
private List<Foo>? Items { get; set; }
1622

17-
[Inject]
18-
[NotNull]
19-
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
20-
21-
[Inject]
22-
[NotNull]
23-
private IStringLocalizer<TablesPages>? Localizer { get; set; }
23+
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20, 40, 80, 100 };
2424

2525
/// <summary>
2626
/// OnInitialized

‎src/BootstrapBlazor.Shared/Demos/Table/TablesPage/TablesPageShowTopPagination.razor‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo"
5+
IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" PageItems="10" OnQueryAsync="@OnQueryAsync">
6+
<TableColumns>
7+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
8+
<TableColumn @bind-Field="@context.Name" />
9+
<TableColumn @bind-Field="@context.Address" />
10+
</TableColumns>
11+
</Table>
12+
</div>
13+
14+
@code {
15+
/// <summary>
16+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
17+
/// Foo class is used for Demo test, please download the source code if necessary
18+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
19+
/// </summary>
20+
[NotNull]
21+
private List<Foo>? Items { get; set; }
22+
23+
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20, 40, 80, 100 };
24+
25+
/// <summary>
26+
/// OnInitialized
27+
/// </summary>
28+
protected override void OnInitialized()
29+
{
30+
base.OnInitialized();
31+
32+
Items = Foo.GenerateFoo(LocalizerFoo);
33+
}
34+
35+
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
36+
{
37+
IEnumerable<Foo> items = Items;
38+
var total = items.Count();
39+
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
40+
41+
return Task.FromResult(new QueryData<Foo>()
42+
{
43+
Items = items,
44+
TotalCount = total,
45+
IsSorted = true,
46+
IsFiltered = true,
47+
IsSearch = true
48+
});
49+
}
50+
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,12 @@
8787
"P4": "Use the <code>IDynamicObject</code> data collection as the data source by setting the <code>Items</code> data source"
8888
},
8989
"BootstrapBlazor.Shared.Samples.Table.TablesPages": {
90-
"H1": "Table",
91-
"H2": "It is used to display multiple pieces of data with similar structure, and the data can be sorted, filtered, compared or other custom operations.",
92-
"P1": "Pagination table",
93-
"P2": "Set <code>IsPagination</code> to display the pagination component",
94-
"P3": "Show on top",
95-
"P4": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component"
90+
"TablesPagesTitle": "Table",
91+
"TablesPagesDescription": "It is used to display multiple pieces of data with similar structure, and the data can be sorted, filtered, compared or other custom operations.",
92+
"TablesPagePaginationTitle": "Pagination table",
93+
"TablesPagePaginationIntro": "Set <code>IsPagination</code> to display the pagination component",
94+
"TablesPageShowTopPaginationTitle": "Show on top",
95+
"TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component"
9696
},
9797
"BootstrapBlazor.Shared.Samples.Table.TablesFixedColumn": {
9898
"H1": "Fixed column",

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,12 @@
8787
"P4": "通过设置 <code>Items</code> 数据源，使用 <code>IDynamicObject</code> 数据集合作为数据源"
8888
},
8989
"BootstrapBlazor.Shared.Samples.Table.TablesPages": {
90-
"H1": "Table 表格",
91-
"H2": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
92-
"P1": "分页表格",
93-
"P2": "设置 <code>IsPagination</code> 显示分页组件",
94-
"P3": "显示在顶端",
95-
"P4": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件"
90+
"TablesPagesTitle": "Table 表格",
91+
"TablesPagesDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
92+
"TablesPagePaginationTitle": "分页表格",
93+
"TablesPagePaginationIntro": "设置 <code>IsPagination</code> 显示分页组件",
94+
"TablesPageShowTopPaginationTitle": "显示在顶端",
95+
"TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件"
9696
},
9797
"BootstrapBlazor.Shared.Samples.Table.TablesFixedColumn": {
9898
"H1": "固定列功能",

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

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
@page "/tables/pages"
2+
@inject IStringLocalizer<TablesPages> Localizer
23

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

6-
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="PaginationTable">
7-
<Table TItem="Foo"
8-
IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
9-
<TableColumns>
10-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
11-
<TableColumn @bind-Field="@context.Name" />
12-
<TableColumn @bind-Field="@context.Address" />
13-
</TableColumns>
14-
</Table>
7+
<DemoBlock Title="@Localizer["TablesPagePaginationTitle"]"
8+
Introduction="@Localizer["TablesPagePaginationIntro"]"
9+
Name="Pagination"
10+
Demo="typeof(Demos.Table.TablesPage.TablesPagePagination)">
1511
</DemoBlock>
1612

17-
<DemoBlock Title="@Localizer["P3"]" Introduction="@Localizer["P4"]" Name="ShowTopPagination">
18-
<Table TItem="Foo"
19-
IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" PageItems="10" OnQueryAsync="@OnQueryAsync">
20-
<TableColumns>
21-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
22-
<TableColumn @bind-Field="@context.Name" />
23-
<TableColumn @bind-Field="@context.Address" />
24-
</TableColumns>
25-
</Table>
13+
<DemoBlock Title="@Localizer["TablesPageShowTopPaginationTitle"]"
14+
Introduction="@Localizer["TablesPageShowTopPaginationIntro"]"
15+
Name="ShowTopPagination"
16+
Demo="typeof(Demos.Table.TablesPage.TablesPageShowTopPagination)">
2617
</DemoBlock>

0 commit comments

Comments
 (0)