Skip to content

feat(table):当表格存在固定列时，只允许相同属性列之间相互交换列顺序 #8059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tony-ST0754 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(table):当表格存在固定列时，只允许相同属性列之间相互交换列顺序 #8059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1990968
feat(table):当表格存在固定列时，只允许相同属性列之间相互交换列顺序
Tony-ST0754 May 27, 2026
a739ed4
feat(table):当表格存在固定列时，只允许相同属性列之间相互交换列顺序
Tony-ST0754 May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/BootstrapBlazor/Components/Table/Table.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,7 @@ const disposeColumnDrag = columns => {

const setDraggable = table => {
let dragItem = null;
let dragItemIsFixed = false; // 为后面列拖动交换顺序时，判断是否为同一类型的列做准备
let index = 0
table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
disposeDragColumns(table.dragColumns);
Expand All @@ -820,6 +821,7 @@ const setDraggable = table => {
table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
index = table.dragColumns.indexOf(col)
dragItem = col
dragItemIsFixed = col.classList.contains('fixed') ? true : false;
e.dataTransfer.effectAllowed = 'move'
})
EventHandler.on(col, 'dragend', () => {
Expand Down Expand Up @@ -848,6 +850,13 @@ const setDraggable = table => {
})
EventHandler.on(col, 'dragover', e => {
e.preventDefault()
const isOverFixed = col.classList.contains('fixed') ? true : false;
if (dragItemIsFixed != isOverFixed) {
// 表格中只允相同属性列间相互交换顺序，即fixed列之间可以交换顺序，fixed列与非fixed列不允许交换顺序
e.dataTransfer.dropEffect = 'none'
return false;
Comment on lines +853 to +857
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Use strict comparison and reconsider return false in the dragover handler.

You can simplify this to use strict comparison and avoid implicit coercion:

const isOverFixed = col.classList.contains('fixed');
if (dragItemIsFixed !== isOverFixed) {
  e.dataTransfer.dropEffect = 'none';
  return; // or just fall through
}

Also, return false in an addEventListener handler has no special behavior (unlike inline HTML handlers), and e.preventDefault() already controls the default action, so it’s clearer to drop the boolean return.

Suggested implementation:

            dragItem = col
            dragItemIsFixed = col.classList.contains('fixed')
            e.dataTransfer.effectAllowed = 'move'
        })
        EventHandler.on(col, 'dragover', e => {
            e.preventDefault()
            const isOverFixed = col.classList.contains('fixed')
            if (dragItemIsFixed !== isOverFixed) {
                // 表格中只允相同属性列间相互交换顺序，即fixed列之间可以交换顺序，fixed列与非fixed列不允许交换顺序
                e.dataTransfer.dropEffect = 'none'
                return
            }

}

if (dragItem !== col) {
e.dataTransfer.dropEffect = 'move'
}
Expand Down
6 changes: 6 additions & 0 deletions src/BootstrapBlazor/Components/Table/TableColumn.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,12 @@ public class TableColumn<TItem, TType> : BootstrapComponentBase, ITableColumn, I
/// </summary>
protected override void OnInitialized()
{
/*
* 表格中只允相同属性列间相互交换顺序，即fixed列之间可以交换顺序，fixed列与非fixed列不允许交换顺序
* 当前固定列没有给定宽度时，默认宽度为200px，非固定列不设置默认宽度，原因为没给定宽度时，固定列交换列顺序后，会出现问题，导致left值计算错误，出现错位问题；
*/
Width = Fixed ? Width ?? 200 : Width;

Columns?.Add(this);

if (FieldExpression != null)
Expand Down
Loading