diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnDrag.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnDrag.razor index 654f4695567..fb37b4a4de0 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnDrag.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnDrag.razor @@ -8,7 +8,6 @@

@Localizer["TablesColumnDescription"]

-

@((MarkupString)Localizer["AllowDragOrderDesc"].Value)

@@ -22,10 +21,12 @@ IsMultipleSelect="true" ShowExtendButtons="false" OnQueryAsync="@OnQueryAsync"> - - + + - + + + diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index d8962b11c0d..b0f035df14c 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -4639,7 +4639,7 @@ }, "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.

", - "AllowDragOrderIntro": "By specifying AllowDragColumn, set the table columns to allow dragging column headings to adjust the table column order", + "AllowDragOrderIntro": "By specifying AllowDragColumn, set the table columns to allow dragging column headings to adjust the table column order; The current design only supports dragging non-fixed columns.", "AllowDragOrderTitle": "Allow dragging column headings to adjust table column order", "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", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 1a5622b9e58..5ac797436c2 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -4639,7 +4639,7 @@ }, "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": { "AllowDragOrderDesc": "

在列标题上按下鼠标拖动到其他列标题位置可将该列调整至目标列之前，但 Table 组件内置的列如明细行列、行号列、选择列、操作列等不可被调整

本示例通过设置 ClientTableName 参数开启了本地化存储，拖动调整顺序后，可刷新页面，列顺序是保持上次状态的

10.6.1 版本后使用 OnTableColumnClientStatusChanged 统一处理列拖拽、列宽调整与自适应列宽回调，移除原 OnDragColumnEndAsync OnResizeColumnAsync 和 OnAutoFitContentAsync 回调。

注意事项：

表格状态持久化功能分两种情况，设置 ClientTableName 属性即使用浏览器本地存储持久化信息，如果未设置则通过回调使用服务器端存储持久化信息。持久化信息结构体为 TableColumnClientStatus 由列状态集合以及表格宽度参数组成。

表格宽度参数默认为 0 当所有列宽度均有值时，表格宽度参数值为表格在客户端渲染的实际宽度；为 0 表示表格宽度自适应

使用浏览器本地存储持久化信息时，无需任何设置，表格会自动加载客户端状态

使用服务器端存储持久化信息时，需在回调中处理表格状态加载与保存逻辑，实际使用中可根据需要使用数据库或其他方式进行存储;通过 OnTableColumnClientStatusChanged 回调处理服务器端状态，通过 OnLoadTableColumnClientStatus 回调方法对表格进行持久化状态恢复操作

