!1734 feat(#I461UK): add SearchMode parameter on Table

* Merge branch 'dev' into dev-search
* doc: 更新搜索功能体验
* doc: 增加 Search 相关说明
* feat: 增加 ShowSearchButton 可单独控制搜索按钮
* feat: 更新默认搜索样式增加 Card
* doc: 更新搜索栏提示信息
* style: 更新样式
* refactor: 移除对 Editable 的过滤
* feat: 增加 SearchMode 参数
* feat: EditorForm 增加 Items 参数用于接收指定列

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesSearch.razor

@@ -4,101 +4,121 @@
 
 <h4>常用于单表维护，通过属性配置实现简单的增、删、改、查、排序、过滤、搜索等常用功能，通过 <code>Template</code> 的高级用法能实现非常复杂的业务需求功能</h4>
 
+<Tips>
+	<div><code>Table</code> 组件的搜索功能提供两种模式，可通过 <code>SearchMode</code> 进行设置，默认为 <code>Popup</code> 即弹窗模式，<b>Top</b> 模式下搜索栏会内置到表格上方，此模式下 <b>刷新</b> 按钮与 <b>搜索</b> 按钮二合一，可以通过设置 <code>ShowSearchButton=false</code> 关闭搜索按钮</div>
+</Tips>
+
 <Block Title="具有搜索功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件，通过设置 <code>SearchTemplate</code> 模板自定义搜索 UI">
-    <ul class="ul-demo">
-        <li>通过设置 <code>ShowEmpty="true"</code> 开启无数据显示功能</li>
-        <li><code>EmptyText</code> 参数用于设置无数据时显示文字，默认取资源文件中的内置文字</li>
-        <li><code>EmptyTemplate</code> 参数用于自定义无数据显示模板</li>
-    </ul>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true"
-           ShowToolbar="true" ShowSearch="true" IsMultipleSelect="true" ShowExtendButtons="true"
-           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
-           SearchModel="@SearchModel" ShowEmpty="true"
-           OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Education" />
-        </TableColumns>
-        <SearchTemplate>
-            <div class="row g-3 form-inline">
-                <div class="col-12 col-sm-6">
-                    <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Name)]" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Address)]" />
-                </div>
-            </div>
-        </SearchTemplate>
-    </Table>
+	<ul class="ul-demo">
+		<li>通过设置 <code>ShowEmpty="true"</code> 开启无数据显示功能</li>
+		<li><code>EmptyText</code> 参数用于设置无数据时显示文字，默认取资源文件中的内置文字</li>
+		<li><code>EmptyTemplate</code> 参数用于自定义无数据显示模板</li>
+	</ul>
+	<Table TItem="Foo"
+		   IsPagination="true" PageItemsSource="@PageItemsSource"
+		   IsStriped="true" IsBordered="true"
+		   ShowToolbar="true" ShowSearch="true" IsMultipleSelect="true" ShowExtendButtons="true"
+		   AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
+		   SearchModel="@SearchModel" ShowEmpty="true" SearchMode="SearchMode.Top"
+		   OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
+		   OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+		<TableColumns>
+			<TableColumn @bind-Field="@context.DateTime" Width="180" />
+			<TableColumn @bind-Field="@context.Name" />
+			<TableColumn @bind-Field="@context.Address" />
+			<TableColumn @bind-Field="@context.Education" />
+		</TableColumns>
+		<SearchTemplate>
+			<GroupBox Title="搜索条件">
+				<div class="row g-3 form-inline">
+					<div class="col-12 col-sm-6">
+						<BootstrapInput @bind-Value="@context.Name" placeholder="请输入姓名，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Name)]" />
+					</div>
+					<div class="col-12 col-sm-6">
+						<BootstrapInput @bind-Value="@context.Address" placeholder="请输入地址，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Address)]" />
+					</div>
+				</div>
+			</GroupBox>
+		</SearchTemplate>
+	</Table>
 </Block>
 
 <Block Title="自动生成搜索功能的表格" Introduction="当设置了 <code>ShowSearch</code> 时，如果未设置 <code>SearchTemplate</code> 编辑模板时，组件会尝试自动生成搜索条件 UI">
