diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor index 2a0769bbdb8..1079ab9a2d6 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor @@ -22,8 +22,8 @@ - +
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 01317eb2370..c4abe711650 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -78,7 +78,7 @@ "TablesPagePaginationTitle": "Pagination table", "TablesPagePaginationIntro": "Set IsPagination to display the pagination component", "TablesPageShowTopPaginationTitle": "Show on top", - "TablesPageShowTopPaginationIntro": "Set ShowTopPagination to true is the top display pagination component" + "TablesPageShowTopPaginationIntro": "Set ShowTopPagination to true is the top display pagination component. You can use IsAutoScrollTopWhenClickPage to control whether to automatically scroll to the top after turning the page. The default value is false to keep the scroll bar position" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": { "TablesFixedColumnTitle": "Fixed column", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 591ef6a922d..c6e970577ea 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -78,7 +78,7 @@ "TablesPagePaginationTitle": "分页表格", "TablesPagePaginationIntro": "设置 IsPagination 显示分页组件", "TablesPageShowTopPaginationTitle": "显示在顶端", - "TablesPageShowTopPaginationIntro": "设置 ShowTopPagination 为 true 是顶端显示分页组件" + "TablesPageShowTopPaginationIntro": "设置 ShowTopPagination 为 true 是顶端显示分页组件，可通过 IsAutoScrollTopWhenClickPage 控制是否翻页后自动滚动到顶端，默认值为 false 保持滚动条位置" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": { "TablesFixedColumnTitle": "固定列功能", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 19b4dc87cca..35916bc0d1c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.6.4-beta06 + 9.6.4 diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Pagination.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Pagination.cs index af397e41509..deb7e8e709b 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.Pagination.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.Pagination.cs @@ -148,6 +148,7 @@ public partial class Table } }; + private bool _shouldScrollTop = false; /// /// 点击页码调用此方法 /// @@ -169,6 +170,12 @@ protected async Task OnPageLinkClick(int pageIndex) // 通知 SelectedRow 双向绑定集合改变 await OnSelectedRowsChanged(); + + // 通知 UI 滚动到顶端 + if (IsAutoScrollTopWhenClickPage) + { + _shouldScrollTop = true; + } } } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs index 468b2d7830d..c67b1afaaeb 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.cs @@ -759,6 +759,12 @@ public async Task ExpandDetailRow(TItem item) [Parameter] public Func, bool>? DisableEditButtonCallback { get; set; } + /// + /// 获得/设置 翻页时是否自动滚动到顶部 默认 false + /// + [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 diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js index c2b494acfe5..e5c8753bcf4 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.js +++ b/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", + }); } } } diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs index 7307b321c39..3b23a460442 100644 --- a/test/UnitTest/Components/TableTest.cs +++ b/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(); - 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> MockOnQueryAsync(QueryPageOptions options) return Task.FromResult(new QueryData() { Items = items, - TotalCount = items.Count(), + TotalCount = 80, IsAdvanceSearch = true, IsFiltered = true, IsSearch = true,