Skip to content

Commit b645333

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3762 doc(#I6AKCT): update the table component dialog demo
* update the table component dialog demo
1 parent fa6f324 commit b645333

4 files changed

Lines changed: 84 additions & 83 deletions

File tree

src/BootstrapBlazor.Shared/Samples/Table/TablesDialog.razor.cs renamed to src/BootstrapBlazor.Shared/Demos/Table/Dialog/TableDialogNormal.razor

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
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-
///
9-
/// </summary>
10-
public sealed partial class TablesDialog
11-
{
12-
private static readonly Random random = new();
13-
14-
[Inject]
15-
[NotNull]
16-
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
17-
18-
[NotNull]
19-
private Modal? Modal { get; set; }
20-
1+
@inject IStringLocalizer<Foo> LocalizerFoo
2+
@inject IStringLocalizer<TableDialogNormal> Localizer
3+
4+
<div>
5+
<Table TItem="Foo" @ref="ProductTable"
6+
IsStriped="true" IsBordered="true"
7+
ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
8+
OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
9+
<TableToolbarTemplate>
10+
<TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa-fw fa-solid fa-pen-to-square" Text="@Localizer["TableDialogNormalChoose"]" OnClickCallback="@ShowDialog" />
11+
</TableToolbarTemplate>
12+
<TableColumns>
13+
<TableColumn @bind-Field="@context.DateTime" Readonly="true" />
14+
<TableColumn @bind-Field="@context.Name" Readonly="true" />
15+
<TableColumn @bind-Field="@context.Count" Width="80" />
16+
</TableColumns>
17+
</Table>
18+
19+
<Modal @ref="Modal">
20+
<ModalDialog Title="@Localizer["TableDialogNormalSelectitem"]" IsCentered="true">
21+
<BodyTemplate>
22+
<Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
23+
ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
24+
OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
25+
<TableColumns>
26+
<TableColumn @bind-Field="@context.DateTime" />
27+
<TableColumn @bind-Field="@context.Name" />
28+
<TableColumn @bind-Field="@context.Count" />
29+
</TableColumns>
30+
</Table>
31+
</BodyTemplate>
32+
<FooterTemplate>
33+
<Button Text="@Localizer["TableDialogNormalSure"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
34+
</FooterTemplate>
35+
</ModalDialog>
36+
</Modal>
37+
</div>
38+
39+
@code {
40+
/// <summary>
41+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
42+
/// Foo class is used for Demo test, please download the source code if necessary
43+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
44+
/// </summary>
2145
[NotNull]
2246
private Table<Foo>? ProductTable { get; set; }
2347

@@ -27,12 +51,17 @@ public sealed partial class TablesDialog
2751
[NotNull]
2852
private List<Foo>? ProductSelectItems { get; set; }
2953

54+
[NotNull]
55+
private Modal? Modal { get; set; }
56+
3057
private bool _confirm;
3158

59+
private static readonly Random random = new();
60+
3261
private List<Foo> SelectedRows { get; set; } = new List<Foo>();
3362

3463
/// <summary>
35-
///
64+
/// OnInitialized
3665
/// </summary>
3766
protected override void OnInitialized()
3867
{
@@ -116,7 +145,7 @@ private Task<QueryData<Foo>> OnQueryProductAsync(QueryPageOptions options)
116145
return Task.FromResult(new QueryData<Foo>()
117146
{
118147
Items = items,
119-
TotalCount = total,
148+
TotalCount = total
120149
});
121150
}
122151
}

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,19 @@
6464
"Footer": "Gitee Hosting Platform"
6565
},
6666
"BootstrapBlazor.Shared.Samples.Table.TablesDialog": {
67-
"H1": "Table table is used in the pop-up window",
68-
"H2": "Used in data selection with hierarchical relationship",
69-
"P1": "Data linkage in the pop-up window",
70-
"P2": "Click the Select button in the toolbar to pop up a dialog box to select candidate data",
71-
"P3": "In this example, if the <code>Modal</code> component is linked with <code>Table</code>, the data is selected in the pop-up window, and then edited",
72-
"P4": "Click the <code>Select</code> button to pop up a dialog box to select the product <code>Product</code>",
73-
"P5": "After selecting the product in the pop-up window, click the <code>OK</code> button to close the pop-up window",
74-
"P6": "Click the <code>Edit</code> button, since some data are set as read-only, only the <code>Count</code> field can be changed",
75-
"P7": "Choose",
76-
"P8": "Select item",
77-
"P9": "Sure"
67+
"TablesDialogTitle": "Table table is used in the pop-up window",
68+
"TablesDialogDescription": "Used in data selection with hierarchical relationship",
69+
"TableDialogNormalTitle": "Data linkage in the pop-up window",
70+
"TableDialogNormalIntro": "Click the Select button in the toolbar to pop up a dialog box to select candidate data",
71+
"TableDialogNormalDescription": "In this example, if the <code>Modal</code> component is linked with <code>Table</code>, the data is selected in the pop-up window, and then edited",
72+
"TableDialogNormalTips1": "Click the <code>Select</code> button to pop up a dialog box to select the product <code>Product</code>",
73+
"TableDialogNormalTips2": "After selecting the product in the pop-up window, click the <code>OK</code> button to close the pop-up window",
74+
"TableDialogNormalTips3": "Click the <code>Edit</code> button, since some data are set as read-only, only the <code>Count</code> field can be changed"
75+
},
76+
"BootstrapBlazor.Shared.Demos.Table.Dialog.TableDialogNormal": {
77+
"TableDialogNormalChoose": "Choose",
78+
"TableDialogNormalSelectitem": "Select item",
79+
"TableDialogNormalSure": "Sure"
7880
},
7981
"BootstrapBlazor.Shared.Samples.Table.TablesDynamicObject": {
8082
"H1": "Table table",

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,19 @@
6464
"Footer": "码云托管平台"
6565
},
6666
"BootstrapBlazor.Shared.Samples.Table.TablesDialog": {
67-
"H1": "Table 表格在弹窗内使用",
68-
"H2": "用于带层级关系的数据选择中",
69-
"P1": "弹窗中数据联动",
70-
"P2": "点击工具栏中的选择按钮弹出对话框选择候选数据",
71-
"P3": "本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动，通过弹窗中选择数据，然后再进行编辑",
72-
"P4": "点击 <code>选择</code> 按钮弹出对话框选择产品 <code>Product</code>",
73-
"P5": "弹窗中选择产品后点击 <code>确定</code> 按钮关闭弹窗",
74-
"P6": "点击 <code>编辑</code> 按钮，由于设置部分数据为只读，只能更改 <code>Count</code> 字段",
75-
"P7": "选择",
76-
"P8": "选择项目",
77-
"P9": "确定"
67+
"TablesDialogTitle": "Table 表格在弹窗内使用",
68+
"TablesDialogDescription": "用于带层级关系的数据选择中",
69+
"TableDialogNormalTitle": "弹窗中数据联动",
70+
"TableDialogNormalIntro": "点击工具栏中的选择按钮弹出对话框选择候选数据",
71+
"TableDialogNormalDescription": "本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动，通过弹窗中选择数据，然后再进行编辑",
72+
"TableDialogNormalTips1": "点击 <code>选择</code> 按钮弹出对话框选择产品 <code>Product</code>",
73+
"TableDialogNormalTips2": "弹窗中选择产品后点击 <code>确定</code> 按钮关闭弹窗",
74+
"TableDialogNormalTips3": "点击 <code>编辑</code> 按钮，由于设置部分数据为只读，只能更改 <code>Count</code> 字段"
75+
},
76+
"BootstrapBlazor.Shared.Demos.Table.Dialog.TableDialogNormal": {
77+
"TableDialogNormalChoose": "选择",
78+
"TableDialogNormalSelectitem": "选择项目",
79+
"TableDialogNormalSure": "确定"
7880
},
7981
"BootstrapBlazor.Shared.Samples.Table.TablesDynamicObject": {
8082
"H1": "Table 表格",

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

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,14 @@
11
@page "/tables/dialog"
22
@inject IStringLocalizer<TablesDialog> Localizer
33

4-
<h3>@Localizer["H1"]</h3>
5-
<h4>@Localizer["H2"]</h4>
4+
<h3>@Localizer["TablesDialogTitle"]</h3>
5+
<h4>@Localizer["TablesDialogDescription"]</h4>
66

7-
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="TableDialog">
8-
<p>@((MarkupString)Localizer["P3"].Value)</p>
7+
<DemoBlock Title="@Localizer["TableDialogNormalTitle"]" Introduction="@Localizer["TableDialogNormalIntro"]" Name="TableDialogNormal" Demo="typeof(Demos.Table.Dialog.TableDialogNormal)">
8+
<p>@((MarkupString)Localizer["TableDialogNormalDescription"].Value)</p>
99
<ul class="ul-demo mb-3">
10-
<li>@((MarkupString)Localizer["P4"].Value)</li>
11-
<li>@((MarkupString)Localizer["P5"].Value)</li>
12-
<li>@((MarkupString)Localizer["P6"].Value)</li>
10+
<li>@((MarkupString)Localizer["TableDialogNormalTips1"].Value)</li>
11+
<li>@((MarkupString)Localizer["TableDialogNormalTips2"].Value)</li>
12+
<li>@((MarkupString)Localizer["TableDialogNormalTips3"].Value)</li>
1313
</ul>
14-
<Table TItem="Foo" @ref="ProductTable"
15-
IsStriped="true" IsBordered="true"
16-
ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
17-
OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
18-
<TableToolbarTemplate>
19-
<TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa-fw fa-solid fa-pen-to-square" Text="@Localizer["P7"]" OnClickCallback="@ShowDialog" />
20-
</TableToolbarTemplate>
21-
<TableColumns>
22-
<TableColumn @bind-Field="@context.DateTime" Readonly="true" />
23-
<TableColumn @bind-Field="@context.Name" Readonly="true" />
24-
<TableColumn @bind-Field="@context.Count" Width="80" />
25-
</TableColumns>
26-
</Table>
27-
28-
<Modal @ref="Modal">
29-
<ModalDialog Title="@Localizer["P8"]" IsCentered="true">
30-
<BodyTemplate>
31-
<Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
32-
ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
33-
OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
34-
<TableColumns>
35-
<TableColumn @bind-Field="@context.DateTime" />
36-
<TableColumn @bind-Field="@context.Name" />
37-
<TableColumn @bind-Field="@context.Count" />
38-
</TableColumns>
39-
</Table>
40-
</BodyTemplate>
41-
<FooterTemplate>
42-
<Button Text="@Localizer["P9"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
43-
</FooterTemplate>
44-
</ModalDialog>
45-
</Modal>
4614
</DemoBlock>

0 commit comments

Comments
 (0)