feat(MultiFilter): add OnGetItemsAsync parameter for performance (#3778)

* doc: 更新视频配置 * doc: 更新注释 * refactor: 移除 MultiFilterItem 内部类 * doc: 更新示例 * doc: 增加注释 * feat: 增加懒加载动画 * feat: 增加脚本支持数据懒加载 * refactor: 精简代码 * refactor: 重命名回调方法名称 * feat: 增加 Items 保持选中项逻辑 * doc: 更新示例 * chore: bump version 8.7.1-beta05 * test: 增加单元测试 * test: 增加单元测试 * test: 更新单元测试 * test: 更新单元测试 * test: 增加单元测试 * doc: 更新说明文档
dotnetcore · Jul 3, 2024 · 28e8900 · 28e8900
1 parent 95258b7
commit 28e8900
Show file tree

Hide file tree

Showing 14 changed files with 295 additions and 101 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor
@@ -113,7 +113,6 @@
             <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
         </TableColumns>
     </Table>
-
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SortListTitle"]"
@@ -196,6 +195,13 @@
 <DemoBlock Title="@Localizer["MultiFilterTitle"]"
            Introduction="@Localizer["MultiFilterIntro"]"
            Name="MultiFilter">
+    <section ignore>
+        <p>@((MarkupString)Localizer["MultiFilterTips"].Value)</p>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["MultiFilterTipsLi1"].Value)</li>
+            <li>@((MarkupString)Localizer["MultiFilterTipsLi2"].Value)</li>
+        </ul>
+    </section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true" IsMultipleSelect="true"
@@ -205,22 +211,22 @@
             <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
             <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Name!, i.Name!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                    <MultiFilter Items="_nameMultiFilterItems"></MultiFilter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Address!, i.Address!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                    <MultiFilter OnGetItemsAsync="OnGetAddressItemsAsync"></MultiFilter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Complete.ToString()!, i.Complete.ToString()!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Complete.ToString()!, i.Complete.ToString()!)).DistinctBy(i => i.Value)"></MultiFilter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Education.ToString()!, i.Education.ToString()!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Education.ToString()!, i.Education.ToString()!)).DistinctBy(i => i.Value)"></MultiFilter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Count" Width="150" Sortable="true" />

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor.cs
@@ -28,6 +28,8 @@ public partial class TablesFilter
     [NotNull]
     private Table<Foo>? TableSetFilter { get; set; }
 
+    private IEnumerable<SelectedItem> _nameMultiFilterItems = default!;
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -36,6 +38,14 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         Items = Foo.GenerateFoo(FooLocalizer);
+        _nameMultiFilterItems = Items.Select(i => new SelectedItem(i.Name!, i.Name!)).DistinctBy(i => i.Value);
+    }
+
+    private async Task<List<SelectedItem>> OnGetAddressItemsAsync()
+    {
+        // 模拟数据库延时
+        await Task.Delay(500);
+        return Items.Select(i => new SelectedItem(i.Address!, i.Address!)).DistinctBy(i => i.Value).ToList();
     }
 
     private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -5471,6 +5471,9 @@
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFilter": {
     "MultiFilterTitle": "Multiple selection list filtering",
     "MultiFilterIntro": "Use the built-in <code>MultiFilter</code> component to provide multi-select filtering via <code>FilterTemplate</code>",
+    "MultiFilterTips": "The component provides two ways to set the data source: <code>Items</code> and <code>OnGetItemsAsync</code>",
+    "MultiFilterTipsLi1": "<code>Items</code> is suitable for small amounts of data and statically prepared data sets",
+    "MultiFilterTipsLi2": "<code>OnGetItemsAsync</code> is suitable for large and dynamic data collections. For performance reasons, the component uses a local lazy record method to fill in data, that is, the callback is called to obtain data when the filter window is opened.",
     "TablesFilterTitle": "Filter and sort function",
     "TablesFilterDesc": "Filter to quickly find the data you want to see; sort to quickly find or compare data.",
     "TablesFilterDescLi1": "Filters a column of data to specify the column to be filtered by specifying the <code>filterable</code> property of the column",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -5471,6 +5471,9 @@
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFilter": {
     "MultiFilterTitle": "多选列表筛选",
     "MultiFilterIntro": "通过 <code>FilterTemplate</code> 使用内置 <code>MultiFilter</code> 组件提供多选筛选功能",
