() { Items = items, TotalCount = total, IsSorted = isSorted, IsFiltered = isFiltered, IsSearch = true });
}
+
+ private Task Reset()
+ {
+ return _table.ClearTableColumnClientStatus();
+ }
}
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 6a1a6bfe01d..4b79170e473 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4607,6 +4607,8 @@
},
"BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
"AllowDragOrderDesc": "Pressing the mouse over a column heading and dragging it to another column heading position can adjust the column to be in front of the target column, but the built-in columns in the Table component, such as detail row, row number, selection, and operation columns, cannot be adjusted
This example enables local storage by setting the ClientTableName parameter. After dragging and adjusting the order, the page can be refreshed, and the column order remains in the previous state
After version 10.6.1, use OnTableColumnClientStatusChanged to uniformly handle column dragging, column resizing, and auto-fit column width callbacks, replacing the original OnDragColumnEndAsync, OnResizeColumnAsync, and OnAutoFitContentAsync callbacks.
Notes:
Table state persistence has two modes. If the ClientTableName property is set, browser local storage is used to persist information. If it is not set, server-side storage persistence is implemented through callbacks. The persistence structure is TableColumnClientStatus, which consists of the column state collection and the table width parameter.
The table width parameter defaults to 0. When all columns have width values, the table width parameter is the actual width rendered on the client. A value of 0 means the table width is adaptive.
When using browser local storage for persistence, no additional settings are required. The table automatically loads the client state.
When using server-side storage for persistence, handle table state loading and saving logic in callbacks. In actual use, the state can be stored in a database or other storage as needed. Use the OnTableColumnClientStatusChanged callback to handle server-side state changes, and use the OnLoadTableColumnClientStatus callback to restore the table persistence state.
",
+ "ClearTableColumnClientStatusDesc": "By calling the ClearTableColumnClientStatus method of the table component instance, the current persistent settings are cleared, restoring the table to its default settings.",
+ "ResetButtonText": "Reset",
"AllowDragOrderIntro": "By specifying AllowDragColumn, set the table columns to allow dragging column headings to adjust the table column order",
"AllowDragOrderTitle": "Allow dragging column headings to adjust table column order",
"TablesColumnDescription": "Used to display multiple pieces of data with similar structures, data can be sorted, filtered, compared or other custom operations.",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 45fb3a96089..fdaf580ce06 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4607,6 +4607,8 @@
},
"BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
"AllowDragOrderDesc": "在列标题上按下鼠标拖动到其他列标题位置可将该列调整至目标列之前，但 Table 组件内置的列如明细行列、行号列、选择列、操作列等不可被调整
本示例通过设置 ClientTableName 参数开启了本地化存储，拖动调整顺序后，可刷新页面，列顺序是保持上次状态的
10.6.1 版本后使用 OnTableColumnClientStatusChanged 统一处理列拖拽、列宽调整与自适应列宽回调，移除原 OnDragColumnEndAsync OnResizeColumnAsync 和 OnAutoFitContentAsync 回调。
注意事项：
表格状态持久化功能分两种情况，设置 ClientTableName 属性即使用浏览器本地存储持久化信息，如果未设置则通过回调使用服务器端存储持久化信息。持久化信息结构体为 TableColumnClientStatus 由列状态集合以及表格宽度参数组成。
表格宽度参数默认为 0 当所有列宽度均有值时，表格宽度参数值为表格在客户端渲染的实际宽度；为 0 表示表格宽度自适应
使用浏览器本地存储持久化信息时，无需任何设置，表格会自动加载客户端状态
使用服务器端存储持久化信息时，需在回调中处理表格状态加载与保存逻辑，实际使用中可根据需要使用数据库或其他方式进行存储;通过 OnTableColumnClientStatusChanged 回调处理服务器端状态，通过 OnLoadTableColumnClientStatus 回调方法对表格进行持久化状态恢复操作
",
+ "ClearTableColumnClientStatusDesc": "通过调用表格组件实例方法 ClearTableColumnClientStatus 清除当前持久化设置恢复表格为默认设置",
+ "ResetButtonText": "重置",
"AllowDragOrderIntro": "通过指定 AllowDragColumn 设置表格列允许拖动列标题调整表格列顺序",
"AllowDragOrderTitle": "允许拖动列标题调整表格列顺序",
"TablesColumnDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 535963d16be..aae137acf75 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
- 10.6.1-beta20
+ 10.6.1-beta21
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index 8b500b86944..2331be37e75 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -249,9 +249,12 @@
{
}
- @foreach (var col in GetVisibleColumns())
+ @foreach (var col in _tableColumnStates)
{
-
+ if (col.Visible)
+ {
+
+ }
}
@if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
{
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
index 7bbb96aa5af..ba9be85bb96 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
@@ -568,9 +568,6 @@ private void ResetVisibleColumnsCache()
{
item.DisplayName = col.GetDisplayName();
- // 恢复宽度
- col.Width = item.Width;
-
// 增加到可见列缓存集合
_visibleColumnsCache.Add(col);
}
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs
index 55825952ff4..62b910e9cf5 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.cs
@@ -1403,7 +1403,6 @@ private async Task OnTableRenderAsync(bool firstRender)
TableName = ClientTableName,
DragColumnCallback = nameof(DragColumnCallback),
FitColumnWidthIncludeHeader,
- AutoFitColumnWidthCallback = nameof(AutoFitColumnWidthCallback),
ResizeColumnCallback = nameof(ResizeColumnCallback),
ColumnMinWidth = ColumnMinWidth ?? Options.CurrentValue.TableSettings.ColumnMinWidth,
ColumnStates = _tableColumnStates,
@@ -1894,8 +1893,6 @@ public async Task ClearTableColumnClientStatus()
// 清除缓存的列状态
_tableColumnStateCache.Clear();
- _resetColumns = true;
- _invoke = true;
StateHasChanged();
}
@@ -1946,21 +1943,8 @@ public async Task ResizeColumnCallback(string name, TableColumnClientStatus colu
{
await OnTableColumnClientStatusChanged(name, _tableColumnStateCache);
}
- }
- ///
- /// 列宽自适应回调方法 由 JavaScript 脚本调用
- /// Auto Fit Column Width Callback called by JavaScript
- ///
- [JSInvokable]
- public async Task AutoFitColumnWidthCallback(string fieldName, TableColumnClientStatus columnState)
- {
- UpdateTableColumnState(columnState);
-
- if (OnTableColumnClientStatusChanged != null)
- {
- await OnTableColumnClientStatusChanged(fieldName, _tableColumnStateCache);
- }
+ StateHasChanged();
}
private void UpdateTableColumnState(TableColumnClientStatus columnState)
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
index 9ac7da94bce..7fd362ee3e4 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.js
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.js
@@ -623,7 +623,7 @@ const autoFitColumnWidth = async (table, col) => {
const state = getColumnStateObject(table);
saveColumnStateToLocalstorage(table, state);
- await table.invoke.invokeMethodAsync(table.options.autoFitColumnWidthCallback, field, state);
+ await table.invoke.invokeMethodAsync(table.options.resizeColumnCallback, field, state);
}
}
diff --git a/src/BootstrapBlazor/Extensions/ITableColumnExtensions.cs b/src/BootstrapBlazor/Extensions/ITableColumnExtensions.cs
index cdc7a5b05db..de41a8c0634 100644
--- a/src/BootstrapBlazor/Extensions/ITableColumnExtensions.cs
+++ b/src/BootstrapBlazor/Extensions/ITableColumnExtensions.cs
@@ -443,6 +443,4 @@ private static RenderFragment RenderContent(this ITableColumn col, string? text)
internal static bool GetShowTips(this ITableColumn col) => col.ShowTips ?? false;
internal static Alignment GetAlign(this ITableColumn col) => col.Align ?? Alignment.None;
-
- internal static int? GetColumnFixedWidth(this ITableColumn col, int width) => col.Fixed ? col.Width ?? width : col.Width;
}
diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs
index 84094e3b45a..e4738edb5f6 100644
--- a/test/UnitTest/Components/TableTest.cs
+++ b/test/UnitTest/Components/TableTest.cs
@@ -899,8 +899,11 @@ public async Task ShowColumnList_Ok()
// 设置客户端存储
var state = new TableColumnClientStatus();
state.TableWidth = 500;
- state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Name), Visible = false });
- state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Address), Visible = true, Width = 120 });
+ state.Columns = new List()
+ {
+ new TableColumnState() { Name = nameof(Foo.Name), Visible = false },
+ new TableColumnState() { Name = nameof(Foo.Address), Visible = true, Width = 120 }
+ };
Context.JSInterop.Setup("getColumnStates", "test").SetResult(state);
var show = false;
@@ -8734,49 +8737,6 @@ public void ShowRowCheckboxCallback_Ok()
Assert.Single(table.Instance.SelectedRows);
}
- [Fact]
- public async Task OnTableColumnClientStatusChanged_AutoFitColumnWidth_Ok()
- {
- var name = "";
- TableColumnClientStatus? clientState = null;
- var localizer = Context.Services.GetRequiredService>();
- var cut = Context.Render(pb =>
- {
- pb.AddChildContent>(pb =>
- {
- pb.Add(a => a.RenderMode, TableRenderMode.Table);
- pb.Add(a => a.AllowDragColumn, true);
- pb.Add(a => a.ClientTableName, "table-unit-test");
- pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
- pb.Add(a => a.FitColumnWidthIncludeHeader, true);
- pb.Add(a => a.OnTableColumnClientStatusChanged, (fieldName, state) =>
- {
- name = fieldName;
- clientState = state;
- return Task.CompletedTask;
- });
- 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.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 state = new TableColumnClientStatus() { Columns = [] };
- await cut.InvokeAsync(() => table.Instance.AutoFitColumnWidthCallback(nameof(Foo.DateTime), state));
- Assert.Equal(nameof(Foo.DateTime), name);
- Assert.NotNull(clientState);
- }
-
[Fact]
public async Task AllowDragColumn_Ok()
{
@@ -8865,6 +8825,7 @@ public async Task OnTableColumnClientStatusChanged_ResizeColumn_Ok()
pb.Add(a => a.ClientTableName, "test");
pb.Add(a => a.RenderMode, TableRenderMode.Table);
pb.Add(a => a.AllowResizing, true);
+ pb.Add(a => a.FitColumnWidthIncludeHeader, true);
pb.Add(a => a.OnTableColumnClientStatusChanged, (field, state) =>
{
name = field;
@@ -8936,12 +8897,14 @@ public async Task ClearTableColumnClientStatus_Ok()
// 由于启用了客户端持久化 Name 列宽使用 100 而非 80
var table = cut.FindComponent>();
- Assert.Equal(100, table.Instance.Columns[0].Width);
+ var colGroup = table.Find("colgroup");
+ Assert.Contains("style=\"width: 100px;\"", colGroup.ToMarkup());
+ Assert.Contains("style=\"width: 120px;\"", colGroup.ToMarkup());
// 清除客户端状态
await cut.InvokeAsync(() => table.Instance.ClearTableColumnClientStatus());
invoker.VerifyInvoke("clearColumnStates");
- Assert.Equal(80, table.Instance.Columns[0].Width);
+ Assert.Contains("style=\"width: 80px;\"", colGroup.ToMarkup());
}
[Theory]