diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs
index 8b71d314d81..65cce099d97 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.cs
+++ b/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,33 @@ public async Task FitAllColumnWidth()
await InvokeVoidAsync("fitAllColumnWidth", Id);
}
+ ///
+ /// 更新表格列客户端状态方法
+ /// Update Table Column Client Status Method
+ ///
+ ///
+ public async Task UpdateTableColumnClientStatus()
+ {
+ if (Columns.Count != 0)
+ {
+ // 用户在外面变更了列状态后，为避免用户变更状态丢失，须将变更后的状态同步到缓存中
+ foreach (var item in Columns)
+ {
+ var columnState = _tableColumnStates.Find(x => x.Name == item.GetFieldName());
+ if (columnState != null)
+ {
+ columnState.Fixed = item.Fixed;
+ columnState.Width = item.Fixed && !item.Width.HasValue ? DefaultFixedColumnWidth : item.Width;
+ }
+ }
+ StateHasChanged();
+ }
+ // 如果启用了 ClientTableName 则更新浏览器持久化列状态
+ await InvokeVoidAsync("updateColumnStates", Id);
+
+ return _tableColumnStateCache;
+ }
+
///
/// 清除表格列客户端状态实例方法
/// clear table column client status instance method
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
index 94804c8322e..0de8d1c639b 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.js
+++ b/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,17 @@ 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 +987,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 +1000,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])
diff --git a/src/BootstrapBlazor/Components/Table/TableColumnState.cs b/src/BootstrapBlazor/Components/Table/TableColumnState.cs
index 1aad8e442d8..3a2e181395a 100644
--- a/src/BootstrapBlazor/Components/Table/TableColumnState.cs
+++ b/src/BootstrapBlazor/Components/Table/TableColumnState.cs
@@ -38,4 +38,10 @@ public class TableColumnState
/// Gets or sets column width
///
public int? Width { get; set; }
+
+ ///
+ /// 获得/设置 列固定
+ /// Gets or sets column fixed
+ ///
+ public bool Fixed { get; set; }
}
diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs
index 3f48b29f279..e88e00e0eaf 100644
--- a/test/UnitTest/Components/TableTest.cs
+++ b/test/UnitTest/Components/TableTest.cs
@@ -9018,6 +9018,62 @@ public async Task OnTableColumnClientStatusChanged_ResizeColumn_Ok()
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, Fixed = true });
+ state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Address), Visible = true, Width = 120, Fixed = false });
+
+ Context.JSInterop.Setup("getColumnStates", "test_update").SetResult(state);
+ var invoker = Context.JSInterop.SetupVoid("updateColumnStates", "test_update");
+ invoker.SetVoidResult();
+
+ var localizer = Context.Services.GetRequiredService>();
+ var cut = Context.Render(pb =>
+ {
+ pb.AddChildContent>(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>(0);
+ builder.AddAttribute(1, "Field", "Name");
+ builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+ builder.AddAttribute(3, "Fixed", true);
+ builder.CloseComponent();
+
+ builder.OpenComponent>(0);
+ builder.AddAttribute(3, "Field", "Address");
+ builder.AddAttribute(4, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+ builder.CloseComponent();
+ });
+ });
+ });
+
+ var table = cut.FindComponent>();
+ var colGroup = table.Find("colgroup");
+ 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);
+
+ table = cut.FindComponent>();
+ var columns = cut.FindAll("th");
+ colGroup = table.Find("colgroup");
+ Assert.Contains("style=\"width: 200px;\"", colGroup.ToMarkup());
+ if (columns[0].ClassName.Contains("fixed"))
+ {
+ var fixedWidth = cut.FindAll("col")[0].OuterHtml.Contains("width: 200px");
+ Assert.Equal("fixedWidth:True", $"fixedWidth:{fixedWidth}");
+ }
+ }
+
[Fact]
public async Task ClearTableColumnClientStatus_Ok()
{