doc(Table): update ClearTableColumnClientStatus sample code (#8007)

* refactor: 移除更改原始列宽逻辑

* refactor: 移除 AutoFitColumnWidthCallback 回调与列调整回调合并

* refactor: 循环 col 改用 _tableColumnStates 变量

* refactor: 移除客户端脚本调用逻辑

* doc: 更新示例

* refactor: 移除不使用的扩展方法

* doc: 更新示例

* test: 更新单元测试

* doc: 增加重置按钮本地化资源

* test: 补充单元测试

* chore: bump version 10.6.1-beta21

Author: ArgoZhang

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

@@ -8,14 +8,16 @@
 
 <h4>@Localizer["TablesColumnDescription"]</h4>
 
-@* <Button Text="Reset" OnClickWithoutRender="Reset"></Button>
- *@
+
 <DemoBlock Title="@Localizer["AllowDragOrderTitle"]" Introduction="@Localizer["AllowDragOrderIntro"]" Name="AllowDragColumn">
-    <section ignore>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</section>
-    <Table TItem="Foo" ClientTableName="table-test"
+    <section ignore>
+        <p>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</p>
+        <p>@((MarkupString)Localizer["ClearTableColumnClientStatusDesc"].Value)</p>
+    </section>
+    <Table TItem="Foo" ClientTableName="table-column-drag"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            AllowDragColumn="true" AllowResizing="true"
-           ShowToolbar="true" ShowColumnList="true"
+           ShowToolbar="true" ShowColumnList="true" @ref="_table"
            IsStriped="true" IsBordered="true" OnTableColumnClientStatusChanged="OnTableColumnClientStatusChanged"
            IsMultipleSelect="true" ShowExtendButtons="false"
            OnQueryAsync="@OnQueryAsync">
@@ -25,15 +27,9 @@
             <TableColumn @bind-Field="@context.Address" />
             <TableColumn @bind-Field="@context.Count" />
         </TableColumns>
+        <TableToolbarTemplate>
+            <TableToolbarButton Text="@Localizer["ResetButtonText"]" OnClickWithoutRender="Reset"></TableToolbarButton>
+        </TableToolbarTemplate>
     </Table>
     <ConsoleLogger @ref="Logger" />
 </DemoBlock>
-
-@code {
-    // private Table<Foo> Table { get; set; }
-
-    // private async Task Reset()
-    // {
-    //     await Table.ClearTableColumnClientStatus();
-    // }
-}

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnDrag.razor.cs

@@ -17,6 +17,7 @@ public partial class TablesColumnDrag
     /// </summary>
     [NotNull]
     private List<Foo>? Items { get; set; }
+
     private static IEnumerable<int> PageItemsSource => new int[]
     {
         5,
@@ -27,6 +28,8 @@ public partial class TablesColumnDrag
     [NotNull]
     private ConsoleLogger? Logger { get; set; }
 
+    private Table<Foo> _table = default!;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -69,4 +72,9 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
         items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
         return Task.FromResult(new QueryData<Foo>() { Items = items, TotalCount = total, IsSorted = isSorted, IsFiltered = isFiltered, IsSearch = true });
     }
+
+    private Task Reset()
+    {
+        return _table.ClearTableColumnClientStatus();
+    }
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4607,6 +4607,8 @@
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "AllowDragOrderDesc": "<p>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 <code>Table</code> component, such as detail row, row number, selection, and operation columns, cannot be adjusted</p><p>This example enables local storage by setting the <code>ClientTableName</code> parameter. After dragging and adjusting the order, the page can be refreshed, and the column order remains in the previous state</p><p>After version <code>10.6.1</code>, use <code>OnTableColumnClientStatusChanged</code> to uniformly handle column dragging, column resizing, and auto-fit column width callbacks, replacing the original <code>OnDragColumnEndAsync</code>, <code>OnResizeColumnAsync</code>, and <code>OnAutoFitContentAsync</code> callbacks.</p><p><b>Notes:</b></p><p>Table state persistence has two modes. If the <code>ClientTableName</code> 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 <code>TableColumnClientStatus</code>, which consists of the column state collection and the table width parameter.</p><p>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.</p><p>When using browser local storage for persistence, no additional settings are required. The table automatically loads the client state.</p><p>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 <code>OnTableColumnClientStatusChanged</code> callback to handle server-side state changes, and use the <code>OnLoadTableColumnClientStatus</code> callback to restore the table persistence state.</p>",
+    "ClearTableColumnClientStatusDesc": "By calling the <code>ClearTableColumnClientStatus</code> method of the table component instance, the current persistent settings are cleared, restoring the table to its default settings.",
+    "ResetButtonText": "Reset",
     "AllowDragOrderIntro": "By specifying <code>AllowDragColumn</code>, 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.",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4607,6 +4607,8 @@
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "AllowDragOrderDesc": "<p>在列标题上按下鼠标拖动到其他列标题位置可将该列调整至目标列之前，但 <code>Table</code> 组件内置的列如明细行列、行号列、选择列、操作列等不可被调整</p><p>本示例通过设置 <code>ClientTableName</code> 参数开启了本地化存储，拖动调整顺序后，可刷新页面，列顺序是保持上次状态的</p><p><code>10.6.1</code> 版本后使用 <code>OnTableColumnClientStatusChanged</code> 统一处理列拖拽、列宽调整与自适应列宽回调，移除原 <code>OnDragColumnEndAsync</code> <code>OnResizeColumnAsync</code> 和 <code>OnAutoFitContentAsync</code> 回调。</p><p><b>注意事项：</b></p><p>表格状态持久化功能分两种情况，设置 <code>ClientTableName</code> 属性即使用浏览器本地存储持久化信息，如果未设置则通过回调使用服务器端存储持久化信息。持久化信息结构体为 <code>TableColumnClientStatus</code> 由列状态集合以及表格宽度参数组成。</p><p>表格宽度参数默认为 0 当所有列宽度均有值时，表格宽度参数值为表格在客户端渲染的实际宽度；为 0 表示表格宽度自适应</p><p>使用浏览器本地存储持久化信息时，无需任何设置，表格会自动加载客户端状态</p><p>使用服务器端存储持久化信息时，需在回调中处理表格状态加载与保存逻辑，实际使用中可根据需要使用数据库或其他方式进行存储;通过 <code>OnTableColumnClientStatusChanged</code> 回调处理服务器端状态，通过 <code>OnLoadTableColumnClientStatus</code> 回调方法对表格进行持久化状态恢复操作</p>",
+    "ClearTableColumnClientStatusDesc": "通过调用表格组件实例方法 <code>ClearTableColumnClientStatus</code> 清除当前持久化设置恢复表格为默认设置",
+    "ResetButtonText": "重置",
     "AllowDragOrderIntro": "通过指定 <code>AllowDragColumn</code> 设置表格列允许拖动列标题调整表格列顺序",
     "AllowDragOrderTitle": "允许拖动列标题调整表格列顺序",
     "TablesColumnDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.6.1-beta20</Version>
+    <Version>10.6.1-beta21</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -249,9 +249,12 @@
             {
                 <col style="@GetColWidthString(ExtendButtonColumnWidth)" />
             }
-            @foreach (var col in GetVisibleColumns())
+            @foreach (var col in _tableColumnStates)
             {
-                <col style="@GetColWidthString(col.GetColumnFixedWidth(DefaultFixedColumnWidth))" />
+                if (col.Visible)
+                {
+                    <col style="@GetColWidthString(col.Width)" />
+                }
             }
             @if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
             {

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);
                 }

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);
         }
-    }
 
-    /// <summary>
-    /// <para lang="zh">列宽自适应回调方法 由 JavaScript 脚本调用</para>
-    /// <para lang="en">Auto Fit Column Width Callback called by JavaScript</para>
-    /// </summary>
-    [JSInvokable]
-    public async Task AutoFitColumnWidthCallback(string fieldName, TableColumnClientStatus columnState)
-    {
-        UpdateTableColumnState(columnState);
-
-        if (OnTableColumnClientStatusChanged != null)
-        {
-            await OnTableColumnClientStatusChanged(fieldName, _tableColumnStateCache);
-        }
+        StateHasChanged();
     }
 
     private void UpdateTableColumnState(TableColumnClientStatus columnState)

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);
     }
 }
 

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;
 }