Skip to content

Commit 4b219a4

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3760 doc(#I6AKBS): update the table component autorefresh demos
* update the table component autorefresh demos
1 parent 046c03e commit 4b219a4

6 files changed

Lines changed: 156 additions & 119 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/Table/AutoRefresh/TablesAutoRefreshControl.razor‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
@inject IStringLocalizer<TablesAutoRefreshControl> Localizer
3+
4+
<div>
5+
<p>
6+
<div>@Localizer["TablesAutoRefreshControlDescription"]</div>
7+
<Button Text="@Localizer["TablesAutoRefreshControlToggleAuto"]" OnClick="@ToggleAuto" /> <span><code>IsAutoRefresh</code> @Localizer["TablesAutoRefreshControlIsAutoRefresh"]：<code>@IsAutoRefresh</code></span>
8+
</p>
9+
<Table TItem="Foo"
10+
IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
11+
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
12+
IsAutoRefresh="@IsAutoRefresh" AutoRefreshInterval="2000"
13+
OnQueryAsync="@OnManualQueryAsync">
14+
<TableColumns>
15+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
16+
<TableColumn @bind-Field="@context.Name" Width="100" />
17+
<TableColumn @bind-Field="@context.Address" />
18+
<TableColumn @bind-Field="@context.Count" />
19+
<TableColumn @bind-Field="@context.Complete" />
20+
</TableColumns>
21+
</Table>
22+
</div>
23+
24+
@code {
25+
/// <summary>
26+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
27+
/// Foo class is used for Demo test, please download the source code if necessary
28+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
29+
/// </summary>
30+
private List<Foo> Items { get; set; } = new List<Foo>();
31+
32+
private bool IsAutoRefresh { get; set; }
33+
34+
private static readonly Random random = new();
35+
36+
private void ToggleAuto() => IsAutoRefresh = !IsAutoRefresh;
37+
38+
private Task<QueryData<Foo>> OnManualQueryAsync(QueryPageOptions options) => GenerateFoos(options, Items);
39+
40+
private Task<QueryData<Foo>> GenerateFoos(QueryPageOptions options, List<Foo> foos)
41+
{
42+
// 设置记录总数
43+
var total = foos.Count;
44+
var foo = Foo.Generate(LocalizerFoo);
45+
foo.Id = total++;
46+
foo.Name = LocalizerFoo["Foo.Name", total.ToString("D4")];
47+
foo.Address = LocalizerFoo["Foo.Address", $"{random.Next(1000, 2000)}"];
48+
49+
foos.Insert(0, foo);
50+
51+
if (foos.Count > 10)
52+
{
53+
foos.RemoveRange(10, 1);
54+
total = 10;
55+
}
56+
57+
// 内存分页
58+
var items = foos.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
59+
60+
return Task.FromResult(new QueryData<Foo>()
61+
{
62+
Items = items,
63+
TotalCount = total
64+
});
65+
}
66+
}

‎src/BootstrapBlazor.Shared/Demos/Table/AutoRefresh/TablesAutoRefreshNormal.razor‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
3+
<div>
4+
<Table TItem="Foo"
5+
IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
6+
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
7+
IsAutoRefresh="true" AutoRefreshInterval="2000"
8+
OnQueryAsync="@OnAutoQueryAsync">
9+
<TableColumns>
10+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
11+
<TableColumn @bind-Field="@context.Name" Width="100" />
12+
<TableColumn @bind-Field="@context.Address" />
13+
<TableColumn @bind-Field="@context.Count" />
14+
<TableColumn @bind-Field="@context.Complete" />
15+
</TableColumns>
16+
</Table>
17+
</div>
18+
19+
@code {
20+
/// <summary>
21+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
22+
/// Foo class is used for Demo test, please download the source code if necessary
23+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
24+
/// </summary>
25+
private List<Foo> Items { get; set; } = new List<Foo>();
26+
27+
private static readonly Random random = new();
28+
29+
private Task<QueryData<Foo>> OnAutoQueryAsync(QueryPageOptions options) => GenerateFoos(options, Items);
30+
31+
private Task<QueryData<Foo>> GenerateFoos(QueryPageOptions options, List<Foo> foos)
32+
{
33+
// 设置记录总数
34+
var total = foos.Count;
35+
var foo = Foo.Generate(LocalizerFoo);
36+
foo.Id = total++;
37+
foo.Name = LocalizerFoo["Foo.Name", total.ToString("D4")];
38+
foo.Address = LocalizerFoo["Foo.Address", $"{random.Next(1000, 2000)}"];
39+
40+
foos.Insert(0, foo);
41+
42+
if (foos.Count > 10)
43+
{
44+
foos.RemoveRange(10, 1);
45+
total = 10;
46+
}
47+
48+
// 内存分页
49+
var items = foos.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
50+
51+
return Task.FromResult(new QueryData<Foo>()
52+
{
53+
Items = items,
54+
TotalCount = total
55+
});
56+
}
57+
}

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5363,17 +5363,19 @@
53635363
"P11": "Total:"
53645364
},
53655365
"BootstrapBlazor.Shared.Samples.Table.TablesAutoRefresh": {
5366-
"H1": "Auto Refresh table",
5367-
"H2": "In a certain application scenario, the change of the data source needs to refresh the table component",
5368-
"P1": "Auto Refresh",
5369-
"P2": "This example demonstrates monitoring the data source in a background thread, and notifies the table component to refresh the data when the data source changes",
5370-
"P3": "The auto refresh function is enabled by setting the value of the <code>IsAutoRefresh</code> property. The default value of the <code>AutoRefreshInterval</code> property is 2000 milliseconds, which is the auto refresh interval, and the component's <code>QueryAsync is called periodically. The </code> method makes the table auto-refresh",
5371-
"P4": "In this example, a new piece of data is added every 2 seconds and a maximum of 10 pieces of data are maintained",
5372-
"P5": "Control whether to update automatically by setting a variable",
5373-
"P6": "This example controls whether to automatically update by setting a variable",
5374-
"P7": "Enable/disable automatic update function by clicking the button",
5375-
"P8": "Change Auto",
5376-
"P9": "The current value"
5366+
"TablesAutoRefreshTitle": "Auto Refresh table",
5367+
"TablesAutoRefreshDescription": "In a certain application scenario, the change of the data source needs to refresh the table component",
5368+
"TablesAutoRefreshNormalTitle": "Auto Refresh",
5369+
"TablesAutoRefreshNormalIntro": "This example demonstrates monitoring the data source in a background thread, and notifies the table component to refresh the data when the data source changes",
5370+
"TablesAutoRefreshNormalTips1": "The auto refresh function is enabled by setting the value of the <code>IsAutoRefresh</code> property. The default value of the <code>AutoRefreshInterval</code> property is 2000 milliseconds, which is the auto refresh interval, and the component's <code>QueryAsync is called periodically. The </code> method makes the table auto-refresh",
5371+
"TablesAutoRefreshNormalTips2": "In this example, a new piece of data is added every 2 seconds and a maximum of 10 pieces of data are maintained",
5372+
"TablesAutoRefreshControlTitle": "Control whether to update automatically by setting a variable",
5373+
"TablesAutoRefreshControlIntro": "This example controls whether to automatically update by setting a variable"
5374+
},
5375+
"BootstrapBlazor.Shared.Demos.Table.AutoRefresh.TablesAutoRefreshControl": {
5376+
"TablesAutoRefreshControlDescription": "Enable/disable automatic update function by clicking the button",
5377+
"TablesAutoRefreshControlToggleAuto": "Change Auto",
5378+
"TablesAutoRefreshControlIsAutoRefresh": "The current value"
53775379
},
53785380
"BootstrapBlazor.Shared.Samples.Table.TablesSelection": {
53795381
"H1": "Table Selection",

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5378,17 +5378,19 @@
53785378
"P4": "此模式下所有数据编辑均编辑原始数据，通过 <code>bind-Items</code> 更新数据源，所以不提供 <b>取消</b> 按钮"
53795379
},
53805380
"BootstrapBlazor.Shared.Samples.Table.TablesAutoRefresh": {
5381-
"H1": "自动刷新表格功能",
5382-
"H2": "在某种应用场景中，数据源的变化需要重新刷新表格组件",
5383-
"P1": "自动刷新",
5384-
"P2": "本示例演示在后台线程中对数据源进行监控，当数据源变化时通知表格组件进行数据刷新",
5385-
"P3": "通过设置 <code>IsAutoRefresh</code> 属性值来开启自动刷新功能，<code>AutoRefreshInterval</code> 属性值默认为 2000 毫秒，此值为自动刷新时间间隔，周期性调用组件的 <code>QueryAsync</code> 方法使表格具有自动刷新功能",
5386-
"P4": "本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据",
5387-
"P5": "通过设置变量控制是否自动更新",
5388-
"P6": "本示例通过设置变量控制是否自动更新",
5389-
"P7": "通过点击按钮开始/关闭是否自动更新功能",
5390-
"P8": "更改 Auto",
5391-
"P9": "当前值"
5381+
"TablesAutoRefreshTitle": "自动刷新表格功能",
5382+
"TablesAutoRefreshDescription": "在某种应用场景中，数据源的变化需要重新刷新表格组件",
5383+
"TablesAutoRefreshNormalTitle": "自动刷新",
5384+
"TablesAutoRefreshNormalIntro": "本示例演示在后台线程中对数据源进行监控，当数据源变化时通知表格组件进行数据刷新",
5385+
"TablesAutoRefreshNormalTips1": "通过设置 <code>IsAutoRefresh</code> 属性值来开启自动刷新功能，<code>AutoRefreshInterval</code> 属性值默认为 2000 毫秒，此值为自动刷新时间间隔，周期性调用组件的 <code>QueryAsync</code> 方法使表格具有自动刷新功能",
5386+
"TablesAutoRefreshNormalTips2": "本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据",
5387+
"TablesAutoRefreshControlTitle": "通过设置变量控制是否自动更新",
5388+
"TablesAutoRefreshControlIntro": "本示例通过设置变量控制是否自动更新"
5389+
},
5390+
"BootstrapBlazor.Shared.Demos.Table.AutoRefresh.TablesAutoRefreshControl": {
5391+
"TablesAutoRefreshControlDescription": "通过点击按钮开始/关闭是否自动更新功能",
5392+
"TablesAutoRefreshControlToggleAuto": "更改 Auto",
5393+
"TablesAutoRefreshControlIsAutoRefresh": "当前值"
53925394
},
53935395
"BootstrapBlazor.Shared.Samples.Table.TablesSelection": {
53945396
"H1": "Table 表格",

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

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,12 @@
11
@page "/tables/autorefresh"
2+
@inject IStringLocalizer<TablesAutoRefresh> Localizer
23

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

6-
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="AutoRefresh">
7-
<p>@((MarkupString)Localizer["P3"].Value)</p>
8-
<p>@((MarkupString)Localizer["P4"].Value)</p>
9-
<Table TItem="Foo"
10-
IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
11-
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
12-
IsAutoRefresh="true" AutoRefreshInterval="2000"
13-
OnQueryAsync="@OnAutoQueryAsync">
14-
<TableColumns>
15-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
16-
<TableColumn @bind-Field="@context.Name" Width="100" />
17-
<TableColumn @bind-Field="@context.Address" />
18-
<TableColumn @bind-Field="@context.Count" />
19-
<TableColumn @bind-Field="@context.Complete" />
20-
</TableColumns>
21-
</Table>
7+
<DemoBlock Title="@Localizer["TablesAutoRefreshNormalTitle"]" Introduction="@Localizer["TablesAutoRefreshNormalIntro"]" Name="TablesAutoRefreshNormal" Demo="typeof(Demos.Table.AutoRefresh.TablesAutoRefreshNormal)">
8+
<p>@((MarkupString)Localizer["TablesAutoRefreshNormalTips1"].Value)</p>
9+
<p>@((MarkupString)Localizer["TablesAutoRefreshNormalTips2"].Value)</p>
2210
</DemoBlock>
2311

24-
<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="Control">
25-
<p>
26-
<div>@Localizer["P7"]</div>
27-
<Button Text="@Localizer["P8"]" OnClick="@ToggleAuto" /> <span><code>IsAutoRefresh</code> @Localizer["P9"]：<code>@IsAutoRefresh</code></span>
28-
</p>
29-
<Table TItem="Foo"
30-
IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
31-
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
32-
IsAutoRefresh="@IsAutoRefresh" AutoRefreshInterval="2000"
33-
OnQueryAsync="@OnManualQueryAsync">
34-
<TableColumns>
35-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
36-
<TableColumn @bind-Field="@context.Name" Width="100" />
37-
<TableColumn @bind-Field="@context.Address" />
38-
<TableColumn @bind-Field="@context.Count" />
39-
<TableColumn @bind-Field="@context.Complete" />
40-
</TableColumns>
41-
</Table>
42-
</DemoBlock>
12+
<DemoBlock Title="@Localizer["TablesAutoRefreshControlTitle"]" Introduction="@Localizer["TablesAutoRefreshControlIntro"]" Name="TablesAutoRefreshControl" Demo="typeof(Demos.Table.AutoRefresh.TablesAutoRefreshControl)" />

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

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

0 commit comments

Comments
 (0)