feat(Table): add ShowMoreButton parameter (#7048)

ArgoZhang · web-flow · commit 8640cbf792c1 · 2025-11-01T22:05:11.000+08:00
* doc: 更正单词拼写错误

* feat: 增加 ShowMoreButton 参数

* feat: 增加 MoreButtonTemplate 参数

* feat: 增加 MoreButtonDropdownTemplate 参数

* feat: 增加 更多按钮 图标

* feat: 增加 ShowMoreButton 控制

* feat: 增加 DropdownItem 组件

* doc: 更新示例

* feat: 增加 IDropdownItem 接口

* feat: 增加 DropdownItem 组件

* feat: 增加 DropdownDivider 组件

* feat: 实现 ItemsTemplate 模板功能

* feat: 增加 RenderMoreButton 模板

* doc: 更新示例

* revert: 撤销更新

* revert: 撤销更改

* revert: 撤销更改

* doc: 更新示例

* test: 增加单元测试

* doc: 文档格式化
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor
@@ -25,8 +25,8 @@
     <div style="height: 600px;">
         <Table TItem="Foo"
                IsPagination="true" PageItemsSource="new int[] {10, 20}"
-               IsStriped="true" IsBordered="true"
-               ShowToolbar="true" ShowSearch="true" IsMultipleSelect="true" ShowExtendButtons="true"
+               IsStriped="true" IsBordered="true" ShowMoreButton="true"
+               ShowToolbar="true" ShowSearch="true" ShowCardView="true" IsMultipleSelect="true" ShowExtendButtons="true"
                AddModalTitle="@Localizer["AddModelTitle"]" EditModalTitle="@Localizer["EditModelTitle"]"
                SearchModel="@SearchModel" SearchMode="SearchMode.Top" ShowEmpty="true"
                OnQueryAsync="@OnSearchModelQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
@@ -49,6 +49,11 @@
                     </div>
                 </GroupBox>
             </SearchTemplate>
+			<MoreButtonDropdownTemplate>
+				<DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@(() => OnAction(context, "Action1"))"></DropdownItem>
+				<Divider></Divider>
+				<DropdownItem Text="Action2" Icon="fa-solid fa-home" OnClick="@(() => OnAction(context, "Action2"))"></DropdownItem>
+			</MoreButtonDropdownTemplate>
         </Table>
     </div>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor.cs
@@ -138,9 +138,9 @@ private Task<QueryData<Foo>> OnSearchModelQueryAsync(QueryPageOptions options)
             Items = items,
             TotalCount = total,
             IsSorted = true,
-            IsFiltered = options.Filters.Any(),
-            IsSearch = options.Searches.Any(),
-            IsAdvanceSearch = options.AdvanceSearches.Any()
+            IsFiltered = options.Filters.Count != 0,
+            IsSearch = options.Searches.Count != 0,
+            IsAdvanceSearch = options.AdvanceSearches.Count != 0
         });
     }
 
@@ -183,4 +183,9 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
             IsAdvanceSearch = options.CustomerSearches.Count > 0 && string.IsNullOrEmpty(options.SearchText),
         });
     }
+
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    private Task OnAction(Foo foo, string actionName) => ToastService.Information(foo.Name, $"Trigger {actionName}");
 }
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
@@ -151,6 +151,18 @@ public partial class Table<TItem>
     [Parameter]
     public RenderFragment<TItem>? RowButtonTemplate { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示 行内更多按钮 默认 false 不显示
+    /// </summary>
+    [Parameter]
+    public bool ShowMoreButton { get; set; }
+
+    /// <summary>
+    /// 获得/设置 行内更多按钮下拉框模板 默认 null
+    /// </summary>
+    [Parameter]
+    public RenderFragment<TItem>? MoreButtonDropdownTemplate { get; set; }
+
     /// <summary>
     /// 获得/设置 行内功能按钮列头文本 默认为 操作
     /// </summary>
@@ -302,7 +314,7 @@ private async Task InternalOnAddAsync()
 
     private TItem CreateTItem() => CreateItemCallback?.Invoke() ?? CreateInstance();
 
-    private readonly string ErrorMessage = $"{typeof(TItem)} create instrance failed. Please provide {nameof(CreateItemCallback)} create the {typeof(TItem)} instance. {typeof(TItem)} 自动创建实例失败，请通过 {nameof(CreateItemCallback)} 回调方法手动创建实例";
+    private readonly string ErrorMessage = $"{typeof(TItem)} create instance failed. Please provide {nameof(CreateItemCallback)} create the {typeof(TItem)} instance. {typeof(TItem)} 自动创建实例失败，请通过 {nameof(CreateItemCallback)} 回调方法手动创建实例";
 
     private TItem CreateInstance()
     {
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
@@ -39,6 +39,12 @@ public partial class Table<TItem>
     [Parameter]
     public string? EditButtonIcon { get; set; }
 
+    /// <summary>
+    /// 获得/设置 更多按钮图标
+    /// </summary>
+    [Parameter]
+    public string? MoreButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 更新按钮文本
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs
@@ -919,6 +919,7 @@ private void OnInitParameters()
         AddButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableAddButtonIcon);
         EditButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableEditButtonIcon);
         DeleteButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableDeleteButtonIcon);
