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

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -62,7 +62,7 @@
     <PackageReference Include="BootstrapBlazor.OfficeViewer" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.OpcDa" Version="10.0.0" />
-    <PackageReference Include="BootstrapBlazor.PdfReader" Version="10.0.1-beta02" />
+    <PackageReference Include="BootstrapBlazor.PdfReader" Version="10.0.1-beta03" />
     <PackageReference Include="BootstrapBlazor.PdfViewer" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.Player" Version="10.0.1" />
     <PackageReference Include="BootstrapBlazor.RDKit" Version="10.0.0" />

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

@@ -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,13 @@ const setDraggable = table => {
     let index = 0
     table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
     table.dragColumns.forEach(col => {
+        EventHandler.off(col, 'dragstart')
+        EventHandler.off(col, 'dragend')
+        EventHandler.off(col, 'drop')
+        EventHandler.off(col, 'dragenter')
+        EventHandler.off(col, 'dragover')
+        EventHandler.off(col, 'dragleave')
+
         EventHandler.on(col, 'dragstart', e => {
             col.parentNode.classList.add('table-dragging')
             col.classList.add('table-drag')