!3780 doc(#I6B4VH): update TableHeader demo

* update TablesHeader demo
2025-12-20 02:16:40 +08:00 · 2023-01-20 07:52:09 +00:00
parent f8a6d721d3
commit 15f302a744
5 changed files with 109 additions and 111 deletions
--- a/src/BootstrapBlazor.Shared/Demos/Table/TablesHeader/TablesHeaderNormal.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Table/TablesHeader/TablesHeaderNormal.razor
@@ -0,0 +1,72 @@
+@inject IStringLocalizer<TablesHeaderNormal> Localizer
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo" OnQueryAsync="@OnQueryAsync" IsBordered="true" IsStriped="true" ShowMultiFilterHeader="false">
+        <MultiHeaderTemplate>
+            <tr>
+                <th rowspan="2" class="table-header-group-th1"><div class="table-cell">@Localizer["TablesHeaderNormal_Time"]</div></th>
+                <th colspan="2" class="table-header-group-th2"><div class="table-cell">@Localizer["TablesHeaderNormal_Info"]</div></th>
+            </tr>
+            <tr>
+                <th><div class="table-cell">@Localizer["TablesHeaderNormal_Name"]</div></th>
+                <th><div class="table-cell">@Localizer["TablesHeaderNormal_Address"]</div></th>
+            </tr>
+        </MultiHeaderTemplate>
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
+            <TableColumn @bind-Field="@context.Name" Width="100" Filterable="true" Sortable="true" />
+            <TableColumn @bind-Field="@context.Address" Filterable="true" Sortable="true" />
+        </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, 4);
+    }
+
+    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
+    {
+        IEnumerable<Foo> items = Items;
+
+        var isFiltered = false;
+        if (options.Filters.Any())
+        {
+            items = items.Where(options.Filters.GetFilterFunc<Foo>());
+            isFiltered = true;
+        }
+
+        var isSorted = false;
+        if (!string.IsNullOrEmpty(options.SortName))
+        {
+            var invoker = Foo.GetNameSortFunc();
+            items = invoker(items, options.SortName, options.SortOrder);
+            isSorted = true;
+        }
+
+        var total = items.Count();
+        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
+        return Task.FromResult(new QueryData<Foo>()
+        {
+            Items = items,
+            TotalCount = total,
+            IsSorted = isSorted,
+            IsFiltered = isFiltered,
+            IsSearch = true
+        });
+    }
+}
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -4925,18 +4925,18 @@
    "BaiduOcr": "IBaiduOcr "
  },
  "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