+    "MultiFilterTips": "组件提供 <code>Items</code> <code>OnGetItemsAsync</code> 两种设置数据源方式",
+    "MultiFilterTipsLi1": "<code>Items</code> 适合数据量小且静态事先准备好的数据集合",
+    "MultiFilterTipsLi2": "<code>OnGetItemsAsync</code> 适合数据量大且动态的数据集合，出于性能考虑组件内部采用局域懒记载方式填装数据，即点开过滤窗口时才回调获得数据",
     "TablesFilterTitle": "筛选和排序功能",
     "TablesFilterDesc": "筛选可快速查找到自己想看的数据；排序可快速查找或对比数据。",
     "TablesFilterDescLi1": "对某一列数据进行筛选，通过指定列的 <code>Filterable</code> 属性来指定需要筛选的列",

diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -220,48 +220,52 @@
     "zip-archive": "ZipArchives"
   },
   "video": {
-    "autorefresh": "BV1ap4y1x7Qn?p=8",
-    "column": "BV1ap4y1x7Qn?p=2",
-    "edit": "BV1ap4y1x7Qn?p=9;BV1ap4y1x7Qn?p=10;BV1ap4y1x7Qn?p=11;BV1ap4y1x7Qn?p=12;BV12P4y137Ar",
-    "editors": "BV13B4y1y7cS",
-    "editdialogs": "BV1bT4y1N78e?p=10",
-    "export": "BV1ap4y1x7Qn?p=6",
-    "drawers": "BV1bT4y1N78e?p=7",
-    "detail": "BV1ap4y1x7Qn?p=3",
-    "dialog": "BV1bT4y1N78e?p=1",
-    "dialogs": "BV1bT4y1N78e?p=1;BV17v4y1K7Ho",
-    "header": "BV15o4y1f7eN",
-    "localizer": "BV1Kz4y1U7FR?p=1",
-    "filter": "BV1ap4y1x7Qn?p=4",
-    "fix-column": "BV1ap4y1x7Qn?p=5",
-    "footer": "BV15o4y1f7eN",
-    "messages": "BV1bT4y1N78e?p=3",
-    "modals": "BV1bT4y1N78e?p=4",
-    "multi-header": "BV15o4y1f7eN",
-    "pages": "BV1Et4y1r7qr",
-    "popconfirms": "BV1bT4y1N78e?p=5",
-    "row": "BV1ap4y1x7Qn?p=3",
-    "search": "BV1ap4y1x7Qn?p=4;BV1E34y1R7ia",
-    "searchdialogs": "BV1bT4y1N78e?p=9",
-    "selection": "BV1jh41127U6",
-    "swals": "BV1bT4y1N78e?p=8",
-    "tables": "BV1ap4y1x7Qn?p=1",
-    "template": "BV1Kp4y1B7pY",
-    "toolbar": "BV1ap4y1x7Qn?p=6",
-    "toasts": "BV1bT4y1N78e?p=6",
-    "tree": "BV1ap4y1x7Qn?p=14;BV1ZW4y1z7bB",
-    "wrap": "BV1ap4y1x7Qn?p=7",
-    "uploads": "BV1hK4y157Rj",
-    "validateforms": "BV1TU4y1Y7CM",
-    "dynamic": "BV1Eb4y1z7cY",
-    "excel": "BV1QL411x7v4",
-    "dynamicexcel": "BV1p3411278A",
+    "table": "BV1ap4y1x7Qn?p=1",
+    "table/auto-refresh": "BV1ap4y1x7Qn?p=8",
+    "table/column": "BV1ap4y1x7Qn?p=2",
+    "table/edit": "BV1ap4y1x7Qn?p=9;BV1ap4y1x7Qn?p=10;BV1ap4y1x7Qn?p=11;BV1ap4y1x7Qn?p=12;BV12P4y137Ar",
+    "table/detail": "BV1ap4y1x7Qn?p=3",
+    "table/dialog": "BV1bT4y1N78e?p=1",
+    "table/export": "BV1ap4y1x7Qn?p=6;BV1nN411V7W9;BV1Nb4y1L7p9",
+    "table/header": "BV15o4y1f7eN",
+    "table/filter": "BV1ap4y1x7Qn?p=4",
+    "table/fix-column": "BV1ap4y1x7Qn?p=5",
+    "table/multi-header": "BV15o4y1f7eN",
+    "table/footer": "BV15o4y1f7eN",
+    "table/row": "BV1ap4y1x7Qn?p=3",
+    "table/search": "BV1ap4y1x7Qn?p=4;BV1E34y1R7ia",
+    "table/selection": "BV1jh41127U6",
+    "table/toolbar": "BV1ap4y1x7Qn?p=6",
+    "table/wrap": "BV1ap4y1x7Qn?p=7",
+    "table/dynamic": "BV1Eb4y1z7cY",
+    "table/excel": "BV1QL411x7v4",
+    "tale/dynamic-excel": "BV1p3411278A",
+    "editor": "BV13B4y1y7cS",
+    "edit-dialog": "BV1bT4y1N78e?p=10",
+    "drawer": "BV1bT4y1N78e?p=7",
+    "dialog": "BV1bT4y1N78e?p=1;BV17v4y1K7Ho",
+    "message": "BV1bT4y1N78e?p=3",
+    "modal": "BV1bT4y1N78e?p=4",
+    "pagination": "BV1Et4y1r7qr",
+    "pop-confirm": "BV1bT4y1N78e?p=5",
+    "search-dialog": "BV1bT4y1N78e?p=9",
+    "sweet-alert": "BV1bT4y1N78e?p=8",
+    "toast": "BV1bT4y1N78e?p=6",
+    "tree-view": "BV1ap4y1x7Qn?p=14;BV1ZW4y1z7bB;BV15c411v7w7",
+    "upload": "BV1hK4y157Rj",
+    "validate-form": "BV1TU4y1Y7CM",
+    "speech/speechwave": "BV1Dr4y1J7Z5",
+    "speech/recognizer": "BV1aR4y1N7UP",
+    "speech/synthesizer": "BV1aR4y1N7UP",
+    "reconnector": "BV1Dr4y1J7Z5;BV193411P7Dz",
+    "topology": "BV1eY4y167jn;BV13Z4y1h7MA",
+    "select-object": "BV1Zw411j7Ea",
+    "select-table": "BV1f64y1A7AL;BV1Ye411n7XR",
+    "step": "BV1oN4y1y75m",
+    "context-menu": "BV1gk4y1w7Ab",
     "globalexception": "BV1xq4y1z7K2",
-    "recognizers": "BV1aR4y1N7UP",
-    "synthesizers": "BV1aR4y1N7UP",
-    "reconnectors": "BV1Dr4y1J7Z5;BV193411P7Dz",
-    "speechwaves": "BV1Dr4y1J7Z5",
-    "topologies": "BV1eY4y167jn;BV13Z4y1h7MA"
+    "localizer": "BV1Kz4y1U7FR?p=1",
+    "template": "BV1Kp4y1B7pY"
   },
   "link": {
     "AntDesign": "http://www.antblazor.com/",

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.7.1-beta04</Version>
+    <Version>8.7.1-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Filters/FilterBase.cs b/src/BootstrapBlazor/Components/Filters/FilterBase.cs
@@ -7,7 +7,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// 类型过滤器基类
 /// /// </summary>
-public abstract class FilterBase : ComponentBase, IFilterAction
+public abstract class FilterBase : BootstrapModuleComponentBase, IFilterAction
 {
     /// <summary>
     /// 
@@ -43,7 +43,7 @@ public abstract class FilterBase : ComponentBase, IFilterAction
     public int Count { get; set; }
 
     /// <summary>
-    /// 获得/设置 条件候选项
+    /// 获得/设置 条件候选项 请尽量使用静态数据 避免组件性能损失
     /// </summary>
     [Parameter]
     public IEnumerable<SelectedItem>? Items { get; set; }
@@ -86,7 +86,7 @@ protected override void OnInitialized()
     public virtual Task SetFilterConditionsAsync(FilterKeyValueAction filter) => OnFilterValueChanged();
 
     /// <summary>
-    /// 
+    /// 过滤按钮回调方法
     /// </summary>
     /// <returns></returns>
     protected async Task OnFilterValueChanged()
@@ -99,7 +99,7 @@ protected async Task OnFilterValueChanged()
     }
 
     /// <summary>
-    /// 
+    /// 重置按钮回调方法
     /// </summary>
     /// <returns></returns>
     protected async Task OnClearFilter()

diff --git a/src/BootstrapBlazor/Components/Filters/MultiFilter.razor b/src/BootstrapBlazor/Components/Filters/MultiFilter.razor
@@ -2,8 +2,9 @@
 @namespace BootstrapBlazor.Components
 @inherits FilterBase
 @inject IStringLocalizer<MultiFilter> Localizer
+@attribute [BootstrapModuleAutoLoader("Filters/MultiFilter.razor.js", JSObjectReference = true)]
 
-<div class="bb-multi-filter">
+<div class="bb-multi-filter" id="@Id">
     @if (ShowSearch)
     {
         <BootstrapInput UseInputEvent="true" class="bb-multi-filter-search"
@@ -19,9 +20,22 @@
             @foreach (var item in GetItems())
             {
                 <div class="bb-multi-filter-body-item">
-                    <Checkbox @bind-Value="@item.Checked" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" />
+                    <Checkbox @bind-Value="@item.Active" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" />
                 </div>
             }
         </div>
     </div>
+    @if (_source == null)
+    {
+        <div class="bb-multi-filter-loading">
+            @if (LoadingTemplate != null)
+            {
+                @LoadingTemplate
+            }
+            else
+            {
+                <Spinner Color="Color.Primary" />
+            }
+        </div>
+    }
 </div>