fix(Table): reset columns after toggle visible #7176 (#7180) (#7186)

* fix(Table): 列被隐藏再取消隐藏后，拖动列改变列顺序的功能不正常 #7176

* refactor: 复用脚本

* test: 更新单元测试

* test: 重构单元测试

---------

Co-Authored-By: ljmay168 <209402714+ljmay168@users.noreply.github.com>

Author: ArgoZhang

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

@@ -143,6 +143,11 @@ protected async Task OnCheck(CheckboxState state, TItem val)
     /// </summary>
     private bool _resetColumns;
 
+    /// <summary>
+    /// 是否重置列拖拽事件 <see cref="OnAfterRenderAsync(bool)"/> 方法中重置为 false
+    /// </summary>
+    private bool _resetColDragListener;
+
     /// <summary>
     /// 获得/设置 列改变显示状态回调方法
     /// </summary>
@@ -155,6 +160,10 @@ private async Task OnToggleColumnVisible(string columnName, bool visible)
         {
             _resetColumns = true;
         }
+        if (AllowDragColumn && visible)
+        {
+            _resetColDragListener = true;
+        }
         if (!string.IsNullOrEmpty(ClientTableName))
         {
             await InvokeVoidAsync("saveColumnList", ClientTableName, _visibleColumns);

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

@@ -1042,6 +1042,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await InvokeVoidAsync("resetColumn", Id);
         }
 
+        if (_resetColDragListener)
+        {
+            _resetColDragListener= false;
+            await InvokeVoidAsync("resetColDragListener", Id);
+        }
+
         if (_bindResizeColumn)
         {
             _bindResizeColumn = false;

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

@@ -1,4 +1,4 @@
-export { getResponsive } from '../../modules/responsive.js'
+export { getResponsive } from '../../modules/responsive.js'
 import { copy, drag, getDescribedElement, getOuterHeight, getWidth, isVisible } from '../../modules/utility.js'
 import '../../modules/browser.js'
 import Data from '../../modules/data.js'
@@ -180,6 +180,13 @@ export function resetColumn(id) {
     }
 }
 
+export function resetColDragListener(id) {
+    const table = Data.get(id)
+    if (table) {
+        setDraggable(table)
+    }
+}
+
 export function bindResizeColumn(id) {
     const table = Data.get(id)
     if (table) {
@@ -924,6 +931,8 @@ const setDraggable = table => {
     let index = 0
     table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
     table.dragColumns.forEach(col => {
+        disposeDragColumns(col);
+
         EventHandler.on(col, 'dragstart', e => {
             col.parentNode.classList.add('table-dragging')
             col.classList.add('table-drag')

test/UnitTest/Components/TableTest.cs

@@ -8476,6 +8476,8 @@ public async Task AllowDragColumn_Ok()
             {
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.AllowDragColumn, true);
+                pb.Add(a => a.ShowToolbar, true);
+                pb.Add(a => a.ShowColumnList, true);
                 pb.Add(a => a.ClientTableName, "table-unit-test");
                 pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
                 pb.Add(a => a.OnDragColumnEndAsync, (fieldName, columns) =>
@@ -8490,9 +8492,14 @@ public async Task AllowDragColumn_Ok()
                     builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
                     builder.CloseComponent();
 
-                    builder.OpenComponent<TableColumn<Foo, string>>(0);
-                    builder.AddAttribute(3, "Field", "Address");
-                    builder.AddAttribute(4, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+                    builder.OpenComponent<TableColumn<Foo, string>>(3);
+                    builder.AddAttribute(4, "Field", "Address");
+                    builder.AddAttribute(5, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, int>>(6);
+                    builder.AddAttribute(7, "Field", foo.Count);
+                    builder.AddAttribute(8, "FieldExpression", Utility.GenerateValueExpression(foo, "Count", typeof(int)));
                     builder.CloseComponent();
                 });
             });
@@ -8502,17 +8509,28 @@ public async Task AllowDragColumn_Ok()
         await cut.InvokeAsync(async () =>
         {
             await table.Instance.DragColumnCallback(1, 0);
-            Assert.Equal("Address", name);
         });
+        Assert.Equal("Address", name);
+
+        var columns = cut.FindAll("th");
+        Assert.Contains("地址", columns[0].InnerHtml);
+        Assert.Contains("姓名", columns[1].InnerHtml);
 
         await cut.InvokeAsync(async () =>
         {
-            var columns = cut.FindAll("th");
-            Assert.Contains("地址", columns[0].InnerHtml);
-            Assert.Contains("姓名", columns[1].InnerHtml);
-
             await table.Instance.DragColumnCallback(2, 3);
         });
+
+        // 更改可见列
+        var checkbox = cut.Find(".dropdown-item .form-check-input");
+
+        await cut.InvokeAsync(() => checkbox.Click());
+        await cut.InvokeAsync(() => checkbox.Click());
+
+        await cut.InvokeAsync(async () =>
+        {
+            await table.Instance.DragColumnCallback(3, 4);
+        });
     }
 
     [Fact]