feat(Table): update reset column width/order method (#7850)

* revert: 撤销脚本更改

* feat: 增加重新刷新读取客户端配置逻辑

* chore: bump version 10.5.1-beta06

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Table/Table.razor

@@ -8,7 +8,7 @@
     <CascadingValue Value="this" IsFixed="true">
         @TableColumns?.Invoke(CreateTItem())
     </CascadingValue>
-    @if (FirstRender)
+    @if (_firstRender)
     {
         if (ShowSkeleton)
         {

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

@@ -1091,11 +1091,7 @@ private void OnInitParameters()
         SearchModel ??= CreateSearchModel();
     }
 
-    /// <summary>
-    /// <para lang="zh">获得/设置 是否为第一次 Render</para>
-    /// <para lang="en">Gets or sets Whether it is the first Render</para>
-    /// </summary>
-    protected bool FirstRender { get; set; } = true;
+    private bool _firstRender = true;
 
     /// <summary>
     /// <para lang="zh">获得/设置 自动刷新 CancellationTokenSource 实例</para>
@@ -1140,7 +1136,7 @@ protected override void OnParametersSet()
             IsTree = false;
         }
 
-        if (!FirstRender)
+        if (!_firstRender)
         {
             // 动态列模式
             ResetDynamicContext();
@@ -1153,6 +1149,21 @@ protected override void OnParametersSet()
         _searchItems = null;
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnParametersSetAsync()
+    {
+        await base.OnParametersSetAsync();
+
+        if (!_firstRender)
+        {
+            // 重新读取浏览器设置
+            await OnTableColumnReset();
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -1237,6 +1248,54 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
     }
 
+    private async Task OnTableColumnReset()
+    {
+        // 动态列模式
+        var cols = new List<ITableColumn>();
+        if (DynamicContext != null && typeof(TItem).IsAssignableTo(typeof(IDynamicObject)))
+        {
+            cols.AddRange(DynamicContext.GetColumns());
+        }
+        else if (AutoGenerateColumns)
+        {
+            cols.AddRange(Utility.GetTableColumns<TItem>(Columns));
+        }
+        else
+        {
+            cols.AddRange(Columns);
+        }
+
+        if (ColumnOrderCallback != null)
+        {
+            cols = [.. ColumnOrderCallback(cols)];
+        }
+
+        await ReloadColumnOrdersFromBrowserAsync(cols);
+
+        // 查看是否开启列宽序列化
+        await ReloadColumnWidthFromBrowserAsync(cols);
+
+        if (OnColumnCreating != null)
+        {
+            await OnColumnCreating(cols);
+        }
+
+        InternalResetVisibleColumns(cols);
+
+        await ReloadColumnVisibleFromBrowserAsync();
+
+        Columns.Clear();
+        Columns.AddRange(cols.OrderFunc());
+
+        // set default sortName
+        var col = Columns.Find(i => i is { Sortable: true, DefaultSort: true });
+        if (col != null)
+        {
+            SortName = col.GetFieldName();
+            SortOrder = col.DefaultSortOrder;
+        }
+    }
+
     private async Task OnTableRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -1372,52 +1431,9 @@ private async Task ProcessFirstRender()
         IsLoading = true;
 
         // 设置渲染完毕
-        FirstRender = false;
-
-        // 动态列模式
-        var cols = new List<ITableColumn>();
-        if (DynamicContext != null && typeof(TItem).IsAssignableTo(typeof(IDynamicObject)))
-        {
-            cols.AddRange(DynamicContext.GetColumns());
-        }
-        else if (AutoGenerateColumns)
-        {
-            cols.AddRange(Utility.GetTableColumns<TItem>(Columns));
-        }
-        else
-        {
-            cols.AddRange(Columns);
-        }
+        _firstRender = false;
 
-        if (ColumnOrderCallback != null)
-        {
-            cols = [.. ColumnOrderCallback(cols)];
-        }
-
-        await ReloadColumnOrdersFromBrowserAsync(cols);
-
-        // 查看是否开启列宽序列化
-        await ReloadColumnWidthFromBrowserAsync(cols);
-
-        if (OnColumnCreating != null)
-        {
-            await OnColumnCreating(cols);
-        }
-
-        InternalResetVisibleColumns(cols);
-
-        await ReloadColumnVisibleFromBrowserAsync();
-
-        Columns.Clear();
-        Columns.AddRange(cols.OrderFunc());
-
-        // set default sortName
-        var col = Columns.Find(i => i is { Sortable: true, DefaultSort: true });
-        if (col != null)
-        {
-            SortName = col.GetFieldName();
-            SortOrder = col.DefaultSortOrder;
-        }
+        await OnTableColumnReset();
 
         // 获取是否自动查询参数值
         _autoQuery = IsAutoQueryFirstRender;

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

@@ -536,41 +536,24 @@ const setExcelKeyboardListener = table => {
 }
 
 const resetTableWidth = table => {
-    const { options: { scrollWidth } } = table;
     table.tables.forEach(t => {
         const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
         if (group) {
-            const colgroup = getLastColgroup(t, group);
-            if (colgroup) {
-                colgroup.style = null;
-            }
-            const width = getTableWidthByColumnGroup(t, 100);
-            if (width >= t.parentElement.offsetWidth + scrollWidth) {
-                t.style.width = `${width}px`;
-            }
-            else {
-                t.style.width = null;
-            }
+            let width = 0;
+            [...group.children].forEach(col => {
+                let colWidth = parseInt(col.style.width);
+                if (isNaN(colWidth)) {
+                    colWidth = 100;
+                }
+                width += colWidth;
+            })
+            t.style.width = `${width}px`;
 
             saveColumnWidth(table);
         }
     })
 }
 
-const getLastColgroup = (table, group) => {
-    const p = table.parentElement;
-    if (p) {
-        const length = group.children.length;
-        if (p.classList.contains("table-fixed-header")) {
-            return group.children[length - 2];
-        }
-        else {
-            return group.children[length - 1];
-        }
-    }
-    return null;
-}
-
 const setResizeListener = table => {
     if (table.options.showColumnWidthTooltip) {
         table.handlers.setResizeHandler = e => {
@@ -1064,33 +1047,15 @@ const saveColumnWidth = table => {
     }));
 }
 
-const getTableWidthByColumnGroup = (table, defaultWidth) => {
-    return [...table.querySelectorAll('colgroup col')]
-        .map((col, index) => getColumnRenderWidth(table, col, index, defaultWidth))
-        .reduce((accumulator, val) => accumulator + val, 0);
-}
-
-const getColumnRenderWidth = (table, col, index, defaultWidth) => {
-    let width = parseFloat(col.style.width);
-    if (!isNaN(width) && width > 0) {
-        return width;
-    }
-
-    const header = table.querySelectorAll('thead > tr:last-child > th').item(index);
-    width = header?.offsetWidth ?? 0;
-    if (width > 0) {
-        return width;
-    }
-
-    const row = [...table.querySelectorAll('tbody > tr')].find(i => !i.classList.contains('is-detail'));
-    width = row?.children.item(index)?.offsetWidth ?? 0;
-    return width > 0 ? width : defaultWidth;
-}
-
 const setTableDefaultWidth = table => {
     if (table.tables.length > 0 && isVisible(table.tables[0])) {
         const { scrollWidth, columnMinWidth } = table.options;
-        const tableWidth = getTableWidthByColumnGroup(table.tables[0], columnMinWidth);
+        const tableWidth = [...table.tables[0].querySelectorAll('col')]
+            .map(i => {
+                const colWidth = parseFloat(i.style.width);
+                return isNaN(colWidth) ? columnMinWidth : colWidth;
+            })
+            .reduce((accumulator, val) => accumulator + val, 0);
 
         if (tableWidth > table.el.offsetWidth) {
             table.tables[0].style.setProperty('width', `${tableWidth}px`);