feat(Table): redesign javascript invoke logic

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

@@ -1,4 +1,4 @@
-@page "/table/column/resizing"
+@page "/table/column/resizing"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<TablesColumnResizing> Localizer
 @inject IStringLocalizer<Foo> FooLocalizer

src/BootstrapBlazor/Components/Table/ITable.cs

@@ -15,7 +15,7 @@ public interface ITable : IColumnCollection
     /// <para lang="zh">获得 ITable 实例配置的可见列集合</para>
     /// <para lang="en">Gets visible columns collection configured in ITable instance</para>
     /// </summary>
-    IEnumerable<ITableColumn> GetVisibleColumns();
+    List<ITableColumn> GetVisibleColumns();
 
     /// <summary>
     /// <para lang="zh">获得 过滤条件集合</para>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -20,24 +20,26 @@
     }
     else
     {
-        BuildTableColumns();
-        RebuildVisibleColumnsCache();
-        if (ShowSearch && SearchMode == SearchMode.Top)
-        {
-            @RenderSearch
-        }
+        <RenderTemplate OnRenderAsync="OnTableRenderAsync">
+            @{
+                RebuildTableColumns();
+            }
 
-        if (ShowToolbar)
-        {
-            @RenderToolbar
-        }
+            @if (ShowSearch && SearchMode == SearchMode.Top)
+            {
+                @RenderSearch
+            }
 
-        if (ShowTopPagination && IsPagination)
-        {
-            @RenderPagination
-        }
+            @if (ShowToolbar)
+            {
+                @RenderToolbar
+            }
+
+            @if (ShowTopPagination && IsPagination)
+            {
+                @RenderPagination
+            }
 
-        <RenderTemplate OnRenderAsync="OnTableRenderAsync">
             <div class="@WrapperClassName" style="@GetScrollStyleString(!IsFixedHeader)">
                 @if (ActiveRenderMode == TableRenderMode.Table)
                 {
@@ -303,7 +305,7 @@
                     {
                         var fieldName = col.GetFieldName();
                         var displayName = col.GetDisplayName();
-                        <DynamicElement TagName="th" @key="col" class="@GetHeaderClassString(col)"
+                        <DynamicElement TagName="th" class="@GetHeaderClassString(col)"
                                         style="@GetFixedCellStyleString(col, ActualScrollWidth)"
                                         TriggerClick="col.GetSortable()" OnClick="@OnClickHeader(col)"
                                         draggable="@DraggableString">

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

@@ -168,21 +168,26 @@ private async Task OnToggleColumnVisible(TableColumnState item, bool visible)
                     column.Visible = visible;
                 }
 
-                if (column.Visible)
+                if (!column.Visible)
                 {
-                    // 重新计算表格宽度
-                    if (column.Width.HasValue)
-                    {
-                        tableWidth += column.Visible ? column.Width.Value : 0;
-                    }
-                    else
-                    {
-                        useTableWidth = false;
-                    }
+                    continue;
+                }
+
+                // 重新计算表格宽度
+                if (column.Width.HasValue)
+                {
+                    tableWidth += column.Width.Value;
+                }
+                else
+                {
+                    // 未设置列宽表格自适应
+                    useTableWidth = false;
                 }
             }
 
             _tableColumnStateCache.TableWidth = useTableWidth ? tableWidth : 0;
+
+            UpdateTableWidth();
         }
 
         // 触发 OnColumnVisibleChanged 回调

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

@@ -194,7 +194,7 @@ private int MultipleSelectColumnLeft()
     /// <param name="cellClass"></param>
     protected string? GetFixedCellClassString(ITableColumn col, string? cellClass = null) => CssBuilder.Default(cellClass)
         .AddClass("fixed", col.Fixed)
-        .AddClass("fixed-right", col.Fixed && IsTail(col))
+        .AddClass("fixed-right", col.Fixed && IsFixRight(col))
         .AddClass("fr", IsLastColumn(col))
         .AddClass("fl", IsFirstColumn(col))
         .Build();
