update the table component excel dmos (#403)

Co-authored-by: Argo <argo@live.ca>

src/BootstrapBlazor.Shared/Demos/Table/TablesExcel/TablesExcelCellRender.razor

@@ -0,0 +1,52 @@
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="200">
+                <EditTemplate Context="row">
+                    <div class="d-flex disabled">
+                        <div>
+                            <img src="@Foo.GetAvatarUrl(row!.Id)" class="bb-avatar" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@row.Name</div>
+                            <div class="bb-sub">@Foo.GetTitle(row!.Id)</div>
+                        </div>
+                    </div>
+                </EditTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Address" />
+            <TableColumn @bind-Field="@context.Education" Width="160" />
+            <TableColumn @bind-Field="@context.Count" Width="160">
+                <EditTemplate Context="row">
+                    <div class="disabled">
+                        <div>@row!.Count %</div>
+                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
+                    </div>
+                </EditTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
+        </TableColumns>
+    </Table>
+</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 List<Foo>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+}

src/BootstrapBlazor.Shared/Demos/Table/TablesExcel/TablesExcelOnQuery.razor

@@ -1,27 +1,39 @@
-// 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
 
-using System.Data;
+<div>
+    <Table TItem="Foo" ShowToolbar="true" ShowRefresh="true" ShowColumnList="true" ShowExtendButtons="true"
+           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource"
+           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Name" />
+            <TableColumn @bind-Field="@context.Address" Readonly="true" />
+            <TableColumn @bind-Field="@context.Education" />
+            <TableColumn @bind-Field="@context.Count" Editable="false" Align="Alignment.Right" />
+            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
+        </TableColumns>
+    </Table>
 
-namespace BootstrapBlazor.Shared.Samples.Table;
+    <BlockLogger @ref="Trace" class="mt-3" />
+</div>
 
