feat(Table): use localstorage keep table column width (#2413)

* feat: 增加固定列宽功能

* refactor: 增加 tableName tableWidth 处理逻辑

* chore: bump version 8.0.3-beta02

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.3-beta01</Version>
+    <Version>8.0.3-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Table/ColumnWidth.cs

@@ -0,0 +1,21 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 列宽设置类
+/// </summary>
+class ColumnWidth
+{
+    /// <summary>
+    /// 获得/设置 列名称
+    /// </summary>
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// 获得/设置 列宽
+    /// </summary>
+    public int Width { get; set; }
+}

src/BootstrapBlazor/Components/Table/Table.razor

@@ -195,7 +195,7 @@
                 if (IsFixedHeader)
                 {
                     <div class="table-fixed-header">
-                        <table class="@TableClassName">
+                        <table class="@TableClassName" style="@GetTableStyleString(true)" data-bb-name="@GetTableName(true)">
                             @RenderColGroup(true)
                             @RenderHeader(true)
                         </table>
@@ -300,7 +300,7 @@
 
 @code {
     RenderFragment<bool> RenderTable => hasHeader =>
-    @<table class="@TableClassName">
+    @<table class="@TableClassName" style="@GetTableStyleString(hasHeader)" data-bb-name="@GetTableName(hasHeader)">
         @RenderColGroup.Invoke(false)
         @if (hasHeader)
         {
@@ -430,7 +430,7 @@
         }
         @foreach (var col in GetVisibleColumns())
         {
-            @if (CheckShownWithBreakpoint(col))
+            if (CheckShownWithBreakpoint(col))
             {
                 <col style="@GetColWidthString(col.Width)" />
             }
@@ -532,7 +532,7 @@
                             </div>
                             @if (!col.Fixed && AllowResizing)
                             {
-                                <span class="col-resizer"></span>
+                                <span class="col-resizer" data-bb-field="@col.GetFieldName()"></span>
                             }
                         </DynamicElement>
                     }
@@ -855,7 +855,7 @@
                     @if (isInCell)
                     {
                         <Button Size="Size.ExtraSmall" OnClick="ClickUpdateButtonCallback" Color="Color.Success" Icon="@SaveButtonIcon" Text="@SaveButtonText"></Button>
-                        if (!IsTracking)
+                        @if (!IsTracking)
                         {
                             <Button Size="Size.ExtraSmall" OnClick="@CancelSave" Color="Color.Warning" Icon="@CancelButtonIcon" Text="@CancelButtonText"></Button>
                         }

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

@@ -5,6 +5,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.Web.Virtualization;
 using System.Reflection;
+using System.Text.Json;
 
 namespace BootstrapBlazor.Components;
 
@@ -574,6 +575,12 @@ public void ExpandDetailRow(TItem item)
     [Parameter]
     public Func<PropertyInfo, TItem, List<SearchFilterAction>?>? GetAdvancedSearchFilterCallback { get; set; }
 
+    /// <summary>
+    /// 获得/设置 表格名称 默认 null 用于列宽持久化功能
+    /// </summary>
+    [Parameter]
+    public string? TableName { get; set; }
+
     [CascadingParameter]
     [NotNull]
     private ContextMenuZone? ContextMenuZone { get; set; }
@@ -823,6 +830,43 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
     }
 
+    private int? _localStorageTableWidth;
+
+    private string? GetTableStyleString(bool hasHeader) => hasHeader && _localStorageTableWidth.HasValue
+        ? $"width: {_localStorageTableWidth.Value}px;"
+        : null;
+
+    private string? GetTableName(bool hasHeader) => hasHeader ? TableName : null;
+
+    private async Task<IEnumerable<ColumnWidth>> ReloadColumnWidth()
+    {
+        IEnumerable<ColumnWidth>? ret = null;
+        if (!string.IsNullOrEmpty(TableName) && AllowResizing)
+        {
+            var jsonData = await InvokeAsync<string>("reloadColumnWidth", Id, TableName);
+            if (!string.IsNullOrEmpty(jsonData))
+            {
+                try
+                {
+                    var doc = JsonDocument.Parse(jsonData);
+                    if (doc.RootElement.TryGetProperty("cols", out var element))
+                    {
+                        ret = element.Deserialize<IEnumerable<ColumnWidth>>(new JsonSerializerOptions()
+                        {
+                            PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+                        });
+                    }
+                    if (doc.RootElement.TryGetProperty("table", out var tableEl) && tableEl.TryGetInt32(out var tableWidth))
+                    {
+                        _localStorageTableWidth = tableWidth;
+                    }
+                }
+                catch { }
+            }
+        }
+        return ret ?? Enumerable.Empty<ColumnWidth>();
+    }
+
     private async Task ProcessFirstRender()
     {
         IsLoading = true;
@@ -855,6 +899,20 @@ private async Task ProcessFirstRender()
 
         InternalResetVisibleColumns(Columns.Select(i => new ColumnVisibleItem(i.GetFieldName(), i.Visible)));
 
+        // 查看是否开启列宽序列化
+        var columnWidths = await ReloadColumnWidth();
+        if (columnWidths != null)
+        {
+            foreach (var cw in columnWidths.Where(c => c.Width > 0))
+            {
+                var c = Columns.Find(c => c.GetFieldName() == cw.Name);
+                if (c != null)
+                {
+                    c.Width = cw.Width;
+                }
+            }
+        }
+
         // set default sortName
         var col = Columns.Find(i => i.Sortable && i.DefaultSort);
         if (col != null)
@@ -1186,13 +1244,13 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item)
     private string? DraggableString => AllowDragColumn ? "true" : null;
 
     /// <summary>
-    /// 获得/设置 拖动列结束回调方法 
+    /// 获得/设置 拖动列结束回调方法
     /// </summary>
     [Parameter]
     public Func<string, IEnumerable<ITableColumn>, Task>? OnDragColumnEndAsync { get; set; }
 
     /// <summary>
-    /// 获得/设置 设置列宽回调方法 
+    /// 获得/设置 设置列宽回调方法
     /// </summary>
     [Parameter]
     public Func<string, float, Task>? OnResizeColumnAsync { get; set; }

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

@@ -283,6 +283,8 @@ const setResizeListener = table => {
                     const currentIndex = [...table.tables[0].querySelectorAll('thead > tr > th > .col-resizer')].indexOf(col)
                     table.invoke.invokeMethodAsync(table.callbacks.resizeColumnCallback, currentIndex, width)
                 }
+
+                saveColumnWidth(table)
             }
         )
     })
@@ -459,6 +461,24 @@ export function init(id, invoke, callbacks) {
     reset(id)
 }
 
+export function reloadColumnWidth(id, tableName) {
+    const key = `bb-table-column-width-${tableName}`
+    return localStorage.getItem(key);
+}
+
+const saveColumnWidth = table => {
+    const cols = table.columns
+    const tableWidth = table.tables[0].offsetWidth
+    const tableName = table.tables[0].getAttribute('data-bb-name')
+    const key = `bb-table-column-width-${tableName}`
+    localStorage.setItem(key, JSON.stringify({
+        "cols": cols.map(col => {
+            return { "width": col.closest('th').offsetWidth, "name": col.getAttribute('data-bb-field') }
+        }),
+        "table": tableWidth
+    }));
+}
+
 export function reset(id) {
     const table = Data.get(id)