feat(SelectTable): support Search function

src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor

@@ -32,7 +32,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="ValueTemplate">
-    <SelectTable TItem="Foo" @bind-Value="@_templateFoo" OnQueryAsync="OnQueryAsync" ShowAppendArrow="false">
+    <SelectTable TItem="Foo" @bind-Value="@_templateFoo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" ShowAppendArrow="false">
         <TableColumns>
             <TableColumn @bind-Field="@context.Name"></TableColumn>
             <TableColumn @bind-Field="@context.Address"></TableColumn>
@@ -83,13 +83,29 @@
     </ValidateForm>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="Sortable">
-    <SelectTable TItem="Foo" @bind-Value="@Model.Foo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" DisplayText="Test">
+<DemoBlock Title="@Localizer["SortableTitle"]" Introduction="@Localizer["SortableIntro"]" Name="Sortable">
+    <SelectTable TItem="Foo" @bind-Value="@_sortableFoo" OnQueryAsync="OnFilterQueryAsync" GetTextCallback="@GetTextCallback">
         <TableColumns>
             <TableColumn @bind-Field="@context.Name" Sortable="true"></TableColumn>
             <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true"></TableColumn>
         </TableColumns>
     </SelectTable>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["SearchTitle"]" Introduction="@Localizer["SearchIntro"]" Name="Search">
+    <div class="row g-3">
+        <div class="col-4">
+            <SelectTable TItem="Foo" @bind-Value="_searchFoo"
+                         OnQueryAsync="OnFilterQueryAsync" GetTextCallback="@GetTextCallback"
+                         ShowSearch="true" IsPagination="true" PageItemsSource="PageItemsSource">
+                <TableColumns>
+                    <TableColumn @bind-Field="@context.Name" Sortable="true" Searchable="true" Width="100"></TableColumn>
+                    <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" Searchable="true"></TableColumn>
+                    <TableColumn @bind-Field="@context.Education" Sortable="true" Filterable="true" Searchable="true" Width="100"></TableColumn>
+                </TableColumns>
+            </SelectTable>
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs

@@ -17,6 +17,8 @@ public partial class SelectTables
     [NotNull]
     private IStringLocalizer<SelectTables>? Localizer { get; set; }
 
+    private readonly int[] PageItemsSource = [10, 20, 40];
+
     private Foo? _foo;
 
     private Foo? _colorFoo;
@@ -27,6 +29,8 @@ public partial class SelectTables
 
     private Foo? _sortableFoo;
 
+    private Foo? _searchFoo;
+
     private readonly SelectTableMode Model = new();
 
     private static string? GetTextCallback(Foo foo) => foo.Name;
