feat(Table): add IsAutoScrollTopWhenClickPage parameter (#6077)

* refactor: 更新键值

* feat: 增加 IsAutoScrollTopWhenClickPage 参数

* doc: 更新示例

* chore: bump vesion 9.6.4

* refactor: 更新单元测试

* refactor: 重构代码

* refactor: 合并脚本

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor

@@ -22,8 +22,8 @@
 <DemoBlock Title="@Localizer["TablesPageShowTopPaginationTitle"]"
            Introduction="@Localizer["TablesPageShowTopPaginationIntro"]"
            Name="ShowTopPagination">
-    <Table TItem="Foo"
-           IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" _pageItems="10" OnQueryAsync="@OnQueryAsync">
+    <Table TItem="Foo" IsAutoScrollTopWhenClickPage="true" IsFixedHeader="true" Height="200"
+           IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
             <TableColumn @bind-Field="@context.Name" />

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

@@ -78,7 +78,7 @@
     "TablesPagePaginationTitle": "Pagination table",
     "TablesPagePaginationIntro": "Set <code>IsPagination</code> to display the pagination component",
     "TablesPageShowTopPaginationTitle": "Show on top",
-    "TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component"
+    "TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component. You can use <code>IsAutoScrollTopWhenClickPage</code> to control whether to automatically scroll to the top after turning the page. The default value is <code>false</code> to keep the scroll bar position"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": {
     "TablesFixedColumnTitle": "Fixed column",

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

@@ -78,7 +78,7 @@
     "TablesPagePaginationTitle": "分页表格",
     "TablesPagePaginationIntro": "设置 <code>IsPagination</code> 显示分页组件",
     "TablesPageShowTopPaginationTitle": "显示在顶端",
-    "TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件"
+    "TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件，可通过 <code>IsAutoScrollTopWhenClickPage</code> 控制是否翻页后自动滚动到顶端，默认值为 <code>false</code> 保持滚动条位置"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": {
     "TablesFixedColumnTitle": "固定列功能",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.6.4-beta06</Version>
+    <Version>9.6.4</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -148,6 +148,7 @@ public partial class Table<TItem>
         }
     };
 
+    private bool _shouldScrollTop = false;
     /// <summary>
     /// 点击页码调用此方法
     /// </summary>
@@ -169,6 +170,12 @@ protected async Task OnPageLinkClick(int pageIndex)
 
             // 通知 SelectedRow 双向绑定集合改变
             await OnSelectedRowsChanged();
+
+            // 通知 UI 滚动到顶端
+            if (IsAutoScrollTopWhenClickPage)
+            {
+                _shouldScrollTop = true;
+            }
         }
     }
 

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

@@ -759,6 +759,12 @@ public async Task ExpandDetailRow(TItem item)
     [Parameter]
     public Func<List<TItem>, bool>? DisableEditButtonCallback { get; set; }
 
+    /// <summary>
+    /// 获得/设置 翻页时是否自动滚动到顶部 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsAutoScrollTopWhenClickPage { get; set; }
+
     [CascadingParameter]
     private ContextMenuZone? ContextMenuZone { get; set; }
 
@@ -1012,6 +1018,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (_isFilterTrigger)
         {
             _isFilterTrigger = false;
+            _shouldScrollTop = false;
+            await InvokeVoidAsync("scrollTo", Id);
+        }
+
+        if(_shouldScrollTop)
+        {
+            _shouldScrollTop = false;
             await InvokeVoidAsync("scrollTo", Id);
         }
 
@@ -1055,7 +1068,7 @@ private async Task OnTableRenderAsync(bool firstRender)
                     },
                     new
                     {
-                        Key = "align-left",
+                        Key = "align-right",
                         Icon = "fa-solid fa-align-right",
                         Text = Localizer["AlignRightText"].Value,
                         Tooltip = Localizer["AlignRightTooltipText"].Value

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

@@ -199,12 +199,16 @@ export function scroll(id, align, options = { behavior: 'smooth' }) {
     }
 }
 
-export function scrollTo(id, x = 0, y = 0, options = { behavior: 'smooth' }) {
+export function scrollTo(id) {
     const element = document.getElementById(id);
     if (element) {
         const scroll = element.querySelector('.scroll');
         if (scroll) {
-            scroll.scrollTo(x, y, options);
+            scroll.scrollTo({
+                top: 0,
+                left: 0,
+                behavior: "smooth",
+            });
         }
     }
 }

test/UnitTest/Components/TableTest.cs

@@ -980,6 +980,7 @@ public async Task PageItemsSource_Ok()
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.PageItemsSource, [2, 4, 8]);
                 pb.Add(a => a.IsPagination, true);
+                pb.Add(a => a.IsAutoScrollTopWhenClickPage, true);
                 pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
                 pb.Add(a => a.TableColumns, foo => builder =>
                 {
@@ -991,8 +992,9 @@ public async Task PageItemsSource_Ok()
             });
         });
 
-        var pager = cut.FindComponent<Pagination>();
-        await cut.InvokeAsync(() => pager.Instance.OnPageLinkClick!.Invoke(2));
+        var items = cut.FindAll(".page-link");
+        await cut.InvokeAsync(() => items[2].Click());
+
         var activePage = cut.Find(".page-item.active");
         Assert.Equal("2", activePage.TextContent);
     }
@@ -1058,7 +1060,7 @@ Task<QueryData<Foo>> MockOnQueryAsync(QueryPageOptions options)
             return Task.FromResult(new QueryData<Foo>()
             {
                 Items = items,
-                TotalCount = items.Count(),
+                TotalCount = 80,
                 IsAdvanceSearch = true,
                 IsFiltered = true,
                 IsSearch = true,