innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

解决table 交换列中onDragEnd,onDrop 事件回调问题

This commit is contained in:
jonyshi 2019-08-21 16:29:11 +08:00
parent b1ba5b5001
commit 4d88f655d6
14 changed files with 43213 additions and 42094 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -241,6 +241,9 @@ import multiSelect from "bee-table/lib/multiSelect.js";
| draggable | 可拖拽交换列 | boolean | false |
| dragborder | 可拖拽改变列宽 | boolean | false |
| checkMinSize | 当前表格显示最少列数 | boolean | false |
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
| onDrop | 交换列的回调函数 | function | (event,data,columns) |

3
build/Table.js
View File

@ -566,6 +566,7 @@ var Table = function (_Component) {
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
onDragEnd = _props.onDragEnd,
draggable = _props.draggable,
onMouseDown = _props.onMouseDown,
onMouseMove = _props.onMouseMove,
@ -592,7 +593,7 @@ var Table = function (_Component) {
}
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
var contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充

10
build/TableHeader.js
View File

@ -315,6 +315,12 @@ var TableHeader = function (_Component) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(_this._dragCurrent);
if (!data) return;
if (!_this.props.onDrop) return;
// this.props.onDrop(event,target);
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
};
_this.onDragEnter = function (e) {
@ -340,8 +346,8 @@ var TableHeader = function (_Component) {
var data = _this.getCurrentEventData(_this._dragCurrent);
if (!data) return;
if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
if (!_this.props.onDragEnd) return;
_this.props.onDragEnd(event, { dragSource: _this.currentObj, dragTarg: data });
};
_this.onDragLeave = function (e) {

21
build/lib/dragColumn.js
View File

@ -51,7 +51,7 @@ function dragColumn(Table) {
return _column;
};
_this.onDrop = function (event, data) {
_this.onDragEnd = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
@ -76,14 +76,11 @@ function dragColumn(Table) {
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
if (_this.props.onDragEnd) {
_this.props.onDragEnd(event, data, columns);
}
};
@ -134,21 +131,13 @@ function dragColumn(Table) {
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
columns = _props.columns,
onDragStart = _props.onDragStart,
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
onDragEnter: this.onDragEnter,
onDragEnd: this.onDragEnd,
draggable: draggable,
dragborder: dragborder
}));

12
demo/demolist/Demo1001.js
View File

@ -2,7 +2,7 @@
*
* @title 拖拽改变列顺序
* @parent 列操作-拖拽 Drag
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
* demo1001
*/
import React, { Component } from 'react';
@ -69,8 +69,16 @@ class Demo22 extends Component {
columns={columns}
data={data}
bordered
draggable={true}
draggable={true}
onDrop ={(event,data,columns)=>{
console.log("--拖拽交换列onDrop触发事件");
console.log("event.target:",event.target);
console.log("data:",data);
console.log("拖拽完成后的columns:",columns);
}}
onDragEnd ={(event,data,columns)=>{
console.log("--拖拽交换列后触发事件");
console.log("event.target:",event.target);
console.log("data:",data);

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css vendored
View File

@ -291,7 +291,7 @@
.u-table-fixed-left .u-table-body-inner {
margin-right: -20px;
padding-right: 20px; }
.u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
.u-table-fixed-header:not(.u-table-hide-header) .u-table-fixed-left .u-table-body-inner {
padding-right: 0px; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

85215
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.1.14",
"version": "2.2.0",
"description": "Table ui component for react",
"keywords": [
"react",

4
src/Table.js
View File

@ -395,7 +395,7 @@ class Table extends Component {
}
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -408,7 +408,7 @@ class Table extends Component {
}
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
let contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充

10
src/TableHeader.js
View File

@ -492,6 +492,12 @@ class TableHeader extends Component {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(this._dragCurrent);
if(!data)return;
if(!this.props.onDrop)return;
// this.props.onDrop(event,target);
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
};
@ -518,8 +524,8 @@ class TableHeader extends Component {
let data = this.getCurrentEventData(this._dragCurrent);
if(!data)return;
if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
if(!this.props.onDragEnd)return;
this.props.onDragEnd(event,{dragSource:this.currentObj,dragTarg:data});
}

19
src/lib/dragColumn.js
View File

@ -43,7 +43,7 @@ export default function dragColumn(Table) {
return data
}
onDrop=(event,data)=>{
onDragEnd=(event,data)=>{
let {dragSource,dragTarg} = data;
let {columns} = this.state;
let sourceIndex = -1,targetIndex = -1;
@ -65,14 +65,11 @@ export default function dragColumn(Table) {
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
this.setState({
columns:_newColumns//cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if(this.props.onDrop){
this.props.onDrop(event,data,columns);
if(this.props.onDragEnd){
this.props.onDragEnd(event,data,columns);
}
}
@ -86,11 +83,6 @@ export default function dragColumn(Table) {
dragborder,
draggable,
className,
columns,
onDragStart,
onDragEnter,
onDragOver,
onDrop,
...others
} = this.props;
return (
@ -99,10 +91,7 @@ export default function dragColumn(Table) {
columns={this.state.columns}
data={data}
className={`${className} u-table-drag-border`}
onDragStart={this.onDragStart}
onDragOver={this.onDragOver}
onDrop={this.onDrop}
onDragEnter={this.onDragEnter}
onDragEnd={this.onDragEnd}
draggable={draggable}
dragborder={dragborder}
/>)