Skip to content

Commit 2e1a764

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3766 doc(#I6AMH6): update the table component virtualize demos
* update the table component virtualize demos
1 parent 18a4659 commit 2e1a764

8 files changed

Lines changed: 114 additions & 85 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/Table/Virtualization/VirtualizationDynamic.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div class="table-virtualize-demo">
4+
<Table TItem="Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
7+
<TableColumn @bind-Field="@context.Name" />
8+
<TableColumn @bind-Field="@context.Address" Readonly="true" />
9+
<TableColumn @bind-Field="@context.Education" />
10+
<TableColumn @bind-Field="@context.Count" Editable="false" />
11+
<TableColumn @bind-Field="@context.Complete" />
12+
</TableColumns>
13+
</Table>
14+
</div>
15+
16+
@code {
17+
/// <summary>
18+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
19+
/// Foo class is used for Demo test, please download the source code if necessary
20+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
21+
/// </summary>
22+
[NotNull]
23+
private List<Foo>? Items { get; set; }
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 async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
36+
{
37+
await Task.Delay(200);
38+
var items = Items.Skip(options.StartIndex).Take(options.PageItems);
39+
return new QueryData<Foo>()
40+
{
41+
Items = items,
42+
TotalCount = Items.Count
43+
};
44+
}
45+
}

src/BootstrapBlazor.Shared/Samples/Table/TablesVirtualization.razor.css renamed to src/BootstrapBlazor.Shared/Demos/Table/Virtualization/VirtualizationDynamic.razor.css

File renamed without changes.

‎src/BootstrapBlazor.Shared/Demos/Table/Virtualization/VirtualizationNormal.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div class="table-virtualize-demo">
4+
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
7+
<TableColumn @bind-Field="@context.Name" />
8+
<TableColumn @bind-Field="@context.Address" Readonly="true" />
9+
<TableColumn @bind-Field="@context.Education" />
10+
<TableColumn @bind-Field="@context.Count" Editable="false" />
11+
<TableColumn @bind-Field="@context.Complete" />
12+
</TableColumns>
13+
</Table>
14+
</div>
15+
16+
@code {
17+
/// <summary>
18+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
19+
/// Foo class is used for Demo test, please download the source code if necessary
20+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
21+
/// </summary>
22+
[NotNull]
23+
private List<Foo>? Items { get; set; }
24+
25+
/// <summary>
26+
/// OnInitialized
27+
/// </summary>
28+
protected override void OnInitialized()
29+
{
30+
base.OnInitialized();
31+
32+
Items = Foo.GenerateFoo(LocalizerFoo);
33+
}
34+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Virtualization/VirtualizationNormal.razor.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.table-virtualize-demo {
2+
height: 400px;
3+
}
4+
5+
.table-virtualize-demo .table-cell {
6+
white-space: nowrap;
7+
overflow: hidden;
8+
text-overflow: ellipsis;
9+
}
10+
11+
.table-virtualize-demo .table-fixed-body {
12+
overflow-x: hidden !important;
13+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5262,14 +5262,14 @@
52625262
"FooterTemplateDesc": "Click the Edit button in the table to pop up the Edit pop-up window. The buttons in the pop-up window <code>Footer</code> are user-defined buttons. In order to keep the functions of the original <b>Close</b> and <b>Save</b> buttons while facilitating the second opening, two corresponding components <code>DialogCloseButton</code> <code>DialogSaveButton</code> These two buttons do not need to write the click related processing methods"
52635263
},
52645264
"BootstrapBlazor.Shared.Samples.Table.TablesVirtualization": {
5265-
"H1": "Table virtual scroll row",
5266-
"H2": "When the Table component displays large data, it usually uses paging to load data. There is also a virtual row technology similar to the automatic loading of data in the background when the mobile phone scrolls to the bottom.",
5267-
"P1": "Normal use",
5268-
"P2": "Background on-demand loading when scrolling data without paging",
5269-
"P3": "Need to set <code>ScrollMode</code> <code>Height</code> <code>RowHeight</code> <code>PageItems</code> parameters to set virtual scrolling",
5270-
"P4": "Get data dynamically",
5271-
"P5": "Background on-demand loading when scrolling data without paging",
5272-
"P6": "Display row placeholders when scrolling quickly to improve user experience"
5265+
"TablesVirtualizationTitle": "Table virtual scroll row",
5266+
"TablesVirtualizationDescription": "When the Table component displays large data, it usually uses paging to load data. There is also a virtual row technology similar to the automatic loading of data in the background when the mobile phone scrolls to the bottom.",
5267+
"VirtualizationNormalTitle": "Normal use",
5268+
"VirtualizationNormalIntro": "Background on-demand loading when scrolling data without paging",
5269+
"VirtualizationNormalDescription": "Need to set <code>ScrollMode</code> <code>Height</code> <code>RowHeight</code> <code>PageItems</code> parameters to set virtual scrolling",
5270+
"VirtualizationDynamicTitle": "Get data dynamically",
5271+
"VirtualizationDynamicIntro": "Background on-demand loading when scrolling data without paging",
5272+
"VirtualizationDynamicDescription": "Display row placeholders when scrolling quickly to improve user experience"
52735273
},
52745274
"BootstrapBlazor.Shared.Samples.Table.TablesLoading": {
52755275
"H1": "Display data loading function",

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5292,14 +5292,14 @@
52925292
"FooterTemplateDesc": "点击表格内编辑按钮，弹出编辑弹窗，弹窗内 <code>Footer</code> 内按钮均为自定义按钮。为方便二开的同时保留原有 <b>关闭</b> 与 <b>保存</b> 两个按钮功能，额外内置提供了两个与之相对应的组件 <code>DialogCloseButton</code> <code>DialogSaveButton</code> 这两个按钮无需编写点击相关处理方法"
52935293
},
52945294
"BootstrapBlazor.Shared.Samples.Table.TablesVirtualization": {
5295-
"H1": "Table 虚拟滚动行",
5296-
"H2": "Table 组件显示大数据时通常采用分页加载数据，还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据",
5297-
"P1": "正常使用",
5298-
"P2": "无需分页滚动数据时后台按需加载",
5299-
"P3": "需要设置 <code>ScrollMode</code> <code>Height</code> <code>RowHeight</code> <code>PageItems</code> 参数对虚拟滚动进行设置",
5300-
"P4": "动态获取数据",
5301-
"P5": "无需分页滚动数据时后台按需加载",
5302-
"P6": "快速滚动时显示行占位，提升用户体验"
5295+
"TablesVirtualizationTitle": "Table 虚拟滚动行",
5296+
"TablesVirtualizationDescription": "Table 组件显示大数据时通常采用分页加载数据，还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据",
5297+
"VirtualizationNormalTitle": "正常使用",
5298+
"VirtualizationNormalIntro": "无需分页滚动数据时后台按需加载",
5299+
"VirtualizationNormalDescription": "需要设置 <code>ScrollMode</code> <code>Height</code> <code>RowHeight</code> <code>PageItems</code> 参数对虚拟滚动进行设置",
5300+
"VirtualizationDynamicTitle": "动态获取数据",
5301+
"VirtualizationDynamicIntro": "无需分页滚动数据时后台按需加载",
5302+
"VirtualizationDynamicDescription": "快速滚动时显示行占位，提升用户体验"
53035303
},
53045304
"BootstrapBlazor.Shared.Samples.Table.TablesLoading": {
53055305
"H1": "显示数据加载功能",

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

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,13 @@
22
@page "/tables/virtualization"
33
@inject IStringLocalizer<TablesVirtualization> Localizer
44

5-
<h3>@Localizer["H1"]</h3>
6-
<h4>@Localizer["H2"]</h4>
5+
<h3>@Localizer["TablesVirtualizationTitle"]</h3>
6+
<h4>@Localizer["TablesVirtualizationDescription"]</h4>
77

8-
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Normal">
9-
<p>@((MarkupString)Localizer["P3"].Value)</p>
10-
<div class="table-virtualize-demo">
11-
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
12-
<TableColumns>
13-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
14-
<TableColumn @bind-Field="@context.Name" />
15-
<TableColumn @bind-Field="@context.Address" Readonly="true" />
16-
<TableColumn @bind-Field="@context.Education" />
17-
<TableColumn @bind-Field="@context.Count" Editable="false" />
18-
<TableColumn @bind-Field="@context.Complete" />
19-
</TableColumns>
20-
</Table>
21-
</div>
8+
<DemoBlock Title="@Localizer["VirtualizationNormalTitle"]" Introduction="@Localizer["VirtualizationNormalIntro"]" Name="Normal" Demo="typeof(Demos.Table.Virtualization.VirtualizationNormal)">
9+
<p>@((MarkupString)Localizer["VirtualizationNormalDescription"].Value)</p>
2210
</DemoBlock>
2311

24-
<DemoBlock Title="@Localizer["P4"]" Introduction="@Localizer["P5"]" Name="Dynamic">
25-
<p>@Localizer["P6"]</p>
26-
<div class="table-virtualize-demo">
27-
<Table TItem="Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
28-
<TableColumns>
29-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
30-
<TableColumn @bind-Field="@context.Name" />
31-
<TableColumn @bind-Field="@context.Address" Readonly="true" />
32-
<TableColumn @bind-Field="@context.Education" />
33-
<TableColumn @bind-Field="@context.Count" Editable="false" />
34-
<TableColumn @bind-Field="@context.Complete" />
35-
</TableColumns>
36-
</Table>
37-
</div>
12+
<DemoBlock Title="@Localizer["VirtualizationDynamicTitle"]" Introduction="@Localizer["VirtualizationDynamicIntro"]" Name="Dynamic" Demo="typeof(Demos.Table.Virtualization.VirtualizationDynamic)">
13+
<p>@Localizer["VirtualizationDynamicDescription"]</p>
3814
</DemoBlock>

‎src/BootstrapBlazor.Shared/Samples/Table/TablesVirtualization.razor.cs‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)