doc(Table): add sample code for row span (#5080)

* doc: 增加 MergeTableRow 示例

* doc: 增加行合并示例

Co-Authored-By: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/MergeTableRow.razor

@@ -0,0 +1,39 @@
+@if (Context.Row.Id == 1)
+{
+    <tr>
+        <td rowspan="4">@Context.Row.DateTime</td>
+        <td>@Context.Row.Name</td>
+        <td>@Context.Row.Address</td>
+        <td>@Context.Row.Count</td>
+    </tr>
+}
+else if (Context.Row.Id == 2)
+{
+    <tr>
+        <td rowspan="3">@Context.Row.Name</td>
+        <td>@Context.Row.Address</td>
+        <td>@Context.Row.Count</td>
+    </tr>
+}
+else if (Context.Row.Id == 3)
+{
+    <tr>
+        <td rowspan="2">@Context.Row.Address</td>
+        <td>@Context.Row.Count</td>
+    </tr>
+}
+else if (Context.Row.Id == 4)
+{
+    <tr>
+        <td>@Context.Row.Count</td>
+    </tr>
+}
+else
+{
+    <tr>
+        <td>@Context.Row.DateTime</td>
+        <td>@Context.Row.Name</td>
+        <td>@Context.Row.Address</td>
+        <td>@Context.Row.Count</td>
+    </tr>
+}

src/BootstrapBlazor.Server/Components/Components/MergeTableRow.razor.cs

@@ -0,0 +1,19 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// 自定义行组件
+/// </summary>
+public partial class MergeTableRow
+{
+    /// <summary>
+    /// 获得/设置 行上下文数据实例
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public TableRowContext<Foo>? Context { get; set; }
+}

src/BootstrapBlazor.Server/Components/Samples/Table/TablesRow.razor

@@ -146,7 +146,25 @@
 <DemoBlock Title="@Localizer["RowTemplateTitle"]"
            Introduction="@Localizer["RowTemplateIntro"]"
            Name="RowTemplate">
-    <section ignore>@((MarkupString)Localizer["RowTemplateDesc"].Value)</section>
+    <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" class="table-row-template"
+           IsStriped="true" IsBordered="true"
+           OnQueryAsync="@OnQueryAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Name" Width="100" />
+            <TableColumn @bind-Field="@context.Address" />
+            <TableColumn @bind-Field="@context.Count" />
+        </TableColumns>
+        <RowTemplate>
+            <MergeTableRow Context="@context"></MergeTableRow>
+        </RowTemplate>
+    </Table>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["RowContentTemplateTitle"]"
+           Introduction="@Localizer["RowContentTemplateIntro"]"
+           Name="RowContentTemplate">
+    <section ignore>@((MarkupString)Localizer["RowContentTemplateDesc"].Value)</section>
 
     <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" class="table-row-template"
            IsStriped="true" IsBordered="true"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -5528,9 +5528,11 @@
     "ClickToSelectP3": "Currently selected row:",
     "ClickToSelectNoneText": "None",
     "PlaceHolder": "Cannot be empty, within 50 characters",
+    "RowContentTemplateTitle": "Row Content Template",
+    "RowContentTemplateIntro": "By setting the <code>RowContentTemplate</code> template, you can implement custom row cell linkage logic by sub-packaging components to achieve performance optimization and avoid the problem of refreshing the entire table component after linkage due to cell data refresh.",
+    "RowContentTemplateDesc": "In this example, a custom component is used to select a date, link the quantity column, randomly generate a random number, and save it to the original data, so there is no need to refresh the entire <code>Table</code> component.",
     "RowTemplateTitle": "Row Template",
-    "RowTemplateIntro": "By setting the <code>RowTemplate</code> template, you can implement custom row cell linkage logic by sub-packaging components to achieve performance optimization and avoid the problem of refreshing the entire table component after linkage due to cell data refresh.",
-    "RowTemplateDesc": "In this example, a custom component is used to select a date, link the quantity column, randomly generate a random number, and save it to the original data, so there is no need to refresh the entire <code>Table</code> component."
+    "RowTemplateIntro": "By setting the <code>RowTemplate</code> template, you can implement the row merging function according to your own business logic"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesDynamic": {
     "TablesDynamicTitle": "Table Dynamic",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -5528,9 +5528,11 @@
     "ClickToSelectP3": "当前选中行：",
     "ClickToSelectNoneText": "无",
     "PlaceHolder": "不可为空，50字以内",
+    "RowContentTemplateTitle": "行内容模板",
+    "RowContentTemplateIntro": "通过设置 <code>RowContentTemplate</code> 模板，可通过分装组件的方式实现自定义行内单元格联动逻辑，达到性能最优化，避免单元格数据刷新导致联动后需要刷新整个表格组件的问题，可用于销售类软件，调整单价时总价列变化需求",
+    "RowContentTemplateDesc": "本例中通过自定义组件，实现选择日期后，联动数量列，随机生成一个随机数字，并且保存到原始数据中，从而不需要刷新整个 <code>Table</code> 组件",
     "RowTemplateTitle": "行模板",
-    "RowTemplateIntro": "通过设置 <code>RowTemplate</code> 模板，可通过分装组件的方式实现自定义行内单元格联动逻辑，达到性能最优化，避免单元格数据刷新导致联动后需要刷新整个表格组件的问题，可用于销售类软件，调整单价时总价列变化需求",
-    "RowTemplateDesc": "本例中通过自定义组件，实现选择日期后，联动数量列，随机生成一个随机数字，并且保存到原始数据中，从而不需要刷新整个 <code>Table</code> 组件"
+    "RowTemplateIntro": "通过设置 <code>RowTemplate</code> 模板，可以根据自己的业务逻辑实现行合并功能"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesDynamic": {
     "TablesDynamicTitle": "Table 表格",