@@ -243,10 +243,11 @@ private int MultipleSelectColumnLeft()
     private bool IsLastColumn(ITableColumn col) => LastFixedColumnCache.GetOrAdd(col, col =>
     {
         var ret = false;
-        if (col.Fixed && !IsTail(col))
+        if (col.Fixed && !IsFixRight(col))
         {
-            var index = Columns.IndexOf(col) + 1;
-            ret = index < Columns.Count && Columns[index].Fixed == false;
+            var columns = GetVisibleColumns();
+            var index = columns.IndexOf(col) + 1;
+            ret = index < columns.Count && columns[index].Fixed == false;
         }
         return ret;
     });
@@ -258,12 +259,13 @@ private bool IsLastColumn(ITableColumn col) => LastFixedColumnCache.GetOrAdd(col
     private bool IsFirstColumn(ITableColumn col) => FirstFixedColumnCache.GetOrAdd(col, col =>
     {
         var ret = false;
-        if (col.Fixed && IsTail(col))
+        if (col.Fixed && IsFixRight(col))
         {
-            var index = Columns.IndexOf(col) - 1;
-            if (index > 0)
+            var columns = GetVisibleColumns();
+            var index = columns.IndexOf(col) - 1;
+            if (index >= 0)
             {
-                ret = !Columns[index].Fixed;
+                ret = !columns[index].Fixed;
             }
         }
         return ret;
@@ -310,11 +312,15 @@ private int CalcMargin()
         return margin;
     }
 
-    private bool IsTail(ITableColumn col)
+    private bool IsFixRight(ITableColumn col)
     {
-        var middle = Math.Floor(GetVisibleColumns().Count() * 1.0 / 2);
-        var index = Columns.IndexOf(col);
-        return middle < index;
+        // 获得所有可见列
+        var columns = GetVisibleColumns();
+
+        // 获得当前列索引
+        var index = columns.IndexOf(col);
+
+        return !columns.Take(index).All(i => i.Fixed);
     }
 
     /// <summary>
@@ -344,14 +350,14 @@ string GetFixedHeaderStyleString() => IsFixedHeader
         string? ret = null;
         if (col.Fixed)
         {
-            ret = IsTail(col) ? GetRightStyle(col, margin) : GetLeftStyle(col);
+            ret = IsFixRight(col) ? GetRightStyle(col, margin) : GetLeftStyle(col);
         }
         return ret;
     }
 
     private string? GetLeftStyle(ITableColumn col)
     {
-        var columns = GetVisibleColumns().ToList();
+        var columns = GetVisibleColumns();
         var defaultWidth = 200;
         var width = 0;
         var start = 0;
@@ -378,25 +384,22 @@ string GetFixedHeaderStyleString() => IsFixedHeader
 
     private string? GetRightStyle(ITableColumn col, int margin)
     {
-        var columns = GetVisibleColumns().ToList();
-        var defaultWidth = 200;
+        var columns = GetVisibleColumns();
+        var defaultWidth = DefaultFixedColumnWidth;
         var width = 0;
         var index = columns.IndexOf(col);
 
         // after
-        while (index + 1 < columns.Count)
+        for (var i = index + 1; i < columns.Count; i++)
         {
-            var column = columns[index++];
+            var column = columns[i];
             width += column.Width ?? defaultWidth;
         }
         if (ShowExtendButtons && FixedExtendButtonsColumn)
         {
             width += ExtendButtonColumnWidth;
         }
-
-        // <para lang="zh">如果是固定表头时增加滚动条位置</para>
-        // <para lang="en">Add scroll bar position if it is fixed header</para>
-        if (IsFixedHeader && (index + 1) == columns.Count)
+        if (IsFixedHeader)
         {
             width += margin;
         }

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

@@ -552,7 +552,7 @@ public Func<TItem, bool>? ShowDeleteButtonCallback
     /// <para lang="zh">获得当前可见列集合</para>
     /// <para lang="en">Get Visible Columns Collection</para>
     /// </summary>
-    public IEnumerable<ITableColumn> GetVisibleColumns() => _visibleColumnsCache;
+    public List<ITableColumn> GetVisibleColumns() => _visibleColumnsCache;
 
     private void RebuildVisibleColumnsCache()
     {