", - "AllowDragOrderIntro": "通过指定 AllowDragColumn 设置表格列允许拖动列标题调整表格列顺序", + "AllowDragOrderIntro": "通过指定 AllowDragColumn 设置表格列允许拖动列标题调整表格列顺序；目前设计上仅支持非固定列拖动", "AllowDragOrderTitle": "允许拖动列标题调整表格列顺序", "ClearTableColumnClientStatusDesc": "通过调用表格组件实例方法 ClearTableColumnClientStatus 清除当前持久化设置恢复表格为默认设置", "ResetButtonText": "重置", diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor index ebae893fcc0..5c2bf9ccdf0 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor +++ b/src/BootstrapBlazor/Components/Table/Table.razor @@ -310,7 +310,7 @@ style="@GetFixedCellStyleString(col, ActualScrollWidth)" data-bb-field="@fieldName" TriggerClick="col.GetSortable()" OnClick="@OnClickHeader(col)" - draggable="@DraggableString"> + draggable="@GetDraggableString(col)">
@if (col.GetShowCopyColumn()) { diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs index 82f5dc554f0..47616c574e7 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.cs @@ -1870,7 +1870,7 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item) [Parameter] public bool AllowDragColumn { get; set; } - private string? DraggableString => AllowDragColumn ? "true" : null; + private string? GetDraggableString(ITableColumn col) => AllowDragColumn && !col.Fixed ? "true" : null; /// /// 获得/设置 拖动列结束回调方法，默认 null 可存储数据库用于服务器端保持列顺序 @@ -1959,27 +1959,40 @@ public async Task ClearTableColumnClientStatus() [JSInvokable] public async Task DragColumnCallback(int originIndex, int currentIndex) { + if (!AllowDragColumn || originIndex == currentIndex) + { + return; + } + + var draggableColumnNames = GetVisibleColumns().Where(i => !i.Fixed).Select(i => i.GetFieldName()).ToList(); + var sourceName = draggableColumnNames.ElementAtOrDefault(originIndex); + var targetName = draggableColumnNames.ElementAtOrDefault(currentIndex); + if (string.IsNullOrEmpty(sourceName) || string.IsNullOrEmpty(targetName)) + { + return; + } + // 更新缓存数据中列顺序 - var visibleColumns = _tableColumnStates.Where(i => i.Visible); - var firstColumn = visibleColumns.ElementAtOrDefault(originIndex); + var firstColumn = _tableColumnStates.Find(i => i.Name == sourceName); if (firstColumn != null) { - var targetColumn = visibleColumns.ElementAtOrDefault(currentIndex); - if (targetColumn != null) + var targetState = _tableColumnStates.Find(i => i.Name == targetName); + if (targetState != null) { _tableColumnStates.Remove(firstColumn); - var pos = _tableColumnStates.IndexOf(targetColumn); + var pos = _tableColumnStates.IndexOf(targetState); _tableColumnStates.Insert(pos, firstColumn); if (OnTableColumnClientStatusChanged != null) { await OnTableColumnClientStatusChanged(firstColumn.Name, _tableColumnStateCache); } - } - _resetColumns = true; - _invoke = true; - StateHasChanged(); + _resetColumns = true; + _invoke = true; + + StateHasChanged(); + } } } diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs index 5d3f37f0a0d..4652c53e943 100644 --- a/test/UnitTest/Components/TableTest.cs +++ b/test/UnitTest/Components/TableTest.cs @@ -8870,6 +8870,75 @@ await cut.InvokeAsync(async () => }); } + [Fact] + public async Task AllowDragColumn_FixedColumn_Ok() + { + string? name = 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.Items, Foo.GenerateFoo(localizer, 2)); + pb.Add(a => a.OnTableColumnClientStatusChanged, (fieldName, state) => + { + name = fieldName; + return Task.CompletedTask; + }); + pb.Add(a => a.TableColumns, foo => builder => + { + builder.OpenComponent>(0); + builder.AddAttribute(1, nameof(TableColumn.Field), foo.Name); + builder.AddAttribute(2, nameof(TableColumn.FieldExpression), Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string))); + builder.AddAttribute(3, nameof(TableColumn.Fixed), true); + builder.CloseComponent(); + + builder.OpenComponent>(4); + builder.AddAttribute(5, nameof(TableColumn.Field), foo.Address); + builder.AddAttribute(6, nameof(TableColumn.FieldExpression), Utility.GenerateValueExpression(foo, nameof(Foo.Address), typeof(string))); + builder.CloseComponent(); + + builder.OpenComponent>(7); + builder.AddAttribute(8, nameof(TableColumn.Field), foo.Count); + builder.AddAttribute(9, nameof(TableColumn.FieldExpression), Utility.GenerateValueExpression(foo, nameof(Foo.Count), typeof(int))); + builder.CloseComponent(); + }); + }); + }); + + var table = cut.FindComponent>(); + var columns = cut.FindAll("th"); + Assert.False(columns[0].HasAttribute("draggable")); + Assert.Equal("true", columns[1].GetAttribute("draggable")); + Assert.Equal("true", columns[2].GetAttribute("draggable")); + + await cut.InvokeAsync(() => table.Instance.DragColumnCallback(1, 0)); + Assert.Equal(nameof(Foo.Count), name); + columns = cut.FindAll("th"); + Assert.Equal(nameof(Foo.Name), columns[0].GetAttribute("data-bb-field")); + Assert.Equal(nameof(Foo.Count), columns[1].GetAttribute("data-bb-field")); + Assert.Equal(nameof(Foo.Address), columns[2].GetAttribute("data-bb-field")); + + await cut.InvokeAsync(() => table.Instance.DragColumnCallback(1, 0)); + Assert.Equal(nameof(Foo.Address), name); + columns = cut.FindAll("th"); + Assert.Equal(nameof(Foo.Name), columns[0].GetAttribute("data-bb-field")); + Assert.Equal(nameof(Foo.Address), columns[1].GetAttribute("data-bb-field")); + Assert.Equal(nameof(Foo.Count), columns[2].GetAttribute("data-bb-field")); + + // 测试相同列拖动 + await cut.InvokeAsync(() => table.Instance.DragColumnCallback(0, 0)); + + // 更改为不允许拖动 + table.Render(pb => + { + pb.Add(a => a.AllowDragColumn, false); + }); + await cut.InvokeAsync(() => table.Instance.DragColumnCallback(1, 0)); + } + [Fact] public async Task OnTableColumnClientStatusChanged_ResizeColumn_Ok() {