-/// <summary>
-/// 
-/// </summary>
-partial class TablesExcel
-{
-    [Inject]
+@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 IStringLocalizer<Foo>? LocalizerFoo { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<TablesExcel>? Localizer { get; set; }
+    private List<Foo>? Items { get; set; }
 
     [NotNull]
     private BlockLogger? Trace { get; set; }
 
+    /// <summary>
+    /// 绑定数据源代码
+    /// </summary>
+    private static IEnumerable<int> PageItemsSource => new int[] { 10, 20, 40 };
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -32,12 +44,6 @@ partial class TablesExcel
         Items = Foo.GenerateFoo(LocalizerFoo);
     }
 
-    // 绑定数据源代码
-    private static IEnumerable<int> PageItemsSource => new int[] { 10, 20, 40 };
-
-    [NotNull]
-    private List<Foo>? Items { get; set; }
-
     private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
     {
         IEnumerable<Foo> items = Items;

src/BootstrapBlazor.Shared/Locales/en.json

@@ -5449,36 +5449,36 @@
     "TablesSelectionNormalButtonText": "clear selection"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesExcel": {
-    "H1": "Table Excel",
-    "H2": "Commonly used for large data sheet maintenance",
-    "P1": "binding collection",
-    "P2": "Get data collection through <code>OnQueryAsync</code> callback",
-    "P3": "When using the <code>List&lt;TItem&gt;</code> generic collection as a data source, you need to follow the steps below to set",
-    "P4": "1. Set the data source",
-    "P5": "Set the <code>Items</code> property of the <code>Table</code> component or the <code>OnQueryAsync</code> callback delegate method",
-    "P6": "2. Handle the new logic",
-    "P7": "Set the <code>OnAddAsync</code> callback delegate function to handle the <b>New</b> logic",
-    "P8": "The code here is sample code",
-    "P8A": "custom address",
-    "P9": "output log information",
-    "P10": "Collection value change notification column",
-    "P11": "Type",
-    "P12": "3. Handle delete logic",
-    "P13": "Set the <code>OnDeleteAsync</code> callback delegate function to handle the <b>delete</b> logic",
-    "P14": "The code here is sample code",
-    "P15": "output log information",
-    "P16": "Collection value change notification column",
-    "P17": "Type",
-    "P18": "4. Handle the update logic",
-    "P19": "Set the <code>OnSaveAsync</code> callback delegate function to handle the cell <b>update</b> logic",
-    "P20": "After all cells in the component are edited and updated, the <code>OnSaveAsync</code> callback delegate will be automatically triggered, and the parameter is the current update model <code>TItem</code>",
-    "P21": "The code here is sample code",
-    "P22": "Cell Change Notification Class: Foo",
-    "P23": "value: cell",
-    "P24": "Individually control how cells are rendered by editing the template",
-    "P25": "Advanced usage",
-    "P26": "<code>IsFixedHeader</code> fixed header height is set to <code>Height='500px'</code>",
-    "P27": "<code>Name</code> is not editable display avatar"
+    "TablesExcel": "Table Excel",
+    "TablesExcelDescription": "Commonly used for large data sheet maintenance",
+    "TablesExcelOnQueryTitle": "binding collection",
+    "TablesExcelOnQueryIntro": "Get data collection through <code>OnQueryAsync</code> callback",
+    "TablesExcelTips": "When using the <code>List&lt;TItem&gt;</code> generic collection as a data source, you need to follow the steps below to set",
+    "TablesExcelSetDataSourceTitle": "1. Set the data source",
+    "TablesExcelSetDataSourceDescription": "Set the <code>Items</code> property of the <code>Table</code> component or the <code>OnQueryAsync</code> callback delegate method",
+    "TablesExcelNewLogicTitle": "2. Handle the new logic",
+    "TablesExcelNewLogicDescription": "Set the <code>OnAddAsync</code> callback delegate function to handle the <b>New</b> logic",
+    "TablesExcelNewLogicNote1": "The code here is sample code",
+    "TablesExcelNewLogicNote1Address": "custom address",
+    "TablesExcelNewLogicNote2": "output log information",
+    "TablesExcelNewLogicNote2Log1": "Collection value change notification column",
+    "TablesExcelNewLogicNote2Log2": "Type",
+    "TablesExcelDeleteLogicTitle": "3. Handle delete logic",
+    "TablesExcelDeleteLogicDescription": "Set the <code>OnDeleteAsync</code> callback delegate function to handle the <b>delete</b> logic",
+    "TablesExcelDeleteLogicNote1": "The code here is sample code",
+    "TablesExcelDeleteLogicNote2": "output log information",
+    "TablesExcelDeleteLogicNote2Log1": "Collection value change notification column",
+    "TablesExcelDeleteLogicNote2Log2": "Type",
+    "TablesExcelUpdateLogicTitle": "4. Handle the update logic",
+    "TablesExcelUpdateLogicDescription1": "Set the <code>OnSaveAsync</code> callback delegate function to handle the cell <b>update</b> logic",
+    "TablesExcelUpdateLogicDescription2": "After all cells in the component are edited and updated, the <code>OnSaveAsync</code> callback delegate will be automatically triggered, and the parameter is the current update model <code>TItem</code>",
+    "TablesExcelUpdateLogicNote": "The code here is sample code",
+    "TablesExcelUpdateLogicLog1": "Cell Change Notification Class: Foo",
+    "TablesExcelUpdateLogicLog2": "value: cell",
+    "TablesExcelCellRenderTitle": "Individually control how cells are rendered by editing the template",
+    "TablesExcelCellRenderIntro": "Advanced usage",
+    "TablesExcelCellRenderTips1": "<code>IsFixedHeader</code> fixed header height is set to <code>Height='500px'</code>",
+    "TablesExcelCellRenderTips2": "<code>Name</code> is not editable display avatar"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesDynamicExcel": {
     "H1": "Excel-DataTable",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -5465,36 +5465,36 @@
     "TablesSelectionNormalButtonText": "清除选择"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesExcel": {
-    "H1": "Table 表格",
-    "H2": "常用于大数据单表维护",
-    "P1": "绑定集合",
-    "P2": "通过 <code>OnQueryAsync</code> 回调获得数据集合",
-    "P3": "使用 <code>List&lt;TItem&gt;</code> 泛型集合作为数据源时，需要按照下面的步骤进行设置",
-    "P4": "1. 设置数据源",
-    "P5": "设置 <code>Table</code> 组件的 <code>Items</code> 属性或者 <code>OnQueryAsync</code> 回调委托方法",
-    "P6": "2. 处理新建逻辑",
-    "P7": "设置 <code>OnAddAsync</code> 回调委托函数处理 <b>新建</b> 逻辑",
-    "P8": "此处代码为示例代码",
-    "P8A": "自定义地址",
-    "P9": "输出日志信息",
-    "P10": "集合值变化通知 列",
-    "P11": "类型",
-    "P12": "3. 处理删除逻辑",
-    "P13": "设置 <code>OnDeleteAsync</code> 回调委托函数处理 <b>删除</b> 逻辑",
-    "P14": "此处代码为示例代码",
-    "P15": "输出日志信息",
-    "P16": "集合值变化通知 列",
-    "P17": "类型",
-    "P18": "4. 处理更新逻辑",
-    "P19": "设置 <code>OnSaveAsync</code> 回调委托函数处理单元格 <b>更新</b> 逻辑",
-    "P20": "组件内部所有单元格编辑更新后会自动触发 <code>OnSaveAsync</code> 回调委托，参数是当前更新模型 <code>TItem</code>",
-    "P21": "此处代码为示例代码",
-    "P22": "单元格变化通知 类: Foo ",
-    "P23": "值: 单元格",
-    "P24": "通过编辑模板单独控制单元格渲染方式",
-    "P25": "高级用法",
-    "P26": "<code>IsFixedHeader</code> 固定表头 高度设定为 <code>Height='500px'</code>",
-    "P27": "<code>Name</code> 不可编辑显示头像"
+    "TablesExcel": "Table 表格",
+    "TablesExcelDescription": "常用于大数据单表维护",
+    "TablesExcelOnQueryTitle": "绑定集合",
+    "TablesExcelOnQueryIntro": "通过 <code>OnQueryAsync</code> 回调获得数据集合",
+    "TablesExcelTips": "使用 <code>List&lt;TItem&gt;</code> 泛型集合作为数据源时，需要按照下面的步骤进行设置",
+    "TablesExcelSetDataSourceTitle": "1. 设置数据源",
+    "TablesExcelSetDataSourceDescription": "设置 <code>Table</code> 组件的 <code>Items</code> 属性或者 <code>OnQueryAsync</code> 回调委托方法",
+    "TablesExcelNewLogicTitle": "2. 处理新建逻辑",
+    "TablesExcelNewLogicDescription": "设置 <code>OnAddAsync</code> 回调委托函数处理 <b>新建</b> 逻辑",
+    "TablesExcelNewLogicNote1": "此处代码为示例代码",
+    "TablesExcelNewLogicNote1Address": "自定义地址",
+    "TablesExcelNewLogicNote2": "输出日志信息",
+    "TablesExcelNewLogicNote2Log1": "集合值变化通知 列",
+    "TablesExcelNewLogicNote2Log2": "类型",
+    "TablesExcelDeleteLogicTitle": "3. 处理删除逻辑",
+    "TablesExcelDeleteLogicDescription": "设置 <code>OnDeleteAsync</code> 回调委托函数处理 <b>删除</b> 逻辑",
+    "TablesExcelDeleteLogicNote1": "此处代码为示例代码",
+    "TablesExcelDeleteLogicNote2": "输出日志信息",
+    "TablesExcelDeleteLogicNote2Log1": "集合值变化通知 列",
+    "TablesExcelDeleteLogicNote2Log2": "类型",
+    "TablesExcelUpdateLogicTitle": "4. 处理更新逻辑",
+    "TablesExcelUpdateLogicDescription1": "设置 <code>OnSaveAsync</code> 回调委托函数处理单元格 <b>更新</b> 逻辑",
+    "TablesExcelUpdateLogicDescription2": "组件内部所有单元格编辑更新后会自动触发 <code>OnSaveAsync</code> 回调委托，参数是当前更新模型 <code>TItem</code>",
+    "TablesExcelUpdateLogicNote": "此处代码为示例代码",
+    "TablesExcelUpdateLogicLog1": "单元格变化通知 类: Foo ",
+    "TablesExcelUpdateLogicLog2": "值: 单元格",
+    "TablesExcelCellRenderTitle": "通过编辑模板单独控制单元格渲染方式",
+    "TablesExcelCellRenderIntro": "高级用法",
+    "TablesExcelCellRenderTips1": "<code>IsFixedHeader</code> 固定表头 高度设定为 <code>Height='500px'</code>",
+    "TablesExcelCellRenderTips2": "<code>Name</code> 不可编辑显示头像"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesDynamicExcel": {
     "H1": "Table 表格",

src/BootstrapBlazor.Shared/Samples/Table/TablesExcel.razor

@@ -1,30 +1,20 @@
 @page "/tables/excel"
+@inject IStringLocalizer<TablesExcel> Localizer
 
-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["TablesExcelTitle"]</h3>
+<h4>@Localizer["TablesExcelDescription"]</h4>
 
-<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="OnQuery">
-    <Table TItem="Foo" ShowToolbar="true" ShowRefresh="true" ShowColumnList="true" ShowExtendButtons="true"
-           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource" 
-           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" Readonly="true" />
-            <TableColumn @bind-Field="@context.Education" />
-            <TableColumn @bind-Field="@context.Count" Editable="false" Align="Alignment.Right" />
-            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
-        </TableColumns>
-    </Table>
-
-    <BlockLogger @ref="Trace" class="mt-3" />
+<DemoBlock Title="@Localizer["TablesExcelOnQueryTitle"]"
+           Introduction="@Localizer["TablesExcelOnQueryIntro"]"
+           Name="OnQuery"
+           Demo="typeof(Demos.Table.TablesExcel.TablesExcelOnQuery)">
 </DemoBlock>
 
-<p class="mt-3">@((MarkupString)Localizer["P3"].Value)</p>
+<p class="mt-3">@((MarkupString)Localizer["TablesExcelTips"].Value)</p>
 
 <p>
-    <div class="code-label">@((MarkupString)Localizer["P4"].Value)</div>
-    <div class="mt-2">@((MarkupString)Localizer["P5"].Value)</div>
+    <div class="code-label">@((MarkupString)Localizer["TablesExcelSetDataSourceTitle"].Value)</div>
+    <div class="mt-2">@((MarkupString)Localizer["TablesExcelSetDataSourceDescription"].Value)</div>
 </p>
 
 <Pre>protected override void OnInitialized()
@@ -35,80 +25,55 @@
 }</Pre>
 
 <p>
-    <div class="code-label">@((MarkupString)Localizer["P6"].Value)</div>
-    <div class="mt-2">@((MarkupString)Localizer["P7"].Value)</div>
+    <div class="code-label">@((MarkupString)Localizer["TablesExcelNewLogicTitle"].Value)</div>
+    <div class="mt-2">@((MarkupString)Localizer["TablesExcelNewLogicDescription"].Value)</div>
 </p>
 
 <Pre>private Task&lt;Foo&gt; OnAddAsync()
 {
-    // @Localizer["P8"]
-    var foo = new Foo() { DateTime = DateTime.Now, Address = $"@Localizer["P8A"] {DateTime.Now.Second}" };
+    // @Localizer["TablesExcelNewLogicNote1"]
+    var foo = new Foo() { DateTime = DateTime.Now, Address = $"@Localizer["TablesExcelNewLogicNote1Address"] {DateTime.Now.Second}" };
     Items.Insert(0, foo);
 
-    // @Localizer["P9"]
-    Trace.Log($"@Localizer["P10"]: {Items.Count} - @Localizer["P11"]: Add");
+    // @Localizer["TablesExcelNewLogicNote2"]
+    Trace.Log($"@Localizer["TablesExcelNewLogicNote2Log1"]: {Items.Count} - @Localizer["TablesExcelNewLogicNote2Log2"]: Add");
     return Task.FromResult(foo);
 }</Pre>
 
 <p>
-    <div class="code-label">@((MarkupString)Localizer["P12"].Value)</div>
-    <div class="mt-2">@((MarkupString)Localizer["P13"].Value)</div>
+    <div class="code-label">@((MarkupString)Localizer["TablesExcelDeleteLogicTitle"].Value)</div>
+    <div class="mt-2">@((MarkupString)Localizer["TablesExcelDeleteLogicDescription"].Value)</div>
 </p>
 
 <Pre>private Task&lt;bool&gt; OnDeleteAsync(IEnumerable&lt;Foo&gt; items)
 {
-    // @Localizer["P14"]
+    // @Localizer["TablesExcelDeleteLogicNote1"]
     Items.RemoveAll(i => items.Contains(i));
 
-    // @Localizer["P15"]
-    Trace.Log($"@Localizer["P16"]: {Items.Count} - @Localizer["P17"]: Delete");
+    // @Localizer["TablesExcelDeleteLogicNote2"]
+    Trace.Log($"@Localizer["TablesExcelDeleteLogicNote2Log1"]: {Items.Count} - @Localizer["TablesExcelDeleteLogicNote2Log2"]: Delete");
     return Task.FromResult(true);
 }</Pre>
 
 <p>
-    <div class="code-label">@((MarkupString)Localizer["P18"].Value)</div>
-    <div class="mt-2">@((MarkupString)Localizer["P19"].Value)</div>
-    <div class="mt-2">@((MarkupString)Localizer["P20"].Value)</div>
+    <div class="code-label">@((MarkupString)Localizer["TablesExcelUpdateLogicTitle"].Value)</div>
+    <div class="mt-2">@((MarkupString)Localizer["TablesExcelUpdateLogicDescription1"].Value)</div>
+    <div class="mt-2">@((MarkupString)Localizer["TablesExcelUpdateLogicDescription2"].Value)</div>
 </p>
 
 <Pre>private Task&lt;bool&gt; OnDeleteAsync(Foo item, ItemChangedType changedType)
 {
-    // @Localizer["P21"]
-    Trace.Log($"@Localizer["P22"] - @Localizer["P23"]");
+    // @Localizer["TablesExcelUpdateLogicNote"]
+    Trace.Log($"@Localizer["TablesExcelUpdateLogicLog1"] - @Localizer["TablesExcelUpdateLogicLog2"]");
     return Task.FromResult(true);
 }</Pre>
 
-<DemoBlock Title="@Localizer["P24"]" Introduction="@Localizer["P25"]" Name="CellRender">
+<DemoBlock Title="@Localizer["TablesExcelCellRenderTitle"]"
+           Introduction="@Localizer["TablesExcelCellRenderIntro"]"
+           Name="CellRender"
+           Demo="typeof(Demos.Table.TablesExcel.TablesExcelCellRender)">
     <ul class="ul-demo mb-3">
-        <li>@((MarkupString)Localizer["P26"].Value)</li>
-        <li>@((MarkupString)Localizer["P27"].Value)</li>
+        <li>@((MarkupString)Localizer["TablesExcelCellRenderTips1"].Value)</li>
+        <li>@((MarkupString)Localizer["TablesExcelCellRenderTips2"].Value)</li>
     </ul>
-    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="200">
-                <EditTemplate Context="row">
-                    <div class="d-flex disabled">
-                        <div>
-                            <img src="@Foo.GetAvatarUrl(row!.Id)" class="bb-avatar" />
-                        </div>
-                        <div class="ps-2">
-                            <div>@row.Name</div>
-                            <div class="bb-sub">@Foo.GetTitle(row!.Id)</div>
-                        </div>
-                    </div>
-                </EditTemplate>
-            </TableColumn>
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Education" Width="160" />
-            <TableColumn @bind-Field="@context.Count" Width="160">
-                <EditTemplate Context="row">
-                    <div class="disabled">
-                        <div>@row!.Count %</div>
-                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
-                    </div>
-                </EditTemplate>
-            </TableColumn>
-            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
-        </TableColumns>
-    </Table>
 </DemoBlock>