+        MoreButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableMoreButtonIcon);
         RefreshButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableRefreshButtonIcon);
         CardViewButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableCardViewButtonIcon);
         ColumnListButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableColumnListButtonIcon);
diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs
@@ -560,6 +560,11 @@ public enum ComponentIcons
     /// </summary>
     TableEditButtonIcon,
 
+    /// <summary>
+    /// Table 组件 MoreButtonIcon 属性图标
+    /// </summary>
+    TableMoreButtonIcon,
+
     /// <summary>
     /// Table 组件 DeleteButtonIcon 属性图标
     /// </summary>
diff --git a/src/BootstrapBlazor/Icons/BootstrapIcons.cs b/src/BootstrapBlazor/Icons/BootstrapIcons.cs
@@ -152,6 +152,7 @@ internal static class BootstrapIcons
 
         { ComponentIcons.TableAddButtonIcon, "bi bi-plus" },
         { ComponentIcons.TableEditButtonIcon, "bi bi-check2-square" },
+        { ComponentIcons.TableMoreButtonIcon, "bi bi-three-dots" },
         { ComponentIcons.TableDeleteButtonIcon, "bi bi-x" },
         { ComponentIcons.TableRefreshButtonIcon, "bi bi-arrow-clockwise" },
         { ComponentIcons.TableCardViewButtonIcon, "bi bi-list" },
diff --git a/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs b/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs
@@ -152,6 +152,7 @@ internal static class FontAwesomeIcons
 
         { ComponentIcons.TableAddButtonIcon, "fa-solid fa-plus" },
         { ComponentIcons.TableEditButtonIcon, "fa-regular fa-pen-to-square" },
+        { ComponentIcons.TableMoreButtonIcon, "fa-solid fa-ellipsis" },
         { ComponentIcons.TableDeleteButtonIcon, "fa-solid fa-xmark" },
         { ComponentIcons.TableRefreshButtonIcon, "fa-solid fa-arrows-rotate" },
         { ComponentIcons.TableCardViewButtonIcon, "fa-solid fa-bars" },
diff --git a/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs b/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs
@@ -152,6 +152,7 @@ internal static class MaterialDesignIcons
 
         { ComponentIcons.TableAddButtonIcon, "mdi mdi-plus" },
         { ComponentIcons.TableEditButtonIcon, "mdi mdi-file-edit-outline" },
+        { ComponentIcons.TableMoreButtonIcon, "mdi mdi-dots-horizontal" },
         { ComponentIcons.TableDeleteButtonIcon, "mdi mdi-close" },
         { ComponentIcons.TableRefreshButtonIcon, "mdi mdi-refresh" },
         { ComponentIcons.TableCardViewButtonIcon, "mdi mdi-menu" },
diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs
@@ -8792,6 +8792,35 @@ public void Table_Sortable()
         });
     }
 
+    [Theory]
+    [InlineData(TableRenderMode.Table)]
+    [InlineData(TableRenderMode.CardView)]
+    public void Table_ShowMoreButton_Ok(TableRenderMode mode)
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.RenderComponent<Table<Foo>>(pb =>
+        {
+            pb.AddCascadingValue<ISortableList>(new SortableList());
+            pb.Add(a => a.TableColumns, foo => builder =>
+            {
+                builder.OpenComponent<TableColumn<Foo, string>>(0);
+                builder.AddAttribute(1, "Field", "Name");
+                builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                builder.CloseComponent();
+            });
+            pb.Add(a => a.RenderMode, mode);
+            pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+            pb.Add(a => a.ShowExtendButtons, true);
+            pb.Add(a => a.ShowMoreButton, true);
+            pb.Add(a => a.MoreButtonDropdownTemplate, context => builder =>
+            {
+                builder.AddMarkupContent(0, "<div>dropdown-item-more-template</div>");
+            });
+        });
+
+        cut.Contains("<div>dropdown-item-more-template</div");
+    }
+
     class SortableList : ISortableList { }
 
     static bool ProhibitEdit(Table<Foo> @this)