-    <p>列信息绑定时通过设置 <code>Searchable</code> 属性，设置搜索条件自动构建 UI</p>
-    <Tips>
-        <p>自动构建搜索弹窗时，由于各列设置 <code>Searchable</code> 此时组件会通过 <code>SearchText</code> 与设置 <code>Searchable</code> 值为 <code>true</code> 的各列自动构建搜索拉姆达表达式，通过 <code>QueryPageOptions</code> 的属性 <code>Searchs</code> 获得</p>
+	<p>列信息绑定时通过设置 <code>Searchable</code> 属性，设置搜索条件自动构建 UI</p>
+	<Tips>
+		<p>自动构建搜索弹窗时，由于各列设置 <code>Searchable</code> 此时组件会通过 <code>SearchText</code> 与设置 <code>Searchable</code> 值为 <code>true</code> 的各列自动构建搜索拉姆达表达式，通过 <code>QueryPageOptions</code> 的属性 <code>Searchs</code> 获得</p>
 
-    </Tips>
-    <Pre>if (options.Searchs.Any())
+	</Tips>
+	<Pre>if (options.Searchs.Any())
 {
     // 逻辑关系使用 FilterLogic.Or
     items = items.Where(options.Searchs.GetFilterFunc&lt;Foo&gt;(FilterLogic.Or));
 }</Pre>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true"
-           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
-           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
-           OnQueryAsync="@OnQueryAsync"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" Searchable="true" />
-            <TableColumn @bind-Field="@context.Address" Searchable="true" />
-            <TableColumn @bind-Field="@context.Education" />
-        </TableColumns>
-    </Table>
+	<GroupBox Title="搜索功能体验区" class="mb-2">
+		<div class="row g-3 form-inline">
+			<div class="col-12 col-sm-4">
+				<Switch DisplayText="搜索模式" ShowLabel="true" @bind-Value="SearchModeFlag" />
+			</div>
+			<div class="col-12 col-sm-4">
+				<Switch DisplayText="显示重置" ShowLabel="true" @bind-Value="ShowResetButton" />
+			</div>
+			<div class="col-12 col-sm-4">
+				<Switch DisplayText="显示搜索" ShowLabel="true" @bind-Value="ShowSearchButton" IsDisabled="SearchModeFlag" />
+			</div>
+		</div>
+	</GroupBox>
+	<Table TItem="Foo"
+		   IsPagination="true" PageItemsSource="@PageItemsSource"
+		   IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true"
+		   SearchMode="SearchModeValue" ShowResetButton="ShowResetButton" ShowSearchButton="ShowSearchButton"
+		   ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
+		   AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
+		   OnQueryAsync="@OnQueryAsync"
+		   OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+		<TableColumns>
+			<TableColumn @bind-Field="@context.DateTime" Width="180" />
+			<TableColumn @bind-Field="@context.Name" Searchable="true" />
+			<TableColumn @bind-Field="@context.Address" Searchable="true" />
+			<TableColumn @bind-Field="@context.Education" />
+		</TableColumns>
+	</Table>
 </Block>
 
 <Block Title="自定义列搜索模板" Introduction="当设置了 <code>SearchTemplate</code> 时，组件自动生成搜索 UI 时使用此模板作为呈现 UI">