-    "H1": "Header grouping function",
-    "H2": "When the data structure is complex, multi-level headers can be used to show the hierarchical relationship of the data",
-    "P1": "Basic usage",
-    "P2": "Set the <code>MultiHeaderTemplate</code> template",
-    "P3": "by setting",
-    "P4": "value to control whether to display the filter header",
-    "P5": "Pay attention to the details. After the first column of cells is merged, there will be no cells in the first column of the last row header, so you need to set the style yourself",
-    "P6": "consistent with other cells",
-    "P7": "time",
-    "P8": "Personal information",
-    "P9": "personal name",
-    "P10": "personal address"
+    "TablesHeaderTitle": "Header grouping function",
+    "TablesHeaderDescription": "When the data structure is complex, multi-level headers can be used to show the hierarchical relationship of the data",
+    "TablesHeaderNormalTitle": "Basic usage",
+    "TablesHeaderNormalIntro": "Set the <code>MultiHeaderTemplate</code> template",
+    "TablesHeaderNormalTips1": "by setting <code>ShowMultiFilterHeader</code> value to control whether to display the filter header",
+    "TablesHeaderNormalTips2": "Pay attention to the details. After the first column of cells is merged, there will be no cells in the first column of the last row header, so you need to set the style yourself  <code>border-bottom</code> consistent with other cells"
+  },
+  "BootstrapBlazor.Shared.Demos.Table.TablesHeader.TablesHeaderNormal": {
+    "TablesHeaderNormal_Time": "time",
+    "TablesHeaderNormal_Info": "Personal information",
+    "TablesHeaderNormal_Name": "personal name",
+    "TablesHeaderNormal_Address": "personal address"
  },
  "BootstrapBlazor.Shared.Samples.SelectTrees": {
    "H1": "SelectTree",
@@ -5368,7 +5368,7 @@
    "TablesWrapDataResizingTips4": "After the text in the cell is omitted, you can use the <code>ShowTips</code> property to control whether to display all the text on mouse hover, the default is <code>false</code>",
    "TablesWrapDataResizingTips5": "Drag the address column, the cell display content will automatically increase and decrease",
    "TablesWrapCustomCellTitle": "Custom in-cell typography",
-    "TablesWrapCustomCellIntro": "Use templates for special layout of in-cell data",
+    "TablesWrapCustomCellIntro": "Use templates for special layout of in-cell data"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapNormal": {
    "TablesWrapNormalColumHeaderText_DateTime": "I'm a super long schedule head",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -570,7 +570,7 @@
    "BaiduOcrStep1": "1. 通过注入服务获得 <code>IBaiduOcr</code> 实例",
    "BaiduOcrStep2": "2. 调用服务相对应的识别方法即可",
    "VerifyVatInvoiceTitle": "增值税验真",
-    "VerifyVatInvoiceIntro": "通过调用 <code>IBaiduOcr</code> 服务实例的发票验真方法 <code>VerifyInvoiceAsync</code> 返回 <code>InvoiceVerifyResult</code> 其属性 <code>Valid</code> 为 <code>true</code> 时为真",
+    "VerifyVatInvoiceIntro": "通过调用 <code>IBaiduOcr</code> 服务实例的发票验真方法 <code>VerifyInvoiceAsync</code> 返回 <code>InvoiceVerifyResult</code> 其属性 <code>Valid</code> 为 <code>true</code> 时为真"
  },
  "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNormal": {
    "LeftAlignedButton": "编辑弹窗(左对齐)",
@@ -4939,19 +4939,20 @@
    "BaiduOcr": "文字识别服务 IBaiduOcr "
  },
  "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
-    "H1": "表头分组功能",
-    "H2": "数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系",
-    "P1": "基础用法",
-    "P2": "设置 <code>MultiHeaderTemplate</code> 模板即可",
-    "P3": "通过设置",
-    "P4": "值，来控制是否显示过滤行头",
-    "P5": "注意细节，首列单元格合并后导致最后一行表头第一列无单元格，所以需要自行设置样式",
-    "P6": "与其他单元格一致",
-    "P7": "时间",
-    "P8": "个人信息",
-    "P9": "个人姓名",
-    "P10": "个人地址"
+    "TablesHeaderTitle": "表头分组功能",
+    "TablesHeaderDescription": "数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系",
+    "TablesHeaderNormalTitle": "基础用法",
+    "TablesHeaderNormalIntro": "设置 <code>MultiHeaderTemplate</code> 模板即可",
+    "TablesHeaderNormalTips1": "通过设置 <code>ShowMultiFilterHeader</code> 值，来控制是否显示过滤行头",
+    "TablesHeaderNormalTips2": "注意细节，首列单元格合并后导致最后一行表头第一列无单元格，所以需要自行设置样式 <code>border-bottom</code> 与其他单元格一致"
  },
