Merge remote-tracking branch 'origin/master'
# Conflicts: # dist/demo.js # dist/demo.js.map
This commit is contained in:
cw
commit
6c6d4bc1d1
19
CHANGELOG.md
19
CHANGELOG.md
|
|
@ -1,10 +1,10 @@
|
|||
<a name="2.1.14"></a>
|
||||
## [2.1.14](https://github.com/tinper-bee/bee-table/compare/v2.1.13...v2.1.14) (2019-08-17)
|
||||
|
||||
|
||||
|
||||
<a name="2.1.13"></a>
|
||||
## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.12...v2.1.13) (2019-08-07)
|
||||
|
||||
|
||||
|
||||
<a name="2.1.12"></a>
|
||||
## [2.1.12](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.12) (2019-08-07)
|
||||
## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.13) (2019-08-07)
|
||||
|
||||
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
|
||||
<a name="2.1.0"></a>
|
||||
# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.1.0) (2019-06-01)
|
||||
# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -84,6 +84,11 @@
|
|||
|
||||
|
||||
|
||||
<a name="2.0.25"></a>
|
||||
## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.24"></a>
|
||||
## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
|
||||
|
||||
|
|
|
|||
|
|
@ -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) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -304,7 +304,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%;
|
||||
|
|
@ -438,8 +438,8 @@
|
|||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
|
|||
|
|
@ -469,7 +469,7 @@ var Table = function (_Component) {
|
|||
this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
||||
}
|
||||
|
||||
if (this.computeWidth <= this.contentWidth) {
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
|
||||
//bordered的表格需要减去边框的差值1
|
||||
if (this.props.bordered) {
|
||||
|
|
@ -560,7 +560,7 @@ var Table = function (_Component) {
|
|||
return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
||||
};
|
||||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed) {
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
onFilterChange = _props.onFilterChange,
|
||||
|
|
@ -573,6 +573,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,
|
||||
|
|
@ -599,7 +600,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;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
|
|
@ -625,7 +626,9 @@ var Table = function (_Component) {
|
|||
contentDomWidth: this.contentDomWidth,
|
||||
scrollbarWidth: this.scrollbarWidth,
|
||||
headerScroll: headerScroll,
|
||||
bordered: bordered
|
||||
bordered: bordered,
|
||||
leftFixedWidth: leftFixedWidth,
|
||||
rightFixedWidth: rightFixedWidth
|
||||
})) : null;
|
||||
};
|
||||
|
||||
|
|
@ -1050,6 +1053,8 @@ var Table = function (_Component) {
|
|||
var bodyStyle = _extends({}, this.props.bodyStyle);
|
||||
var headStyle = {};
|
||||
var innerBodyStyle = {};
|
||||
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
|
||||
var tableClassName = '';
|
||||
//表格元素的宽度大于容器的宽度也显示滚动条
|
||||
|
|
@ -1150,7 +1155,7 @@ var Table = function (_Component) {
|
|||
'table',
|
||||
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
||||
_this4.getColGroup(columns, fixed),
|
||||
hasHead ? _this4.getHeader(columns, fixed) : null,
|
||||
hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
|
||||
tableBody
|
||||
);
|
||||
};
|
||||
|
|
@ -1219,8 +1224,8 @@ var Table = function (_Component) {
|
|||
)
|
||||
);
|
||||
}
|
||||
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
var expandIconWidth = expandIconAsCell ? 33 : 0;
|
||||
var parStyle = {};
|
||||
if (!fixed) {
|
||||
|
|
@ -1501,6 +1506,9 @@ var Table = function (_Component) {
|
|||
if (props.useFixedHeader || props.scroll && props.scroll.y) {
|
||||
className += ' ' + clsPrefix + '-fixed-header';
|
||||
}
|
||||
if (!props.showHeader) {
|
||||
className += ' ' + clsPrefix + '-hide-header';
|
||||
}
|
||||
if (props.bordered) {
|
||||
className += ' ' + clsPrefix + '-bordered';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,7 +157,9 @@ var TableHeader = function (_Component) {
|
|||
contentTable = _this$props2.contentTable,
|
||||
headerScroll = _this$props2.headerScroll,
|
||||
lastShowIndex = _this$props2.lastShowIndex,
|
||||
onDraggingBorder = _this$props2.onDraggingBorder;
|
||||
onDraggingBorder = _this$props2.onDraggingBorder,
|
||||
leftFixedWidth = _this$props2.leftFixedWidth,
|
||||
rightFixedWidth = _this$props2.rightFixedWidth;
|
||||
|
||||
_utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e);
|
||||
|
|
@ -189,11 +191,11 @@ var TableHeader = function (_Component) {
|
|||
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
|
||||
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth;
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
_this.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
|
|
@ -202,17 +204,20 @@ var TableHeader = function (_Component) {
|
|||
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
||||
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
|
||||
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
if (showScroll < 0) {
|
||||
_this.table.tableBody.style.overflowX = 'auto';
|
||||
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else {
|
||||
_this.table.tableBody.style.overflowX = 'hidden';
|
||||
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
|
||||
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
|
||||
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
|
|
@ -263,7 +268,7 @@ var TableHeader = function (_Component) {
|
|||
var innerTable = table.querySelector('.u-table-body-inner');
|
||||
if (innerTable) {
|
||||
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
|
||||
// overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
}
|
||||
|
|
@ -310,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) {
|
||||
|
|
@ -335,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) {
|
||||
|
|
@ -531,6 +542,7 @@ var TableHeader = function (_Component) {
|
|||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
|
||||
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -646,7 +646,7 @@ var TableRow = function (_Component) {
|
|||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', null)
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,8 @@ function bigData(Table) {
|
|||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
if (nextProps.data.toString() !== props.data.toString()) {
|
||||
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
|
||||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
|
@ -35,126 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
|
||||
function dragColumn(Table) {
|
||||
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
|
||||
_this.onDrop = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
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']);
|
||||
_this.onDragEnd = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
|
||||
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,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
}));
|
||||
};
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
newDate.title = da.title;
|
||||
_newColumns.push(newDate);
|
||||
});
|
||||
_this.setState({
|
||||
columns: _newColumns //cloneDeep(columns)
|
||||
});
|
||||
if (_this.props.onDragEnd) {
|
||||
_this.props.onDragEnd(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
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',
|
||||
onDragEnd: this.onDragEnd,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
}));
|
||||
};
|
||||
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
|
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
|
|||
*/
|
||||
|
||||
function sortBy(arr, prop, desc) {
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
|||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -63,17 +63,17 @@ function compare(property) {
|
|||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const columns = [
|
|||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
|
|
@ -131,12 +132,48 @@ const data = [
|
|||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "6"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo52 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;
|
||||
return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const columns16 = [
|
|||
},
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200, fixed:'right' },
|
||||
|
||||
];
|
||||
const columns17 = [
|
||||
|
|
|
|||
|
|
@ -64,16 +64,16 @@ class Demo30 extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
data={this.state.data}
|
||||
scroll={{y:300}}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -105,7 +105,7 @@ import 'bee-table/build/Table.css';
|
|||
|:--|:---|:--|:---|
|
||||
|key|列的键|string|-|
|
||||
|className|传入列的classname|String |-|
|
||||
|colSpan|该列的colSpan，设置列合并|Number|-|
|
||||
|colSpan|表头列合并,设置为 0 时，不渲染|Number|-|
|
||||
|title|列的标题|node|-|
|
||||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|
|
@ -126,6 +126,7 @@ import 'bee-table/build/Table.css';
|
|||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
|
||||
| mergeEndIndex | 大数据量滚动加载场景，合并表格行时，设置合并结束位置的行 index 值，设置在列 render 函数中的 props 属性上 | Number |
|
||||
|
||||
|
||||
### 高阶函数
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.1.13",
|
||||
"version": "2.2.0",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -92,4 +92,4 @@
|
|||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
src/Table.js
21
src/Table.js
|
|
@ -304,7 +304,7 @@ class Table extends Component {
|
|||
this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
||||
}
|
||||
|
||||
if (this.computeWidth <= this.contentWidth) {
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
|
||||
//bordered的表格需要减去边框的差值1
|
||||
if(this.props.bordered){
|
||||
|
|
@ -400,8 +400,8 @@ class Table extends Component {
|
|||
return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
||||
}
|
||||
|
||||
getHeader(columns, fixed) {
|
||||
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
|
||||
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
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') {
|
||||
|
|
@ -414,7 +414,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;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
|
|
@ -444,6 +444,8 @@ class Table extends Component {
|
|||
scrollbarWidth = {this.scrollbarWidth}
|
||||
headerScroll = {headerScroll}
|
||||
bordered = {bordered}
|
||||
leftFixedWidth = {leftFixedWidth}
|
||||
rightFixedWidth = {rightFixedWidth}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
|
@ -894,6 +896,8 @@ class Table extends Component {
|
|||
const bodyStyle = { ...this.props.bodyStyle };
|
||||
const headStyle = {};
|
||||
const innerBodyStyle = {};
|
||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
|
||||
let tableClassName = '';
|
||||
//表格元素的宽度大于容器的宽度也显示滚动条
|
||||
|
|
@ -994,7 +998,7 @@ class Table extends Component {
|
|||
<table className={` ${tableClassName} table-bordered ${_drag_class} `} style={tableStyle} >
|
||||
{/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
|
||||
{this.getColGroup(columns, fixed)}
|
||||
{hasHead ? this.getHeader(columns, fixed) : null}
|
||||
{hasHead ? this.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null}
|
||||
{tableBody}
|
||||
</table>
|
||||
);
|
||||
|
|
@ -1059,8 +1063,8 @@ class Table extends Component {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
let expandIconWidth = expandIconAsCell ? 33 : 0;
|
||||
let parStyle = {}
|
||||
if(!fixed){
|
||||
|
|
@ -1332,6 +1336,9 @@ class Table extends Component {
|
|||
if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
|
||||
className += ` ${clsPrefix}-fixed-header`;
|
||||
}
|
||||
if (!props.showHeader) {
|
||||
className += ` ${clsPrefix}-hide-header`;
|
||||
}
|
||||
if (props.bordered) {
|
||||
className += ` ${clsPrefix}-bordered`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ $icon-color:#505F79;
|
|||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&-fixed-header &-fixed-left &-body-inner {
|
||||
&-fixed-header:not(.u-table-hide-header) &-fixed-left &-body-inner {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ class TableHeader extends Component {
|
|||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
|
||||
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
|
||||
}
|
||||
|
||||
|
|
@ -277,7 +278,7 @@ class TableHeader extends Component {
|
|||
*/
|
||||
onTrMouseMove = (e) => {
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props;
|
||||
Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
if(this.props.dragborder && this.drag.option == "border"){
|
||||
|
|
@ -307,11 +308,10 @@ class TableHeader extends Component {
|
|||
this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
}
|
||||
|
||||
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
|
||||
let showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
|
||||
//表头滚动条处理
|
||||
if(headerScroll){
|
||||
if(showScroll < 0){
|
||||
if(showScroll < 0){ //小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
this.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
|
||||
|
|
@ -319,18 +319,20 @@ class TableHeader extends Component {
|
|||
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
|
||||
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
||||
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
|
||||
}else{
|
||||
}else{ //大于 0 不显示滚动条
|
||||
this.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
|
||||
this.optTableMargin( this.table.fixedRighHeadertTable,0);
|
||||
}
|
||||
}else{
|
||||
if(showScroll < 0){
|
||||
this.table.tableBody.style.overflowX = 'auto';
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
|
||||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
|
||||
}else{
|
||||
this.table.tableBody.style.overflowX = 'hidden';
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,0);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,0);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
|
||||
|
|
@ -407,7 +409,7 @@ class TableHeader extends Component {
|
|||
const innerTable = table.querySelector('.u-table-body-inner');
|
||||
if(innerTable){
|
||||
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
|
||||
// overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
|
||||
|
|
@ -490,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});
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -516,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});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -531,7 +531,7 @@ class TableRow extends Component{
|
|||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
{cells.length>0?cells:<td></td>}
|
||||
{cells.length>0?cells:<td style={{width:0,padding:0}}></td>}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@ export default function bigData(Table) {
|
|||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
|
||||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
if (nextProps.data.toString() !== props.data.toString()) {
|
||||
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
|
||||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>)
|
||||
|
|
|
|||
Loading…
Reference in New Issue