diff --git a/docs/assets/option/en/common/option-secondary.md b/docs/assets/option/en/common/option-secondary.md index 0ffa6606d..cc5bddea8 100644 --- a/docs/assets/option/en/common/option-secondary.md +++ b/docs/assets/option/en/common/option-secondary.md @@ -189,6 +189,10 @@ The switch of dragging the header to move the position. After selecting a cell, - 'column' Only the column header can be swapped - 'row' Only the row header can be swapped +#${prefix} dragSortRow(boolean) = false + +Whether to enable row drag sorting. + #${prefix} hover(Object) Hover interaction configuration, specific configuration items as follows: diff --git a/docs/assets/option/zh/common/option-secondary.md b/docs/assets/option/zh/common/option-secondary.md index 92ff1018d..e868a011c 100644 --- a/docs/assets/option/zh/common/option-secondary.md +++ b/docs/assets/option/zh/common/option-secondary.md @@ -187,6 +187,11 @@ export interface SelectAllOnCtrlAOption { - 'column' 只有换列表头可换位 - 'row' 只有换行表头可换位 + +#${prefix} dragSortRow(boolean) = false + +控制拖拽行移动位置的开关。点击某个单元格后,鼠标拖拽该单元格可触发移动。 + #${prefix} hover(Object) hover 交互配置,具体配置项如下: diff --git a/packages/vtable/examples/list/list-rowSeriesNumber.ts b/packages/vtable/examples/list/list-rowSeriesNumber.ts index 60300a34f..efd1030f7 100644 --- a/packages/vtable/examples/list/list-rowSeriesNumber.ts +++ b/packages/vtable/examples/list/list-rowSeriesNumber.ts @@ -207,6 +207,7 @@ export function createTable() { // perPageCount: 20, // currentPage: 1 // }, + dragSortRow: true, rowSeriesNumber: { title: '', // field: 'sex', @@ -228,7 +229,7 @@ export function createTable() { }; const tableInstance = new VTable.ListTable(option); tableInstance.on('change_header_position', args => { - console.log('change_header_position'); + console.log('change_header_position', args); }); window.tableInstance = tableInstance; bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] }); diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 693a20d85..9cfb8fa0a 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -474,6 +474,17 @@ export function bindTableGroupListener(eventManager: EventManager) { // 如果没有正常退出编辑状态 则不执行下面的逻辑 如选择其他单元格的逻辑 return; } + if (table.options.dragSortRow === true) { + stateManager.startMoveCol( + eventArgsSet.eventArgs.col, + eventArgsSet.eventArgs.row, + eventArgsSet.abstractPos.x, + eventArgsSet.abstractPos.y, + eventArgsSet.eventArgs?.event?.nativeEvent + ); + stateManager.updateInteractionState(InteractionState.grabing); + return; + } const hitIcon = (eventArgsSet?.eventArgs?.target as any)?.role?.startsWith('icon') ? eventArgsSet.eventArgs.target diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index a8d97967e..8bb8d9bdb 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -2492,6 +2492,14 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } return undefined; } + + /** + * 判断表格行是否可拖拽 + * dragSortRow === true 表格行可拖拽 + */ + canDragSortRow(col: number, row: number): boolean { + return this._table.options.dragSortRow || this.isSeriesNumberInBody(col, row); + } /** * 判断从source地址是否可以移动到target地址 * @param source @@ -2499,7 +2507,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { * @returns boolean 是否可以移动 */ canMoveHeaderPosition(source: CellAddress, target: CellAddress): boolean { - if (this.isSeriesNumberInHeader(target.col, target.row) || this.isSeriesNumberInHeader(source.col, source.row)) { + if (this.canDragSortRow(target.col, target.row) || this.canDragSortRow(source.col, source.row)) { return false; } if (this.isCornerHeader(target.col, target.row)) { @@ -2508,7 +2516,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { if (source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) { return false; } - if (this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row)) { + if (this.canDragSortRow(target.col, target.row) && this.canDragSortRow(source.col, source.row)) { // 如果是子节点之间相互换位置 则匹配表头最后一级 // if ( // this.getColumnDefine(source.col + this.leftRowSeriesNumberColumnCount, source.row).isChildNode && diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 51018758f..35b46e8da 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -1081,13 +1081,21 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { if (this.isColumnHeader(col, row)) { return this.getCellId(col, row - 1); } else if (this.isRowHeader(col, row)) { - if (this.isSeriesNumberInBody(col - 1, row)) { + if (this.canDragSortRow(col - 1, row)) { return undefined; } return this.getCellId(col - 1, row); } return undefined; } + + /** + * 判断表格行是否可拖拽 + * dragSortRow === true 表格行可拖拽 + */ + canDragSortRow(col: number, row: number): boolean { + return this._table.options.dragSortRow || this.isSeriesNumberInBody(col, row); + } /** * 判断从source地址是否可以移动到target地址 * @param source @@ -1099,8 +1107,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { return false; } else if ( !this.transpose && - this.isSeriesNumberInBody(target.col, target.row) && - this.isSeriesNumberInBody(source.col, source.row) + this.canDragSortRow(target.col, target.row) && + this.canDragSortRow(source.col, source.row) ) { // return true; const sourceIndex = this.getRecordShowIndexByCell(0, source.row); @@ -1109,8 +1117,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { return canMove; } else if ( this.transpose && - this.isSeriesNumberInBody(target.col, target.row) && - this.isSeriesNumberInBody(source.col, source.row) + this.canDragSortRow(target.col, target.row) && + this.canDragSortRow(source.col, source.row) ) { // 如果是子节点之间相互换位置 则匹配表头最后一级 if ( @@ -1220,9 +1228,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { }; } else if ( this.isRowHeader(source.col, source.row) || - (this.isSeriesNumberInBody(source.col, source.row) && this.transpose) + (this.canDragSortRow(source.col, source.row) && this.transpose) ) { - if (this.isSeriesNumberInBody(source.col, source.row)) { + if (this.canDragSortRow(source.col, source.row)) { sourceCellRange = this.getCellRange(source.col + this.leftRowSeriesNumberColumnCount, source.row); // 把拖拽转移到拖拽表头节点 } // source单元格包含的列数 @@ -1268,7 +1276,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { targetSize: targetCellRange.end.row - targetCellRange.start.row + 1, moveType: 'row' }; - } else if (this.isSeriesNumberInBody(source.col, source.row)) { + } else if (this.canDragSortRow(source.col, source.row)) { return { sourceIndex: source.row, targetIndex: target.row, diff --git a/packages/vtable/src/scenegraph/component/cell-mover.ts b/packages/vtable/src/scenegraph/component/cell-mover.ts index 7d9a8fbd1..8062ac1f9 100644 --- a/packages/vtable/src/scenegraph/component/cell-mover.ts +++ b/packages/vtable/src/scenegraph/component/cell-mover.ts @@ -94,7 +94,7 @@ export class CellMover { linePoints.push({ x: 0, y: this.table.tableNoFrameHeight }); } else if ( cellLocation === 'rowHeader' || - (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row) + (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row) ) { rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos; rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1); diff --git a/packages/vtable/src/state/cell-move/index.ts b/packages/vtable/src/state/cell-move/index.ts index 02a6b6675..f28351884 100644 --- a/packages/vtable/src/state/cell-move/index.ts +++ b/packages/vtable/src/state/cell-move/index.ts @@ -22,7 +22,7 @@ export function startMoveCol(col: number, row: number, x: number, y: number, sta cellLocation === 'columnHeader' ? state.columnMove.x : cellLocation === 'rowHeader' || - (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row) + (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row) ? state.columnMove.y : 0; @@ -83,7 +83,7 @@ export function updateMoveCol(col: number, row: number, x: number, y: number, st } } else if ( cellLocation === 'rowHeader' || - (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row) + (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow(col, row) ) { backY = state.columnMove.y; if (state.table.isFrozenRow(row)) { @@ -171,7 +171,7 @@ export function endMoveCol(state: StateManager): boolean { } if ( !(state.table as ListTable).transpose && - (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody( + (state.table.internalProps.layoutMap as SimpleHeaderLayoutMap).canDragSortRow( state.columnMove.colSource, state.columnMove.rowSource ) diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 73a1f9198..ace1fdb4e 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -136,6 +136,8 @@ export interface IBaseTableProtected { rowResizeType?: 'row' | 'indicator' | 'all' | 'indicatorGroup'; /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; + /** 拖拽表格行调整顺序*/ + dragSortRow?: boolean; /** 拖拽表头移动位置 针对冻结部分的规则 * "disabled"(禁止调整冻结列位置):不允许其他列的表头移入冻结列,也不允许冻结列移出,冻结列保持不变。 * "adjustFrozenCount"(根据交互结果调整冻结数量):允许其他列的表头移入冻结列,及冻结列移出,并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时,冻结列数量增加;当其他列的表头被拖拽移出冻结列位置时,冻结列数量减少。 @@ -227,6 +229,10 @@ export interface IBaseTableProtected { //重新思考逻辑:如果为false,行高按设置的rowHeight;如果设置为true,则按lineHeight及是否自动换行综合计算行高 2021.11.19 by:lff autoWrapText?: boolean; + + // 支持拖拽排序 + dragSort?: boolean | 'row' | 'col'; + enableLineBreak?: boolean; menuHandler: MenuHandler; @@ -328,6 +334,8 @@ export interface BaseTableConstructorOptions { rowResizeMode?: 'all' | 'none' | 'header' | 'body'; /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; + /** 拖拽表格行调整顺序*/ + dragSortRow?: boolean; /** * 是否显示固定列图钉 基本表格生效