+  "BootstrapBlazor.Shared.Demos.Table.TablesHeader.TablesHeaderNormal": {
+    "TablesHeaderNormal_Time": "时间",
+    "TablesHeaderNormal_Info": "个人信息",
+    "TablesHeaderNormal_Name": "个人姓名",
+    "TablesHeaderNormal_Address": "个人地址"
+  },
+
  "BootstrapBlazor.Shared.Samples.SelectTrees": {
    "H1": "树状选择器 SelectTree",
    "H2": "下拉框内呈现树状数据结构，供选择",
@@ -5398,7 +5399,7 @@
    "TablesWrapDataResizingTips4": "单元格内文本被省略后，可以通过 <code>ShowTips</code> 属性来控制鼠标悬停是否显示全部文本，默认为 <code>false</code>",
    "TablesWrapDataResizingTips5": "拖动地址列，单元格显示内容自动增加与减少",
    "TablesWrapCustomCellTitle": "自定义单元格内排版",
-    "TablesWrapCustomCellIntro": "使用模板对单元格内数据进行特殊布局",
+    "TablesWrapCustomCellIntro": "使用模板对单元格内数据进行特殊布局"
  },
  "BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapNormal": {
    "TablesWrapNormalColumHeaderText_DateTime": "我是超级长的时间表头",
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesHeader.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesHeader.razor
@@ -1,28 +1,15 @@
@page "/tables/multi-header"
+@inject IStringLocalizer<TablesHeader> Localizer

-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["TablesHeaderTitle"]</h3>
+<h4>@Localizer["TablesHeaderDescription"]</h4>

-<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="MultiHeaderTemplate">
+<DemoBlock Title="@Localizer["TablesHeaderNormalTitle"]"
+           Introduction="@Localizer["TablesHeaderNormalIntro"]"
+           Name="Normal"
+           Demo="typeof(Demos.Table.TablesHeader.TablesHeaderNormal)">
    <p>
-        <div>@Localizer["P3"] <code>ShowMultiFilterHeader</code> @Localizer["P4"]</div>
-        <div>@Localizer["P5"] <code>border-bottom</code> @Localizer["P6"]</div>
+        <div>@((MarkupString)Localizer["TablesHeaderNormalTips1"].Value)</div>
+        <div>@((MarkupString)Localizer["TablesHeaderNormalTips2"].Value)</div>
    </p>
-    <Table TItem="Foo" OnQueryAsync="@OnQueryAsync" IsBordered="true" IsStriped="true" ShowMultiFilterHeader="false">
-        <MultiHeaderTemplate>
-            <tr>
-                <th rowspan="2" class="table-header-group-th1"><div class="table-cell">@Localizer["P7"]</div></th>
-                <th colspan="2" class="table-header-group-th2"><div class="table-cell">@Localizer["P8"]</div></th>
-            </tr>
-            <tr>
-                <th><div class="table-cell">@Localizer["P9"]</div></th>
-                <th><div class="table-cell">@Localizer["P10"]</div></th>
-            </tr>
-        </MultiHeaderTemplate>
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
-            <TableColumn @bind-Field="@context.Name" Width="100" Filterable="true" Sortable="true" />
-            <TableColumn @bind-Field="@context.Address" Filterable="true" Sortable="true" />
-        </TableColumns>
-    </Table>
 </DemoBlock>
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesHeader.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesHeader.razor.cs
@@ -1,62 +0,0 @@
-// 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/
-
-namespace BootstrapBlazor.Shared.Samples.Table;
-
-/// <summary>
-/// 
-/// </summary>
-public partial class TablesHeader
-{
-    [NotNull]
-    private List<Foo>? Items { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<TablesHeader>? Localizer { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
-
-    /// <summary>
-    /// OnInitialized
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        Items = Foo.GenerateFoo(LocalizerFoo, 4);
-    }
-
-    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
-    {
-        IEnumerable<Foo> items = Items;
-
-        var isFiltered = false;
-        if (options.Filters.Any())
-        {
-            items = items.Where(options.Filters.GetFilterFunc<Foo>());
-            isFiltered = true;
-        }
-
-        var isSorted = false;
-        if (!string.IsNullOrEmpty(options.SortName))
-        {
-            var invoker = Foo.GetNameSortFunc();
-            items = invoker(items, options.SortName, options.SortOrder);
-            isSorted = true;
-        }
-
-        var total = items.Count();
-        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
-        return Task.FromResult(new QueryData<Foo>()
-        {
-            Items = items,
-            TotalCount = total,
-            IsSorted = isSorted,
-            IsFiltered = isFiltered,
-            IsSearch = true
-        });
-    }
-}