@@ -58,15 +62,23 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
     private Task<QueryData<Foo>> OnFilterQueryAsync(QueryPageOptions options)
     {
         // 此处代码拷贝后需要自行更改根据 options 中的条件从数据库中获取数据集合
-        _filterItems = _filterItems.Where(options.ToFilter().GetFilterFunc<Foo>());
+        var items = _filterItems.Where(options.ToFilter().GetFilterFunc<Foo>());
 
         if (!string.IsNullOrEmpty(options.SortName))
         {
-            _filterItems = _filterItems.Sort(options.SortName, options.SortOrder);
+            items = items.Sort(options.SortName, options.SortOrder);
+        }
+
+        var count = items.Count();
+        if(options.IsPage)
+        {
+            items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
         }
+
         return Task.FromResult(new QueryData<Foo>()
         {
-            Items = _filterItems.ToList(),
+            Items = items.ToList(),
+            TotalCount = count,
             IsAdvanceSearch = true,
             IsFiltered = true,
             IsSearch = true,

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

@@ -6161,7 +6161,11 @@
     "AttributeTableMinWidth": "The min width of Table",
     "AttributeTemplate": "Display Template",
     "ValidateFormTitle": "ValidateForm",
-    "ValidateFormIntro": "Intercept data when the value is empty"
+    "ValidateFormIntro": "Intercept data when the value is empty",
+    "SortableTitle": "Sort/Filter",
+    "SortableIntro": "Enable sorting and filtering functions by setting <code>Sortable</code> <code>Filterable</code> in <code>TableColumn</code>, just like the component <code>Table</code>",
+    "SearchTitle": "Sort/Filter",
+    "SearchIntro": "By setting <code>TableColumn</code> <code>Searchable</code> to enable column searchability, just like the component <code>Table</code>, by setting <code>IsPagination</code> <code>ShowSearch</code> to enable pagination and table search functions"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} is required."

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

@@ -6161,7 +6161,11 @@
     "AttributeTableMinWidth": "弹窗表格最小宽度",
     "AttributeTemplate": "显示模板",
     "ValidateFormTitle": "客户端验证",
-    "ValidateFormIntro": "下拉框未选择时，点击提交按钮时拦截。"
+    "ValidateFormIntro": "下拉框未选择时，点击提交按钮时拦截。",
+    "SortableTitle": "排序过滤",
+    "SortableIntro": "通过设置 <code>TableColumn</code> 的 <code>Sortable</code> <code>Filterable</code> 开启排序与过滤功能，与组件 <code>Table</code> 一样",
+    "SearchTitle": "搜索分页",
+    "SearchIntro": "通过设置 <code>TableColumn</code> 的 <code>Searchable</code> 开启列可搜索功能，与组件 <code>Table</code> 一样，通过设置 <code>IsPagination</code> <code>ShowSearch</code> 开启分页与表格搜索功能"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} 是必填项"

src/BootstrapBlazor/Components/Select/SelectTable.razor

@@ -36,7 +36,13 @@
     </CascadingValue>
     <RenderTemplate>
         <div class="dropdown-menu dropdown-table" style="@GetStyleString">
-            <Table TableColumns="TableColumns" IsFixedHeader="true" IsBordered="true" RenderMode="TableRenderMode.Table" ClickToSelect="true" OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"></Table>
+            <Table TableColumns="TableColumns" IsFixedHeader="true" IsBordered="true" IsStriped="true"
+                   RenderMode="TableRenderMode.Table" ClickToSelect="true"
+                   ShowSearch="ShowSearch" SearchMode="SearchMode.Top"
+                   SearchModel="SearchModel" SearchTemplate="SearchTemplate"
+                   CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
+                   IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
+                   OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"></Table>
         </div>
     </RenderTemplate>
 </div>

src/BootstrapBlazor/Components/Select/SelectTable.razor.cs

@@ -118,6 +118,49 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public RenderFragment<TItem>? Template { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示搜索框 默认为 false 不显示搜索框
+    /// </summary>
+    [Parameter]
+    public bool ShowSearch { get; set; }
+
+    /// <summary>
+    /// 获得/设置 SearchTemplate 实例
+    /// </summary>
+    [Parameter]
+    public RenderFragment<TItem>? SearchTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 SearchModel 实例
+    /// </summary>
+    [Parameter]
+    public TItem SearchModel { get; set; } = new TItem();
+
+    /// <summary>
+    /// 获得/设置 自定义搜索模型 <see cref="CustomerSearchTemplate"/>
+    /// </summary>
+    [Parameter]
+    public ITableSearchModel? CustomerSearchModel { get; set; }
+
+    /// <summary>
+    /// 获得/设置 自定义搜索模型模板 <see cref="CustomerSearchModel"/>
+    /// </summary>
+    [Parameter]
+    public RenderFragment<ITableSearchModel>? CustomerSearchTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否分页 默认为 false
+    /// </summary>
+    [Parameter]
+    public bool IsPagination { get; set; }
+
+    /// <summary>
+    /// 获得/设置 每页显示数据数量的外部数据源
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public IEnumerable<int>? PageItemsSource { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<Select<TItem>>? Localizer { get; set; }

src/BootstrapBlazor/Components/Select/SelectTable.razor.js

@@ -9,7 +9,7 @@ export function init(id) {
     }
 
     const setWidth = () => {
-        const minWidth = parseFloat(el.dataset.bbMinWidth || '300');
+        const minWidth = parseFloat(el.dataset.bbMinWidth || '580');
         let width = getWidth(el);
         if (width < minWidth) {
             width = minWidth;

src/BootstrapBlazor/Components/Select/SelectTable.razor.scss

@@ -12,3 +12,23 @@
         }
     }
 }
+
+.popover-dropdown {
+    .dropdown-table {
+        --bs-dropdown-padding-x: .25rem;
+        --bs-dropdown-padding-y: .25rem;
+        --bb-dropdown-max-height: 468px;
+        --bb-dropdown-table-width: auto;
+        overflow: hidden;
+        padding: .25rem;
+        width: var(--bb-dropdown-table-width);
+
+        .table-wrapper {
+            .table-fixed-header {
+                th {
+                    --bs-table-bg: rgba(var(--bs-body-color-rgb),.03);
+                }
+            }
+        }
+    }
+}

src/BootstrapBlazor/Components/Table/Table.razor

@@ -965,7 +965,7 @@
     </div>;
 
     RenderFragment RenderPagination =>
-    @<Pagination PageCount="@PageCount" PageIndex="@PageIndex" OnPageLinkClick="@OnPageLinkClick"
+    @<Pagination PageCount="@PageCount" PageIndex="@PageIndex" MaxPageLinkCount="MaxPageLinkCount" OnPageLinkClick="@OnPageLinkClick"
                  ShowGotoNavigator="ShowGotoNavigator" GotoTemplate="GotoTemplate!" GotoNavigatorLabelText="@GotoNavigatorLabelText"
                  ShowPageInfo="ShowPageInfo" PageInfoTemplate="InternalPageInfoTemplate" />;
 }

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

@@ -12,6 +12,12 @@ public partial class Table<TItem>
     [Parameter]
     public bool IsPagination { get; set; }
 
+    /// <summary>
+    /// 获得/设置 Page up/down 页码数量 默认 5
+    /// </summary>
+    [Parameter]
+    public int MaxPageLinkCount { get; set; } = 5;
+
     /// <summary>
     /// 获得/设置 是否在顶端显示分页 默认为 false
     /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -7,13 +7,14 @@ import Popover from "../../modules/base-popover.js?v=$version"
 
 const setBodyHeight = table => {
     const el = table.el
+    const children = [...el.children]
+    const search = children.find(i => i.classList.contains('table-search'))
+    table.search = search
+
     if (isVisible(el) === false) {
         return;
     }
 
-    const children = [...el.children]
-    const search = children.find(i => i.classList.contains('table-search'))
-    table.search = search
     let searchHeight = 0
     if (search) {
         searchHeight = getOuterHeight(search)
@@ -74,8 +75,6 @@ const fixHeader = table => {
             }
         }
     }
-
-    setBodyHeight(table)
 }
 
 const setExcelKeyboardListener = table => {
@@ -493,10 +492,7 @@ export function reset(id) {
     table.dragColumns = []
 
     const shim = [...table.el.children].find(i => i.classList.contains('table-shim'))
-    if (shim === void 0) {
-        setBodyHeight(table)
-    }
-    else {
+    if (shim !== void 0) {
         table.thead = [...shim.children].find(i => i.classList.contains('table-fixed-header'))
         table.isResizeColumn = shim.classList.contains('table-resize')
         if (table.thead) {
@@ -516,7 +512,6 @@ export function reset(id) {
             table.isExcel = shim.firstChild.classList.contains('table-excel')
             table.isDraggable = shim.firstChild.classList.contains('table-draggable')
             table.tables.push(shim.firstChild)
-            setBodyHeight(table)
         }
 
         if (table.isExcel) {
@@ -543,6 +538,8 @@ export function reset(id) {
         }
     }
 
+    setBodyHeight(table)
+
     if (table.search) {
         const observer = new ResizeObserver(() => {
             setBodyHeight(table)

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -28,23 +28,22 @@
     position: relative;
     height: 100%;
 
-    .pagination {
-        --bs-pagination-color: var(--bb-table-pagination-color);
-        --bs-pagination-active-bg: var(--bb-table-pagination-active-bg);
-        --bs-pagination-active-color: var(--bb-table-pagination-active-color);
-        --bs-pagination-active-border-color: var(--bb-table-pagination-active-border-color);
+    .nav-pages {
+        margin-top: .5rem;
+
+        .pagination {
+            --bs-pagination-color: var(--bb-table-pagination-color);
+            --bs-pagination-active-bg: var(--bb-table-pagination-active-bg);
+            --bs-pagination-active-color: var(--bb-table-pagination-active-color);
+            --bs-pagination-active-border-color: var(--bb-table-pagination-active-border-color);
+        }
     }
 }
 
 .table-container .table:not(.table-excel) .switch {
     --bb-switch-padding: 0;
 }
 
-.table-container > :not(:first-child):not(.table-loader):not(.table-wrapper):not(.table-filter),
-.table-container > :not(.table-toolbar) + .table-wrapper {
-    margin-top: .5rem;
-}
-
 .table-container .table > :not(caption) > * > * {
     padding: var(--bb-table-td-padding-y) var(--bb-table-td-padding-x);
 }
@@ -658,12 +657,16 @@ form .table .table-cell > textarea {
     width: 100%;
 }
 
-.table-search .card-header {
-    --bs-card-cap-padding-y: 0;
-    min-height: var(--bb-table-header-min-height);
+.table-search {
+    margin-bottom: .5rem;
+
+    .card-header {
+        --bs-card-cap-padding-y: 0;
+        min-height: var(--bb-table-header-min-height);
 
-    .card-title {
-        display: none;
+        .card-title {
+            display: none;
+        }
     }
 }
 

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -70,17 +70,3 @@ a, a:hover, a:focus {
     @include direction(right,last);
     @include direction(left,first)
 }
-
-.popover-dropdown {
-    .dropdown-table {
-        --bs-dropdown-padding-y: 0;
-        --bb-dropdown-max-height: 468px;
-        --bb-dropdown-table-width: auto;
-        overflow: hidden;
-        width: var(--bb-dropdown-table-width);
-
-        .table-wrapper {
-            border: none;
-        }
-    }
-}