weiai/BootstrapBlazor
1
0
Fork 0
mirror of https://github.com/dotnetcore/BootstrapBlazor.git synced 2025-12-20 10:26:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

!3762 doc(#I6AKCT): update the table component dialog demo

Browse Source 
* update the table component dialog demo
This commit is contained in:
Lambert Lee
2023-01-15 03:07:56 +00:00
committed by Argo
parent fa6f324992
commit b645333a82
4 changed files with 81 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/BootstrapBlazor.Shared/Samples/Table/TablesDialog.razor.cs → src/BootstrapBlazor.Shared/Demos/Table/Dialog/TableDialogNormal.razor
View File

@@ -1,23 +1,47 @@
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
@inject IStringLocalizer<Foo> LocalizerFoo
@inject IStringLocalizer<TableDialogNormal> Localizer
namespace BootstrapBlazor.Shared.Samples.Table;
<div>
<Table TItem="Foo" @ref="ProductTable"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
<TableToolbarTemplate>
<TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa-fw fa-solid fa-pen-to-square" Text="@Localizer["TableDialogNormalChoose"]" OnClickCallback="@ShowDialog" />
</TableToolbarTemplate>
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Readonly="true" />
<TableColumn @bind-Field="@context.Name" Readonly="true" />
<TableColumn @bind-Field="@context.Count" Width="80" />
</TableColumns>
</Table>
/// <summary>
///
/// </summary>
public sealed partial class TablesDialog
{
private static readonly Random random = new();
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
[NotNull]
private Modal? Modal { get; set; }
<Modal @ref="Modal">
<ModalDialog Title="@Localizer["TableDialogNormalSelectitem"]" IsCentered="true">
<BodyTemplate>
<Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</BodyTemplate>
<FooterTemplate>
<Button Text="@Localizer["TableDialogNormalSure"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
</FooterTemplate>
</ModalDialog>
</Modal>
</div>
@code {
/// <summary>
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
/// Foo class is used for Demo test, please download the source code if necessary
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
/// </summary>
[NotNull]
private Table<Foo>? ProductTable { get; set; }
@@ -27,12 +51,17 @@ public sealed partial class TablesDialog
[NotNull]
private List<Foo>? ProductSelectItems { get; set; }
[NotNull]
private Modal? Modal { get; set; }
private bool _confirm;
private static readonly Random random = new();
private List<Foo> SelectedRows { get; set; } = new List<Foo>();
/// <summary>
///
/// OnInitialized
/// </summary>
protected override void OnInitialized()
{
@@ -116,7 +145,7 @@ public sealed partial class TablesDialog
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
TotalCount = total
});
}
}

24
src/BootstrapBlazor.Shared/Locales/en.json
View File

@@ -64,17 +64,19 @@
"Footer": "Gitee Hosting Platform"
},
"BootstrapBlazor.Shared.Samples.Table.TablesDialog": {
"H1": "Table table is used in the pop-up window",
"H2": "Used in data selection with hierarchical relationship",
"P1": "Data linkage in the pop-up window",
"P2": "Click the Select button in the toolbar to pop up a dialog box to select candidate data",
"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",
"P4": "Click the <code>Select</code> button to pop up a dialog box to select the product <code>Product</code>",
"P5": "After selecting the product in the pop-up window, click the <code>OK</code> button to close the pop-up window",
"P6": "Click the <code>Edit</code> button, since some data are set as read-only, only the <code>Count</code> field can be changed",
"P7": "Choose",
"P8": "Select item",
"P9": "Sure"
"TablesDialogTitle": "Table table is used in the pop-up window",
"TablesDialogDescription": "Used in data selection with hierarchical relationship",
"TableDialogNormalTitle": "Data linkage in the pop-up window",
"TableDialogNormalIntro": "Click the Select button in the toolbar to pop up a dialog box to select candidate data",
"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",
"TableDialogNormalTips1": "Click the <code>Select</code> button to pop up a dialog box to select the product <code>Product</code>",
"TableDialogNormalTips2": "After selecting the product in the pop-up window, click the <code>OK</code> button to close the pop-up window",
"TableDialogNormalTips3": "Click the <code>Edit</code> button, since some data are set as read-only, only the <code>Count</code> field can be changed"
},
"BootstrapBlazor.Shared.Demos.Table.Dialog.TableDialogNormal": {
"TableDialogNormalChoose": "Choose",
"TableDialogNormalSelectitem": "Select item",
"TableDialogNormalSure": "Sure"
},
"BootstrapBlazor.Shared.Samples.Table.TablesDynamicObject": {
"H1": "Table table",

24
src/BootstrapBlazor.Shared/Locales/zh.json
View File

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

46
src/BootstrapBlazor.Shared/Samples/Table/TablesDialog.razor
View File

@@ -1,46 +1,14 @@
@page "/tables/dialog"
@inject IStringLocalizer<TablesDialog> Localizer
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>
<h3>@Localizer["TablesDialogTitle"]</h3>
<h4>@Localizer["TablesDialogDescription"]</h4>
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="TableDialog">
<p>@((MarkupString)Localizer["P3"].Value)</p>
<DemoBlock Title="@Localizer["TableDialogNormalTitle"]" Introduction="@Localizer["TableDialogNormalIntro"]" Name="TableDialogNormal" Demo="typeof(Demos.Table.Dialog.TableDialogNormal)">
<p>@((MarkupString)Localizer["TableDialogNormalDescription"].Value)</p>
<ul class="ul-demo mb-3">
<li>@((MarkupString)Localizer["P4"].Value)</li>
<li>@((MarkupString)Localizer["P5"].Value)</li>
<li>@((MarkupString)Localizer["P6"].Value)</li>
<li>@((MarkupString)Localizer["TableDialogNormalTips1"].Value)</li>
<li>@((MarkupString)Localizer["TableDialogNormalTips2"].Value)</li>
<li>@((MarkupString)Localizer["TableDialogNormalTips3"].Value)</li>
</ul>
<Table TItem="Foo" @ref="ProductTable"
IsStriped="true" IsBordered="true"
ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
<TableToolbarTemplate>
<TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa-fw fa-solid fa-pen-to-square" Text="@Localizer["P7"]" OnClickCallback="@ShowDialog" />
</TableToolbarTemplate>
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Readonly="true" />
<TableColumn @bind-Field="@context.Name" Readonly="true" />
<TableColumn @bind-Field="@context.Count" Width="80" />
</TableColumns>
</Table>
<Modal @ref="Modal">
<ModalDialog Title="@Localizer["P8"]" IsCentered="true">
<BodyTemplate>
<Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</BodyTemplate>
<FooterTemplate>
<Button Text="@Localizer["P9"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
</FooterTemplate>
</ModalDialog>
</Modal>
</DemoBlock>