diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 09dcb2fa56a..6878443d52e 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 8.0.3-beta01 + 8.0.3-beta02 diff --git a/src/BootstrapBlazor/Components/Table/ColumnWidth.cs b/src/BootstrapBlazor/Components/Table/ColumnWidth.cs new file mode 100644 index 00000000000..e6b8f8bd47f --- /dev/null +++ b/src/BootstrapBlazor/Components/Table/ColumnWidth.cs @@ -0,0 +1,21 @@ +// Copyright (c) Argo Zhang (argo@163.com). 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; + +/// +/// 列宽设置类 +/// +class ColumnWidth +{ + /// + /// 获得/设置 列名称 + /// + public string? Name { get; set; } + + /// + /// 获得/设置 列宽 + /// + public int Width { get; set; } +} diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor index 77e1e05a7a4..028b8ee19f2 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor +++ b/src/BootstrapBlazor/Components/Table/Table.razor @@ -195,7 +195,7 @@ if (IsFixedHeader) {
- +
@RenderColGroup(true) @RenderHeader(true)
@@ -300,7 +300,7 @@ @code { RenderFragment RenderTable => hasHeader => - @ + @
@RenderColGroup.Invoke(false) @if (hasHeader) { @@ -430,7 +430,7 @@ } @foreach (var col in GetVisibleColumns()) { - @if (CheckShownWithBreakpoint(col)) + if (CheckShownWithBreakpoint(col)) { } @@ -532,7 +532,7 @@ @if (!col.Fixed && AllowResizing) { - + } } @@ -855,7 +855,7 @@ @if (isInCell) { - if (!IsTracking) + @if (!IsTracking) { } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs index e3377c30fa1..49abdff5767 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.cs +++ b/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?>? GetAdvancedSearchFilterCallback { get; set; } + /// + /// 获得/设置 表格名称 默认 null 用于列宽持久化功能 + /// + [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> ReloadColumnWidth() + { + IEnumerable? ret = null; + if (!string.IsNullOrEmpty(TableName) && AllowResizing) + { + var jsonData = await InvokeAsync("reloadColumnWidth", Id, TableName); + if (!string.IsNullOrEmpty(jsonData)) + { + try + { + var doc = JsonDocument.Parse(jsonData); + if (doc.RootElement.TryGetProperty("cols", out var element)) + { + ret = element.Deserialize>(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(); + } + 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; /// - /// 获得/设置 拖动列结束回调方法 + /// 获得/设置 拖动列结束回调方法 /// [Parameter] public Func, Task>? OnDragColumnEndAsync { get; set; } /// - /// 获得/设置 设置列宽回调方法 + /// 获得/设置 设置列宽回调方法 /// [Parameter] public Func? OnResizeColumnAsync { get; set; } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js index bcc88532dfd..f8de4374adb 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.js +++ b/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)