From 0aabbb8c504408fcc385026d3eb052204f09837a Mon Sep 17 00:00:00 2001
From: Argo Zhang <Argo@163.com>
Date: Wed, 22 Jan 2020 10:28:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E9=99=A4=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=AE=BD=E5=BA=A6=E6=97=B6=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/Bootstrap.Admin/Shared/Table.razor  |  2 +-
 .../Bootstrap.Admin/wwwroot/css/blazor.css    |  6 ++-
 .../Bootstrap.Admin/wwwroot/js/ba.blazor.js   | 53 +++++++++++--------
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/admin/Bootstrap.Admin/Shared/Table.razor b/src/admin/Bootstrap.Admin/Shared/Table.razor
index 424a7cac..406eae98 100644
--- a/src/admin/Bootstrap.Admin/Shared/Table.razor
+++ b/src/admin/Bootstrap.Admin/Shared/Table.razor
@@ -36,7 +36,7 @@
                     </thead>
                 </table>
             </div>   
-            <div class="fixed-table-body">                
+            <div class="fixed-table-body invisible">                
                 <table class="table table-bordered table-hover table-selected" id="@RetrieveId()">
                     <thead>
                         <tr>
diff --git a/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css b/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
index 945d5da1..11090234 100644
--- a/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
+++ b/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
@@ -130,6 +130,10 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
     margin-bottom: 0;
 }
 
+    .bootstrap-table .fixed-table-header {
+        overflow: hidden;
+    }
+
     .bootstrap-table .fixed-table-body {
         overflow: auto;
         border-radius: 4px;
@@ -151,7 +155,7 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
 }
 
     .table-wrapper .table {
-        margin-bottom: 1px;
+        margin-bottom: 0;
     }
 
 .pagination-bar {
diff --git a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
index 4a21e4b3..abbe4d5d 100644
--- a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
+++ b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
@@ -141,33 +141,42 @@
             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');
+        resetTableWidth: function (source, target) {
+            // 设置表格宽度
+            target.width(source.width());
 
-            // 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());
+            // 设置各列宽度
+            var $heads = target.find('th');
+            source.find('th').each(function (index, element) {
+                var header = $heads.get(index);
+                $(header).width($(element).width());
+            });
+        },
+        initTable: function (id, firstRender) {
+            var $table = $('#' + id);
+
+            if (firstRender) {
+                // modify scroll
+                $table.parent().overlayScrollbars({
+                    className: 'os-theme-dark',
+                    scrollbars: {
+                        autoHide: 'leave',
+                        autoHideDelay: 100
+                    }
                 });
             }
-            resetWidth();
 
-            // modify scroll
-            $table.parent().overlayScrollbars({
-                className: 'os-theme-dark',
-                scrollbars: {
-                    autoHide: 'leave',
-                    autoHideDelay: 100
-                }
-            }).removeClass('d-none');
+            var $tableContainer = $table.parents('.table-wrapper');
+            var $tableHeader = $tableContainer.find('.fixed-table-header table');
+            $.resetTableWidth($table, $tableHeader);
 
-            $(window).on('resize', function () {
-                resetWidth();
-            });
+            if (firstRender) {
+                $tableContainer.find('.fixed-table-body').removeClass('invisible');
+
+                $(window).on('resize', function () {
+                    $.resetTableWidth($table, $tableHeader);
+                });
+            }
         }
     });