Table组件新增动态设置固定列的功能，同时固定列支持持久化

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

@@ -1435,6 +1435,7 @@ private void ResetTableColumns()
             {
                 var item = _tableColumnStates[index];
                 var col = columnMap[item.Name];
+                col.Fixed = !string.IsNullOrEmpty(item.Name) && stateMap.TryGetValue(item.Name, out var state) ? stateMap[item.Name].Fixed : false;
                 if (item.Visible)
                 {
                     // 增加到可见列缓存集合
@@ -1449,7 +1450,8 @@ private void ResetTableColumns()
         DisplayName = col.GetDisplayName(),
         Name = col.GetFieldName(),
         Width = col.Fixed && !col.Width.HasValue ? DefaultFixedColumnWidth : col.Width,
-        Visible = col.GetVisible(_screenSize)
+        Visible = col.GetVisible(_screenSize),
+        Fixed = col.Fixed
     };
 
     private async Task OnTableRenderAsync(bool firstRender)
@@ -1940,6 +1942,28 @@ public async Task FitAllColumnWidth()
         await InvokeVoidAsync("fitAllColumnWidth", Id);
     }
 
+    /// <summary>
+    /// <para lang="zh">更新表格列客户端状态方法</para>
+    /// <para lang="en">Update Table Column Client Status Method</para>
+    /// </summary>
+    /// <returns></returns>
+    public async Task<TableColumnClientStatus> UpdateTableColumnClientStatus()
+    {
+        if (Columns.Count != 0)
+        {
+            // 用户在外面变更了列状态后，为避免用户变更状态丢失，须将变更后的状态同步到缓存中
+            foreach (var item in Columns)
+            {
+                _tableColumnStates.Find(x => x.Name == item.GetFieldName())!.Fixed = item.Fixed;
+            }
+            StateHasChanged();
+        }
+        // 如果启用了 ClientTableName 则更新浏览器持久化列状态
+        await InvokeVoidAsync("updateColumnStates", Id);
+
+        return _tableColumnStateCache;
+    }
+
     /// <summary>
     /// <para lang="zh">清除表格列客户端状态实例方法</para>
     /// <para lang="en">clear table column client status instance method</para>

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

@@ -586,7 +586,7 @@ const autoFitColumnWidth = async (table, col) => {
     const index = indexOfCol(col);
     let rows = null;
     let maxWidth = getColumnMaxCellWidth(table, index);
-    
+
     if (table.options.fitColumnWidthIncludeHeader) {
         const th = getColumnHeader(col);
         maxWidth = Math.max(maxWidth, getCellWidth(th));
@@ -936,6 +936,18 @@ const removeColumnWidthState = tableName => {
     localStorage.removeItem(columnWidthKey);
 }
 
+export function updateColumnStates(id) {    
+    const el = document.getElementById(id)
+    if (el === null) {
+        return
+    }    
+    let table = Data.get(id)
+    table.el = el;
+    Data.set(id, table)
+    const state = getColumnStateObject(table);
+    saveColumnStateToLocalstorage(table, state);
+
+}
 export function clearColumnStates(tableName) {
     const columnStateKey = `bb-table-${tableName}`;
     localStorage.removeItem(columnStateKey);
@@ -976,7 +988,8 @@ const getColumnStateObject = table => {
                 return {
                     name: col.name,
                     width: getColumnWidth(col, table.columns),
-                    visible: col.visible
+                    visible: col.visible,
+                    fixed: col.fixed
                 }
             }),
             table: getTableWidth(table.tables[0])
@@ -988,7 +1001,8 @@ const getColumnStateObject = table => {
             return {
                 name: getColumnName(col),
                 width: getResizableColumnWidth(col),
-                visible: true
+                visible: true,
+                fixed: getColumnHeader(col).classList.contains('fixed')
             }
         }),
         table: getTableWidth(table.tables[0])

src/BootstrapBlazor/Components/Table/TableColumnState.cs

@@ -38,4 +38,10 @@ public class TableColumnState
     /// <para lang="en">Gets or sets column width</para>
     /// </summary>
     public int? Width { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 列固定</para>
+    /// <para lang="en">Gets or sets column fixed</para>
+    /// </summary>
+    public bool Fixed { get; set; }
 }

test/UnitTest/Components/TableTest.cs

@@ -9018,6 +9018,55 @@
         Assert.NotNull(clientState);
     }
 
+    [Fact]
+    public async Task UpdateTableColumnClientStatus_Ok()
+    {
+        var state = new TableColumnClientStatus();
+        state.TableWidth = 220;
+        state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Name), Visible = true, Width = 100, Fixed = true });
+        state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Address), Visible = true, Width = 120, Fixed = false });
+
+        Context.JSInterop.Setup<TableColumnClientStatus>("getColumnStates", "test_update").SetResult(state);
+        var invoker = Context.JSInterop.SetupVoid("clearColumnStates", "test_update");
+        invoker.SetVoidResult();
+
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.ClientTableName, "test_update");
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.AllowResizing, true);
+                pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.AddAttribute(3, "Width", 80);
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(3, "Field", "Address");
+                    builder.AddAttribute(4, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        // 由于启用了客户端持久化 Name 列宽使用 100 而非 80
+        var table = cut.FindComponent<Table<Foo>>();
+        var colGroup = table.Find("colgroup");
+        Assert.Contains("style=\"width: 100px;\"", colGroup.ToMarkup());
+        Assert.Contains("style=\"width: 120px;\"", colGroup.ToMarkup());
+
+
+        var status = await cut.InvokeAsync(() => table.Instance.UpdateTableColumnClientStatus());
+        Assert.Equal(true, status.Columns[0].Fixed);
+        Assert.Equal(state.Columns.Count, status.Columns.Count);
+    }
+
     [Fact]
     public async Task ClearTableColumnClientStatus_Ok()
     {