feat: 增加动态调整表头宽度脚本

src/admin/Bootstrap.Admin/Components/TableBase.cs

@@ -2,6 +2,7 @@
 using Bootstrap.Admin.Shared;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -66,6 +67,12 @@ namespace Bootstrap.Admin.Components
         [Parameter]
         public bool FixedHeader { get; set; }
 
+        /// <summary>
+        /// 获得 IJSRuntime 实例
+        /// </summary>
+        [Inject]
+        protected IJSRuntime? JSRuntime { get; set; }
+
         /// <summary>
         /// 获得/设置 是否自适应高度 默认为 false 不自适应高度
         /// </summary>
@@ -203,6 +210,18 @@ namespace Bootstrap.Admin.Components
             }
         }
 
+        /// <summary>
+        /// OnInitialized 方法
+        /// </summary>
+        protected override async System.Threading.Tasks.Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (FixedHeader)
+            {
+                // 调用客户端脚本 resetWith
+                await JSRuntime.InitTableAsync(RetrieveId());
+            }
+        }
+
         /// <summary>
         /// 点击页码调用此方法
         /// </summary>
@@ -365,5 +384,10 @@ namespace Bootstrap.Admin.Components
             }
             ShowMessage("删除数据", "删除数据" + (result ? "成功" : "失败"), result ? ToastCategory.Success : ToastCategory.Error);
         }
+
+        /// <summary>
+        /// 获取 Id 字符串
+        /// </summary>
+        public string RetrieveId() => $"{Id}_table";
     }
 }

src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs

@@ -97,5 +97,10 @@ namespace Bootstrap.Admin.Extensions
         /// <param name="showCardTitle"></param>
         /// <param name="fixedTableHeader"></param>
         public static void SetWebSettings(this IJSRuntime? jSRuntime, bool showSidebar, bool showCardTitle, bool fixedTableHeader) => jSRuntime.InvokeVoidAsync("$.setWebSettings", showSidebar, showCardTitle, fixedTableHeader);
+
+        /// <summary>
+        /// 初始化 Table 组件
+        /// </summary>
+        public static ValueTask InitTableAsync(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initTable", id);
     }
 }

src/admin/Bootstrap.Admin/Pages/Admin/Groups.razor

@@ -1,6 +1,6 @@
 @inherits GroupsBase
 
-<EditPage Id="group" TItem="Bootstrap.DataAccess.Group" SubmitModalTitle="部门编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
+<EditPage Id="group" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.Group" SubmitModalTitle="部门编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
     <QueryBody>
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.GroupName" maxlength="50" />
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Description" maxlength="50" />

src/admin/Bootstrap.Admin/Pages/Admin/Menus.razor

@@ -1,6 +1,6 @@
 @inherits MenusBase
 
-<EditPage Id="role" TItem="Bootstrap.Security.BootstrapMenu" SubmitModalTitle="菜单编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
+<EditPage Id="role" FixedHeader="@FixedHeader" TItem="Bootstrap.Security.BootstrapMenu" SubmitModalTitle="菜单编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
     <QueryBody>
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Name" maxlength="50" />
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.ParentName" maxlength="50" />

src/admin/Bootstrap.Admin/Pages/Admin/Roles.razor

@@ -1,6 +1,6 @@
 @inherits RolesBase
 
-<EditPage Id="role" TItem="Bootstrap.DataAccess.Role" SubmitModalTitle="角色编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
+<EditPage Id="role" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.Role" SubmitModalTitle="角色编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
     <QueryBody>
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.RoleName" maxlength="50" />
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Description" maxlength="50" />

src/admin/Bootstrap.Admin/Pages/Admin/Users.razor

@@ -1,6 +1,6 @@
 @inherits UsersBase
 
-<EditPage Id="user" TItem="Bootstrap.DataAccess.User" SubmitModalTitle="用户编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
+<EditPage Id="user" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.User" SubmitModalTitle="用户编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
     <QueryBody>
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.UserName" maxlength="50" />
         <LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.DisplayName" maxlength="50" />

src/admin/Bootstrap.Admin/Shared/Table.razor

@@ -37,7 +37,7 @@
                 </table>
             </div>   
             <div class="fixed-table-body">                
-                <table class="table table-bordered table-hover table-selected" style="margin-top: -38px;">
+                <table class="table table-bordered table-hover table-selected" id="@RetrieveId()">
                     <thead>
                         <tr>
                             @if (ShowCheckbox)

src/admin/Bootstrap.Admin/wwwroot/css/blazor.css

@@ -136,6 +136,10 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
         height: 300px;
     }
 
+        .bootstrap-table .fixed-table-body table {
+            margin-top: -38px;
+        }
+
         .bootstrap-table .fixed-table-body thead th, .bootstrap-table .fixed-table-header thead th {
             border-bottom: 1px solid #dee2e6;
         }

src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js

@@ -140,10 +140,34 @@
             var $tabContent = $('section .tab-content');
             if (showCardTitle) $tabContent.removeClass('no-card-header');
             else $tabContent.addClass('no-card-header');
+        },
+        initTable: function (id) {
+            var $table = $('#' + id);
+            var $tableContainer = $table.parents('.table-wrapper');
+            var $tableHeader = $tableContainer.find('.fixed-table-header table');
 
-            var $table = $(".bootstrap-table");
-            if (fixedTableHeader) $table.attr('data-header', 'fixed');
-            else $table.attr('data-header', 'scroll');
+            // resetWidth()
+            var $heads = $tableHeader.find('th');
+            var resetWidth = function () {
+                $table.find('th').each(function (index, element) {
+                    var header = $heads.get(index);
+                    $(header).width($(element).width());
+                });
+            }
+            resetWidth();
+
+            // modify scroll
+            $table.parent().overlayScrollbars({
+                className: 'os-theme-dark',
+                scrollbars: {
+                    autoHide: 'leave',
+                    autoHideDelay: 100
+                }
+            }).removeClass('d-none');
+
+            $(window).on('resize', function () {
+                resetWidth();
+            });
         }
     });