-    <p>通过设置姓名列的 <code>SearchTemplate</code> 自定义编辑时使用下拉框来选择姓名</p>
-    <p>由于是搜索条件，本例中姓名搜索列下拉框增加了 请选择... 项</p>
-    <p>生成列搜索模板是查找顺序为 SearchTemplate -> AutoGenerate 优先查找是否设置了搜索模板，然后根据绑定字段类型自动生成</p>
-    <p>通过设置 <code>ShowSearch="true"</code> <code>ShowSearchText="false"</code> 设置搜索栏仅显示 <b>高级搜索</b></p>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
-           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
-           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
-           OnQueryAsync="@OnQueryAsync"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" Searchable="true">
-                <SearchTemplate Context="value">
-                    @{
-                        var model = value as Foo;
-                        if (model != null)
-                        {
-                            var items = new List<SelectedItem>()
-                            {
-                                new SelectedItem { Text = "请选择 ...", Value = "" },
-                                new SelectedItem { Text = "姓名1", Value = "姓名1" },
-                                new SelectedItem { Text = "姓名2", Value = "姓名2" },
-                            };
-                            <div class="col-12 col-sm-6">
-                                <Select Items="items" @bind-Value="@model.Name" ShowLabel="true" DisplayText="姓名" />
-                            </div>
-                        }
-                    }
-                </SearchTemplate>
-            </TableColumn>
-            <TableColumn @bind-Field="@context.Address" Searchable="true" />
-            <TableColumn @bind-Field="@context.Education" />
-        </TableColumns>
-    </Table>
+	<p>通过设置姓名列的 <code>SearchTemplate</code> 自定义编辑时使用下拉框来选择姓名</p>
+	<p>由于是搜索条件，本例中姓名搜索列下拉框增加了 请选择... 项</p>
+	<p>生成列搜索模板是查找顺序为 SearchTemplate -> AutoGenerate 优先查找是否设置了搜索模板，然后根据绑定字段类型自动生成</p>
+	<p>通过设置 <code>ShowSearch="true"</code> <code>ShowSearchText="false"</code> 设置搜索栏仅显示 <b>高级搜索</b></p>
+	<Table TItem="Foo"
+		   IsPagination="true" PageItemsSource="@PageItemsSource"
+		   IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
+		   ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
+		   AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
+		   OnQueryAsync="@OnQueryAsync"
+		   OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+		<TableColumns>
+			<TableColumn @bind-Field="@context.DateTime" Width="180" />
+			<TableColumn @bind-Field="@context.Name" Searchable="true">
+				<SearchTemplate Context="value">
+					@{
+						var model = value as Foo;
+						if (model != null)
+						{
+							var items = new List<SelectedItem>()
+					{
+					new SelectedItem { Text = "请选择 ...", Value = "" },
+					new SelectedItem { Text = "姓名1", Value = "姓名1" },
+					new SelectedItem { Text = "姓名2", Value = "姓名2" },
+					};
+							<div class="col-12 col-sm-6">
+								<Select Items="items" @bind-Value="@model.Name" ShowLabel="true" DisplayText="姓名" />
+							</div>
+						}
+					}
+				</SearchTemplate>
+			</TableColumn>
+			<TableColumn @bind-Field="@context.Address" Searchable="true" />
+			<TableColumn @bind-Field="@context.Education" />
+		</TableColumns>
+	</Table>
 </Block>

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesSearch.razor.cs

@@ -33,6 +33,24 @@ namespace BootstrapBlazor.Shared.Pages.Table
         [NotNull]
         private List<Foo>? Items { get; set; }
 
+        private bool SearchModeFlag
+        {
+            get
+            {
+                return SearchModeValue == SearchMode.Popup;
+            }
+            set
+            {
+                SearchModeValue = value ? SearchMode.Popup : SearchMode.Top;
+            }
+        }
+
+        private bool ShowResetButton { get; set; } = true;
+
+        private bool ShowSearchButton { get; set; } = true;
+
+        private SearchMode SearchModeValue { get; set; }
+
         /// <summary>
         /// OnInitialized 方法
         /// </summary>

src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs

@@ -180,7 +180,7 @@ namespace BootstrapBlazor.Components
                 if (Items != null)
                 {
                     // 通过级联参数渲染组件
-                    FormItems.AddRange(Items.Where(i => i.Editable));
+                    FormItems.AddRange(Items);
                 }
                 else
                 {

src/BootstrapBlazor/Components/Table/Table.css

@@ -573,3 +573,7 @@ form .table .table-cell > .form-label {
 form .table .table-cell > textarea {
     width: 100%;
 }
+
+.table-search {
+    margin-bottom: .5rem;
+}

src/BootstrapBlazor/Components/Table/Table.razor

@@ -21,6 +21,41 @@
     }
     else
     {
+		@if(ShowSearch && SearchMode == SearchMode.Top)
+		{
+			<div class="table-search">
+				@if(SearchTemplate != null)
+				{
+					@SearchTemplate.Invoke(SearchModel)
+				}
+				else
+				{
+					<Card>
+						<CardHeader>
+							<div class="d-flex">
+								<div class="flex-fill">@SearchModalTitle</div>
+								@if(ShowResetButton)
+								{
+									<Button Color="@Color.Secondary" Icon="fa fa-trash" class="btn-xs ms-2" OnClickWithoutRender="@ClearSearchClick">
+										<span class="d-none d-sm-inline-block">@ResetSearchButtonText</span>
+									</Button>
+								}
+								@if (ShowSearchButton)
+								{
+									<Button Color="@Color.Primary" Icon="fa fa-search" class="btn-xs ms-2" OnClickWithoutRender="@SearchClick">
+										<span class="d-none d-sm-inline-block">@SearchButtonText</span>
+									</Button>
+								}
+							</div>
+						</CardHeader>
+						<CardBody>
+							<EditorForm Model="SearchModel" Items="GetSearchColumns()" ItemsPerRow="SearchDialogItemsPerRow" RowType="SearchDialogRowType" LabelAlign="SearchDialogLabelAlign">
+							</EditorForm>
+						</CardBody>
+					</Card>
+				}
+			</div>
+		}
         <div class="table-toolbar">
             @if (ShowToolbar)
             {
@@ -102,35 +137,35 @@
                     }
                 </div>
             }
-            @if (ShowSearch)
+            @if (ShowSearch && SearchMode == SearchMode.Popup)
             {
-                <div class="float-end table-toolbar-button btn-group">
-                    @if (ShowSearchText)
-                    {
-                        <div class="input-group">
-                            <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText" @bind-Value="@SearchText">
-                                <Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
-                            </BootstrapInput>
-                            <Button Color="@Color.Secondary" Icon="fa fa-search" OnClickWithoutRender="@SearchClick">
-                                <span class="d-none d-sm-inline-block">@SearchButtonText</span>
-                            </Button>
-                            @if (ShowResetSearch)
-                            {
-                                <Button Color="@Color.Secondary" Icon="fa fa-trash" OnClickWithoutRender="@ClearSearchClick">
-                                    <span class="d-none d-sm-inline-block">@ResetSearchButtonText</span>
-                                </Button>
-                            }
-                            @if (ShowAdvancedSearch)
-                            {
-                                @RenderAdvanceSearchButton
-                            }
-                        </div>
-                    }
-                    else if (ShowAdvancedSearch)
-                    {
-                        @RenderAdvanceSearchButton
-                    }
-                </div>
+				<div class="float-end table-toolbar-button btn-group">
+					@if (ShowSearchText)
+					{
+						<div class="input-group">
+							<BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText" @bind-Value="@SearchText">
+								<Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
+							</BootstrapInput>
+							<Button Color="@Color.Secondary" Icon="fa fa-search" OnClickWithoutRender="@SearchClick">
+								<span class="d-none d-sm-inline-block">@SearchButtonText</span>
+							</Button>
+							@if (ShowResetButton)
+							{
+								<Button Color="@Color.Secondary" Icon="fa fa-trash" OnClickWithoutRender="@ClearSearchClick">
+									<span class="d-none d-sm-inline-block">@ResetSearchButtonText</span>
+								</Button>
+							}
+							@if (ShowAdvancedSearch)
+							{
+								@RenderAdvanceSearchButton
+							}
+						</div>
+					}
+					else if (ShowAdvancedSearch)
+					{
+						@RenderAdvanceSearchButton
+					}
+				</div>
             }
         </div>
 
@@ -666,23 +701,21 @@ RenderFragment<TItem> RenderEditForm => item =>
             else
             {
                 <ValidateForm Model="@item" OnValidSubmit="@(new Func<EditContext, Task>(SaveAsync))">
-                    <CascadingValue Value="@Columns.Where(c => c.Editable)" IsFixed="true">
-                        <EditorForm TModel="TItem" ItemsPerRow="EditDialogItemsPerRow" RowType="EditDialogRowType" LabelAlign="EditDialogLabelAlign">
-                            <Buttons>
-                                <div class="table-modal-footer">
-                                    @if (IsTracking)
-                                    {
-                                        <Button Color="Color.Primary" Icon="fa fa-save" Text="@CloseButtonText" OnClick="CancelSave()" />
-                                    }
-                                    else
-                                    {
-                                        <Button Color="Color.Secondary" Icon="fa fa-times" Text="@CancelDeleteButtonText" OnClick="CancelSave()" />
-                                        <Button Color="Color.Primary" ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="@SaveButtonText" />
-                                    }
-                                </div>
-                            </Buttons>
-                        </EditorForm>
-                    </CascadingValue>
+                    <EditorForm TModel="TItem" Items="Columns.Where(c => c.Editable)" ItemsPerRow="EditDialogItemsPerRow" RowType="EditDialogRowType" LabelAlign="EditDialogLabelAlign">
+                        <Buttons>
+                            <div class="table-modal-footer">
+                                @if (IsTracking)
+                                {
+                                    <Button Color="Color.Primary" Icon="fa fa-save" Text="@CloseButtonText" OnClick="CancelSave()" />
+                                }
+                                else
+                                {
+                                    <Button Color="Color.Secondary" Icon="fa fa-times" Text="@CancelDeleteButtonText" OnClick="CancelSave()" />
+                                    <Button Color="Color.Primary" ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="@SaveButtonText" />
+                                }
+                            </div>
+                        </Buttons>
+                    </EditorForm>
                 </ValidateForm>
             }
         </div>

src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs

@@ -134,7 +134,7 @@ namespace BootstrapBlazor.Components
         public string? SearchButtonText { get; set; }
 
         /// <summary>
-        /// 搜索按钮文本
+        /// 搜索弹窗文本
         /// </summary>
         [Parameter]
         [NotNull]

src/BootstrapBlazor/Components/Table/Table.razor.Search.cs

@@ -63,7 +63,13 @@ namespace BootstrapBlazor.Components
         /// 获得/设置 是否显示清空搜索按钮 默认显示 <see cref="ShowSearch" />
         /// </summary>
         [Parameter]
-        public bool ShowResetSearch { get; set; } = true;
+        public bool ShowResetButton { get; set; } = true;
+
+        /// <summary>
+        /// 获得/设置 是否显示搜索按钮 默认显示 <see cref="ShowSearch" />
+        /// </summary>
+        [Parameter]
+        public bool ShowSearchButton { get; set; } = true;
 
         /// <summary>
         /// 获得/设置 是否显示高级搜索按钮 默认显示 <see cref="ShowSearch" />
@@ -77,6 +83,30 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public string? SearchText { get; set; }
 
+        /// <summary>
+        /// 获得/设置 搜索栏渲染方式 默认 Popup 弹窗模式
+        /// </summary>
+        [Parameter]
+        public SearchMode SearchMode { get; set; }
+
+        /// <summary>
+        /// 获得/设置 每行显示组件数量 默认为 2
+        /// </summary>
+        [Parameter]
+        public int SearchDialogItemsPerRow { get; set; } = 2;
+
+        /// <summary>
+        /// 获得/设置 设置行内组件布局格式 默认 Inline 布局
+        /// </summary>
+        [Parameter]
+        public RowType SearchDialogRowType { get; set; } = RowType.Inline;
+
+        /// <summary>
+        /// 获得/设置 设置 <see cref="SearchDialogRowType" /> Inline 模式下标签对齐方式 默认 None 等效于 Left 左对齐
+        /// </summary>
+        [Parameter]
+        public Alignment SearchDialogLabelAlign { get; set; }
+
         /// <summary>
         /// 重置搜索按钮异步回调方法
         /// </summary>
@@ -125,12 +155,12 @@ namespace BootstrapBlazor.Components
                 DialogBodyTemplate = SearchTemplate,
                 OnResetSearchClick = ResetSearchClick,
                 OnSearchClick = SearchClick,
-                RowType = EditDialogRowType,
-                ItemsPerRow = EditDialogItemsPerRow,
-                LabelAlign = EditDialogLabelAlign
+                RowType = SearchDialogRowType,
+                ItemsPerRow = SearchDialogItemsPerRow,
+                LabelAlign = SearchDialogLabelAlign
             };
 
-            var columns = Columns.Where(i => i.Searchable || i.SearchTemplate != null).ToList();
+            var columns = Columns.Where(i => i.Searchable).ToList();
             columns.ForEach(col => col.EditTemplate = col.SearchTemplate);
 
             if (columns.Any())
@@ -167,6 +197,17 @@ namespace BootstrapBlazor.Components
             await ResetSearchClick();
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        protected List<ITableColumn> GetSearchColumns()
+        {
+            var cols = Columns.Where(c => c.Searchable).ToList();
+            cols.ForEach(col => col.EditTemplate = col.SearchTemplate);
+            return cols;
+        }
+
         /// <summary>
         /// 客户端 SearchTextbox 文本框内按回车时调用此方法
         /// </summary>

src/BootstrapBlazor/Enums/SearchMode.cs

@@ -0,0 +1,22 @@
+// 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.Components
+{
+    /// <summary>
+    /// 搜索栏渲染模式 默认 Popup 弹窗形式
+    /// </summary>
+    public enum SearchMode
+    {
+        /// <summary>
+        /// 弹窗模式
+        /// </summary>
+        Popup,
+
+        /// <summary>
+        /// Table 组件上方
+        /// </summary>
+        Top
+    }
+}