Commit dd72d6b0 authored by zhangwenshuai's avatar zhangwenshuai

修改拖动排序回调

parent 459f426a
...@@ -3,7 +3,7 @@ import classNames from 'classnames'; ...@@ -3,7 +3,7 @@ import classNames from 'classnames';
const DragSorted = (props: any) => { const DragSorted = (props: any) => {
const { const {
className, style, columnName, orderNo, onDropFinish, onScroll, className, style, columnName, orderNo, onDropFinish, onScroll, canDrag,
} = props; } = props;
// 长按计时器 // 长按计时器
const timer: any = useRef(null); const timer: any = useRef(null);
...@@ -142,7 +142,7 @@ const DragSorted = (props: any) => { ...@@ -142,7 +142,7 @@ const DragSorted = (props: any) => {
const onMouseDown = useCallback( const onMouseDown = useCallback(
(e) => { (e) => {
// 没有拖拽回调,默认不支持拖拽事件 // 没有拖拽回调,默认不支持拖拽事件
if (!onDropFinish) { if (!canDrag) {
return; return;
} }
// 不是左键点击不作处理 // 不是左键点击不作处理
......
...@@ -292,6 +292,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -292,6 +292,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 }); this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 });
} }
}; };
// 拖拽滚动表格
onScrollHor = (direction: string, step: number) => { onScrollHor = (direction: string, step: number) => {
// 拖动超过视图范围,将表格左右滚动 // 拖动超过视图范围,将表格左右滚动
if (this.grid4) { if (this.grid4) {
...@@ -310,6 +311,51 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -310,6 +311,51 @@ export default class AirTable extends Component<TableProps, TableState> {
} }
} }
}; };
// 拖拽排序回调
onDragSorted = (dragColumn:any, dropColumn:any) => {
const { onDragSorted } = this.props;
const { columns } = this.state;
const newColumns:any[] = [];
columns.map((item) => {
if (dragColumn.orderNo > dropColumn.orderNo) {
if (item.orderNo >= dropColumn.orderNo && item.orderNo <= dragColumn.orderNo) {
if (item.columnName === dragColumn.columnName) {
newColumns.push({
...item,
orderNo: dropColumn.orderNo,
});
} else {
newColumns.push({
...item,
orderNo: item.orderNo + 1,
});
}
} else {
newColumns.push(item);
}
} else {
if (item.columnName === dragColumn.columnName) {
newColumns.push({
...item,
orderNo: dropColumn.orderNo - 1,
});
} else if (item.orderNo >= dragColumn.orderNo && item.orderNo <= dropColumn.orderNo) {
newColumns.push({
...item,
orderNo: item.orderNo - 1,
});
} else {
newColumns.push(item);
}
}
});
newColumns.sort((a, b) => {
return a.orderNo - b.orderNo;
});
if (typeof onDragSorted === 'function') {
onDragSorted(newColumns);
}
};
// 渲染表头 // 渲染表头
renderHeaderCell = ( renderHeaderCell = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string }, { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
...@@ -332,11 +378,12 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -332,11 +378,12 @@ export default class AirTable extends Component<TableProps, TableState> {
<DragSorted <DragSorted
columnName={columnName} columnName={columnName}
orderNo={orderNo} orderNo={orderNo}
onDropFinish={onDragSorted} onDropFinish={this.onDragSorted}
onScroll={this.onScrollHor} onScroll={this.onScrollHor}
className={styles.headerCell} className={styles.headerCell}
key={key} key={key}
style={style} style={style}
canDrag={!!onDragSorted}
> >
<ResizableBox <ResizableBox
width={style.width} width={style.width}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment