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

publish 2.2.41

This commit is contained in:
yangchch6 2020-03-13 14:59:32 +08:00
parent 98e5e14d9a
commit 87be595ae5
7 changed files with 49664 additions and 12333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -1,3 +1,8 @@
<a name="2.2.41"></a>
## [2.2.41](https://github.com/tinper-bee/bee-table/compare/v2.2.40...v2.2.41) (2020-03-13)
<a name="2.2.40"></a> <a name="2.2.40"></a>
## [2.2.40](https://github.com/tinper-bee/bee-table/compare/v2.2.39...v2.2.40) (2020-03-11) ## [2.2.40](https://github.com/tinper-bee/bee-table/compare/v2.2.39...v2.2.40) (2020-03-11)
@ -433,17 +438,17 @@
<a name="2.0.9"></a> <a name="2.0.9"></a>
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.7...v2.0.9) (2019-03-27) ## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.8...v2.0.9) (2019-03-27)
<a name="2.0.7"></a>
## [2.0.7](https://github.com/tinper-bee/bee-table/compare/v2.0.8...v2.0.7) (2019-03-20)
<a name="2.0.8"></a> <a name="2.0.8"></a>
## [2.0.8](https://github.com/tinper-bee/bee-table/compare/v2.0.6...v2.0.8) (2019-03-20) ## [2.0.8](https://github.com/tinper-bee/bee-table/compare/v2.0.7...v2.0.8) (2019-03-25)
<a name="2.0.7"></a>
## [2.0.7](https://github.com/tinper-bee/bee-table/compare/v2.0.6...v2.0.7) (2019-03-20)
### Bug Fixes ### Bug Fixes

257
build/TableHeader.js
View File

@ -73,6 +73,27 @@ var TableHeader = function (_Component) {
return _this; return _this;
} }
TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var _this2 = this;
// 表格column改变时，要重新绑定拖拽事件，否则拖拽不生效
var oldCols = this.props.columnsChildrenList;
var newCols = nextProps.columnsChildrenList;
if (this._thead) {
if (newCols.length !== oldCols.length) {
this.event = false;
return;
}
oldCols.some(function (item, index) {
if (newCols[index] && newCols[index].dataIndex !== item.dataIndex) {
_this2.event = false;
return true;
}
});
}
};
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() { TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable(); this.initTable();
this.initEvent(); this.initEvent();
@ -86,7 +107,7 @@ var TableHeader = function (_Component) {
}; };
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() { TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
var _this2 = this; var _this3 = this;
this.fixedTable = null; this.fixedTable = null;
if (!this.table) return; if (!this.table) return;
@ -97,7 +118,7 @@ var TableHeader = function (_Component) {
this.removeDragBorderEvent(); this.removeDragBorderEvent();
} }
this.doEventList(this.table.tr, function (tr) { this.doEventList(this.table.tr, function (tr) {
_this2.eventListen([{ key: 'mousedown', fun: _this2.onTrMouseDown }], 'remove', tr); _this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], 'remove', tr);
}); });
// this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]); // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body); this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body);
@ -154,7 +175,7 @@ var TableHeader = function (_Component) {
TableHeader.prototype.initEvent = function initEvent() { TableHeader.prototype.initEvent = function initEvent() {
var _this3 = this; var _this4 = this;
var _props = this.props, var _props = this.props,
dragborder = _props.dragborder, dragborder = _props.dragborder,
@ -177,7 +198,7 @@ var TableHeader = function (_Component) {
if (this.table && this.table.tr) { if (this.table && this.table.tr) {
// this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
this.doEventList(this.table.tr, function (tr) { this.doEventList(this.table.tr, function (tr) {
_this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], '', tr); //body mouseup _this4.eventListen([{ key: 'mousedown', fun: _this4.onTrMouseDown }], '', tr); //body mouseup
}); });
} }
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
@ -196,12 +217,12 @@ var TableHeader = function (_Component) {
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() { TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
var _this4 = this; var _this5 = this;
if (!this.props.dragborder) return; if (!this.props.dragborder) return;
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
this.doEventList(this.table.tr, function (tr) { this.doEventList(this.table.tr, function (tr) {
_this4.eventListen(events, '', tr); //表示把事件添加到th元素上 _this5.eventListen(events, '', tr); //表示把事件添加到th元素上
}); });
// this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}; };
@ -212,12 +233,12 @@ var TableHeader = function (_Component) {
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var _this5 = this; var _this6 = this;
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
// this.eventListen(events,'remove',this.table.tr[0]); // this.eventListen(events,'remove',this.table.tr[0]);
this.doEventList(this.table.tr, function (tr) { this.doEventList(this.table.tr, function (tr) {
_this5.eventListen(events, 'remove', _this5.table.tr); _this6.eventListen(events, 'remove', _this6.table.tr);
}); });
}; };
@ -397,7 +418,7 @@ var TableHeader = function (_Component) {
TableHeader.prototype.render = function render() { TableHeader.prototype.render = function render() {
var _this6 = this; var _this7 = this;
var _props2 = this.props, var _props2 = this.props,
clsPrefix = _props2.clsPrefix, clsPrefix = _props2.clsPrefix,
@ -415,7 +436,7 @@ var TableHeader = function (_Component) {
return _react2["default"].createElement( return _react2["default"].createElement(
"thead", "thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) { _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
return _this6._thead = _thead; return _this7._thead = _thead;
} }), } }),
rows.map(function (row, index) { rows.map(function (row, index) {
var _rowLeng = row.length - 1; var _rowLeng = row.length - 1;
@ -461,7 +482,7 @@ var TableHeader = function (_Component) {
// } // }
if (filterable && index == rows.length - 1) { if (filterable && index == rows.length - 1) {
da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex); da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
if (da.key === undefined) { if (da.key === undefined) {
keyTemp.key = keyTemp.key + '-filterable'; keyTemp.key = keyTemp.key + '-filterable';
} }
@ -488,7 +509,7 @@ var TableHeader = function (_Component) {
dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement( dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
"div", "div",
{ ref: function ref(el) { { ref: function ref(el) {
return _this6.gap = el; return _this7.gap = el;
}, "data-line-key": da.key, }, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width, "data-line-index": columIndex, "data-th-width": da.width,
"data-type": "online", className: clsPrefix + "-thead-th-drag-gap" }, "data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
@ -518,7 +539,7 @@ TableHeader.defaultProps = {
}; };
var _initialiseProps = function _initialiseProps() { var _initialiseProps = function _initialiseProps() {
var _this7 = this; var _this8 = this;
this.getOnLineObject = function (_element) { this.getOnLineObject = function (_element) {
var type = _element.getAttribute('data-type'), var type = _element.getAttribute('data-type'),
@ -538,23 +559,23 @@ var _initialiseProps = function _initialiseProps() {
_utils.Event.stopPropagation(e); _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event); targetEvent = _utils.Event.getTarget(event);
var _props3 = _this7.props, var _props3 = _this8.props,
clsPrefix = _props3.clsPrefix, clsPrefix = _props3.clsPrefix,
contentTable = _props3.contentTable, contentTable = _props3.contentTable,
lastShowIndex = _props3.lastShowIndex, lastShowIndex = _props3.lastShowIndex,
columnsChildrenList = _props3.columnsChildrenList; columnsChildrenList = _props3.columnsChildrenList;
// let currentElement = this.getOnLineObject(targetEvent); // let currentElement = this.getOnLineObject(targetEvent);
var currentElement = _this7.getTargetToType(targetEvent); var currentElement = _this8.getTargetToType(targetEvent);
if (!currentElement) return; if (!currentElement) return;
var type = currentElement.getAttribute('data-type'); var type = currentElement.getAttribute('data-type');
if (!_this7.props.dragborder && !_this7.props.draggable) return; if (!_this8.props.dragborder && !_this8.props.draggable) return;
if (type == 'online' && _this7.props.dragborder) { if (type == 'online' && _this8.props.dragborder) {
// if(!this.props.dragborder)return; // if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable', false); //添加交换列效果 targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = -1; var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width"); var defaultWidth = currentElement.getAttribute("data-th-width");
_this7.drag.option = "border"; //拖拽操作 _this8.drag.option = "border"; //拖拽操作
if (columnsChildrenList) { if (columnsChildrenList) {
var columnKey = currentElement.getAttribute("data-line-key"); var columnKey = currentElement.getAttribute("data-line-key");
if (columnKey) { if (columnKey) {
@ -567,27 +588,27 @@ var _initialiseProps = function _initialiseProps() {
console.log('Key must be set for column!'); console.log('Key must be set for column!');
return; return;
} }
var currentObj = _this7.table.cols[currentIndex]; var currentObj = _this8.table.cols[currentIndex];
_this7.drag.currIndex = currentIndex; _this8.drag.currIndex = currentIndex;
_this7.drag.oldLeft = event.x; _this8.drag.oldLeft = event.x;
_this7.drag.oldWidth = parseInt(currentObj.style.width); _this8.drag.oldWidth = parseInt(currentObj.style.width);
_this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; _this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth); _this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth);
if (!_this7.tableOldWidth) { if (!_this8.tableOldWidth) {
_this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth(); _this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
} }
if (!_this7.lastColumWidth) { if (!_this8.lastColumWidth) {
_this7.lastColumWidth = parseInt(_this7.table.cols[lastShowIndex].style.width); _this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
} }
} else if (type != 'online' && _this7.props.draggable) { } else if (type != 'online' && _this8.props.draggable) {
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this7.props.draggable) return; if (!_this8.props.draggable) return;
var th = _this7.getTargetToType(targetEvent); var th = _this8.getTargetToType(targetEvent);
th.setAttribute('draggable', true); //添加交换列效果 th.setAttribute('draggable', true); //添加交换列效果
_this7.drag.option = 'dragAble'; _this8.drag.option = 'dragAble';
_this7.currentDome = th; _this8.currentDome = th;
var _currentIndex = parseInt(th.getAttribute("data-line-index")); var _currentIndex = parseInt(th.getAttribute("data-line-index"));
_this7.drag.currIndex = _currentIndex; _this8.drag.currIndex = _currentIndex;
} else { } else {
// console.log("onTrMouseDown dragborder or draggable is all false !"); // console.log("onTrMouseDown dragborder or draggable is all false !");
return; return;
@ -597,8 +618,8 @@ var _initialiseProps = function _initialiseProps() {
this.getTableWidth = function () { this.getTableWidth = function () {
var tableWidth = 0, var tableWidth = 0,
offWidth = 0; //this.table.cols.length; offWidth = 0; //this.table.cols.length;
for (var index = 0; index < _this7.table.cols.length; index++) { for (var index = 0; index < _this8.table.cols.length; index++) {
var da = _this7.table.cols[index]; var da = _this8.table.cols[index];
tableWidth += parseInt(da.style.width); tableWidth += parseInt(da.style.width);
} }
return tableWidth - offWidth; return tableWidth - offWidth;
@ -607,7 +628,7 @@ var _initialiseProps = function _initialiseProps() {
this.getTargetToType = function (targetEvent) { this.getTargetToType = function (targetEvent) {
var tag = targetEvent; var tag = targetEvent;
if (targetEvent && !targetEvent.getAttribute("data-type")) { if (targetEvent && !targetEvent.getAttribute("data-type")) {
tag = _this7.getTargetToType(targetEvent.parentElement); tag = _this8.getTargetToType(targetEvent.parentElement);
} }
return tag; return tag;
}; };
@ -615,15 +636,15 @@ var _initialiseProps = function _initialiseProps() {
this.getTargetToTh = function (targetEvent) { this.getTargetToTh = function (targetEvent) {
var th = targetEvent; var th = targetEvent;
if (targetEvent.nodeName.toUpperCase() != "TH") { if (targetEvent.nodeName.toUpperCase() != "TH") {
th = _this7.getThDome(targetEvent); th = _this8.getThDome(targetEvent);
} }
// console.log(" getTargetToTh: ", th); // console.log(" getTargetToTh: ", th);
return th; return th;
}; };
this.onTrMouseMove = function (e) { this.onTrMouseMove = function (e) {
if (!_this7.props.dragborder && !_this7.props.draggable) return; if (!_this8.props.dragborder && !_this8.props.draggable) return;
var _props4 = _this7.props, var _props4 = _this8.props,
clsPrefix = _props4.clsPrefix, clsPrefix = _props4.clsPrefix,
dragborder = _props4.dragborder, dragborder = _props4.dragborder,
contentDomWidth = _props4.contentDomWidth, contentDomWidth = _props4.contentDomWidth,
@ -637,83 +658,83 @@ var _initialiseProps = function _initialiseProps() {
_utils.Event.stopPropagation(e); _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
if (_this7.props.dragborder && _this7.drag.option == "border") { if (_this8.props.dragborder && _this8.drag.option == "border") {
//移动改变宽度 //移动改变宽度
var currentCols = _this7.table.cols[_this7.drag.currIndex]; var currentCols = _this8.table.cols[_this8.drag.currIndex];
var diff = event.x - _this7.drag.oldLeft; var diff = event.x - _this8.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff; var newWidth = _this8.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth; _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
if (newWidth > _this7.minWidth) { if (newWidth > _this8.minWidth) {
currentCols.style.width = newWidth + 'px'; currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width //hao 支持固定表头拖拽 修改表体的width
if (_this7.fixedTable.cols) { if (_this8.fixedTable.cols) {
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px"; _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
} }
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width); var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
if (newDiff > 0) { if (newDiff > 0) {
//缩小 //缩小
var lastWidth = _this7.lastColumWidth + newDiff; var lastWidth = _this8.lastColumWidth + newDiff;
_this7.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 _this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
_this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 _this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
} }
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth; var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理 //表头滚动条处理
if (headerScroll) { if (headerScroll) {
if (showScroll < 0) { if (showScroll < 0) {
//小于 0 出现滚动条 //小于 0 出现滚动条
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth; //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this7.table.contentTableHeader.style.overflowX = 'scroll'; _this8.table.contentTableHeader.style.overflowX = 'scroll';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth); _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth); _this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
} else { } else {
//大于 0 不显示滚动条 //大于 0 不显示滚动条
_this7.table.contentTableHeader.style.overflowX = 'hidden'; _this8.table.contentTableHeader.style.overflowX = 'hidden';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0); _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0); _this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
} }
} else { } else {
if (showScroll < 0) { if (showScroll < 0) {
_this7.table.tableBody.style.overflowX = 'auto'; _this8.table.tableBody.style.overflowX = 'auto';
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth); _this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth); _this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' }); _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' }); _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
} else { } else {
_this7.table.tableBody.style.overflowX = 'hidden'; _this8.table.tableBody.style.overflowX = 'hidden';
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0); _this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0); _this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' }); _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' }); _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
} }
} }
} else { } else {
_this7.drag.newWidth = _this7.minWidth; _this8.drag.newWidth = _this8.minWidth;
} }
} }
// 增加拖拽列宽动作的回调函数 // 增加拖拽列宽动作的回调函数
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth); _this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
}; };
this.onTrMouseUp = function (e) { this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
var width = _this7.drag.newWidth; var width = _this8.drag.newWidth;
var opt = _this7.drag.option; var opt = _this8.drag.option;
_this7.mouseClear(); _this8.mouseClear();
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题 if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
_this7.props.onDropBorder && _this7.props.onDropBorder(event, width); _this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
}; };
this.clearThsDr = function () { this.clearThsDr = function () {
var ths = _this7.table.ths; var ths = _this8.table.ths;
for (var index = 0; index < ths.length; index++) { for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果 ths[index].setAttribute('draggable', false); //去掉交换列效果
} }
}; };
this.bodyonLineMouseUp = function (events, type) { this.bodyonLineMouseUp = function (events, type) {
if (!_this7.drag || !_this7.drag.option) return; if (!_this8.drag || !_this8.drag.option) return;
_this7.mouseClear(); _this8.mouseClear();
}; };
this.optTableMargin = function (table, scrollbarWidth) { this.optTableMargin = function (table, scrollbarWidth) {
@ -736,31 +757,31 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onDragStart = function (e) { this.onDragStart = function (e) {
if (!_this7.props.draggable) return; if (!_this8.props.draggable) return;
if (_this7.drag && _this7.drag.option != 'dragAble') { if (_this8.drag && _this8.drag.option != 'dragAble') {
return; return;
} }
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
// target = Event.getTarget(event); // target = Event.getTarget(event);
target = _this7.getTargetToTh(_utils.Event.getTarget(event)); target = _this8.getTargetToTh(_utils.Event.getTarget(event));
var currentIndex = parseInt(target.getAttribute("data-line-index")); var currentIndex = parseInt(target.getAttribute("data-line-index"));
var currentKey = target.getAttribute('data-line-key'); var currentKey = target.getAttribute('data-line-key');
if (event.dataTransfer.setDragImage) { if (event.dataTransfer.setDragImage) {
var crt = target.cloneNode(true); var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0"; crt.style.backgroundColor = "#ebecf0";
crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步 crt.style.width = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
crt.style.height = "40px"; crt.style.height = "40px";
// crt.style['line-height'] = "40px"; // crt.style['line-height'] = "40px";
// document.body.appendChild(crt); // document.body.appendChild(crt);
document.getElementById(_this7._table_none_cont_id).appendChild(crt); document.getElementById(_this8._table_none_cont_id).appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.setDragImage(crt, 0, 0);
} }
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey); event.dataTransfer.setData("Text", currentKey);
_this7.currentObj = _this7.props.rows[0][currentIndex]; _this8.currentObj = _this8.props.rows[0][currentIndex];
}; };
this.onDragOver = function (e) { this.onDragOver = function (e) {
@ -769,32 +790,32 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.onDrop = function (e) { this.onDrop = function (e) {
if (!_this7.props.draggable) return; if (!_this8.props.draggable) return;
var props = _this7.getCurrentEventData(_this7._dragCurrent); var props = _this8.getCurrentEventData(_this8._dragCurrent);
e.column = { props: props }; e.column = { props: props };
if (_this7.drag && _this7.drag.option != 'dragAble') { if (_this8.drag && _this8.drag.option != 'dragAble') {
_this7.props.onDrop(e); _this8.props.onDrop(e);
return; return;
} }
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
_this7.currentDome.setAttribute('draggable', false); //添加交换列效果 _this8.currentDome.setAttribute('draggable', false); //添加交换列效果
// let data = this.getCurrentEventData(this._dragCurrent); // let data = this.getCurrentEventData(this._dragCurrent);
// if(!data){ // if(!data){
// this.props.onDrop(e); // this.props.onDrop(e);
// return; // return;
// } // }
if (!_this7.props.onDrop) return; if (!_this8.props.onDrop) return;
// this.props.onDrop(event,target); // this.props.onDrop(event,target);
_this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column }); _this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
}; };
this.onDragEnter = function (e) { this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
_this7._dragCurrent = target; _this8._dragCurrent = target;
var currentIndex = target.getAttribute("data-line-index"); var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return; if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") { if (target.nodeName.toUpperCase() === "TH") {
// target.style.border = "2px dashed rgba(5,0,0,0.25)"; // target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)"); target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
@ -805,22 +826,22 @@ var _initialiseProps = function _initialiseProps() {
this.onDragEnd = function (e) { this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
_this7._dragCurrent.setAttribute("style", ""); _this8._dragCurrent.setAttribute("style", "");
// this._dragCurrent.style = ""; // this._dragCurrent.style = "";
document.getElementById(_this7._table_none_cont_id).innerHTML = ""; document.getElementById(_this8._table_none_cont_id).innerHTML = "";
var data = _this7.getCurrentEventData(_this7._dragCurrent); var data = _this8.getCurrentEventData(_this8._dragCurrent);
if (!data) return; if (!data) return;
if (!_this7.currentObj || _this7.currentObj.key == data.key) return; if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
if (!_this7.props.onDragEnd) return; if (!_this8.props.onDragEnd) return;
_this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data }); _this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
}; };
this.onDragLeave = function (e) { this.onDragLeave = function (e) {
var event = _utils.Event.getEvent(e), var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event); target = _utils.Event.getTarget(event);
var currentIndex = target.getAttribute("data-line-index"); var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return; if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") { if (target.nodeName.toUpperCase() === "TH") {
target.setAttribute("style", ""); target.setAttribute("style", "");
// this._dragCurrent.style = ""; // this._dragCurrent.style = "";
@ -828,7 +849,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.handlerFilterChange = function (key, value, condition) { this.handlerFilterChange = function (key, value, condition) {
var onFilterChange = _this7.props.onFilterChange; var onFilterChange = _this8.props.onFilterChange;
if (onFilterChange) { if (onFilterChange) {
onFilterChange(key, value, condition); onFilterChange(key, value, condition);
@ -836,7 +857,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.handlerFilterClear = function (field) { this.handlerFilterClear = function (field) {
var onFilterClear = _this7.props.onFilterClear; var onFilterClear = _this8.props.onFilterClear;
if (onFilterClear) { if (onFilterClear) {
onFilterClear(field); onFilterClear(field);
@ -844,7 +865,7 @@ var _initialiseProps = function _initialiseProps() {
}; };
this.filterRenderType = function (type, dataIndex, index) { this.filterRenderType = function (type, dataIndex, index) {
var _props5 = _this7.props, var _props5 = _this8.props,
clsPrefix = _props5.clsPrefix, clsPrefix = _props5.clsPrefix,
rows = _props5.rows, rows = _props5.rows,
filterDelay = _props5.filterDelay, filterDelay = _props5.filterDelay,
@ -859,8 +880,8 @@ var _initialiseProps = function _initialiseProps() {
, clsPrefix: clsPrefix //css前缀 , clsPrefix: clsPrefix //css前缀
, className: clsPrefix + " filter-text", , className: clsPrefix + " filter-text",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件 , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -873,8 +894,8 @@ var _initialiseProps = function _initialiseProps() {
clsPrefix: clsPrefix, clsPrefix: clsPrefix,
className: clsPrefix + " filter-text", className: clsPrefix + " filter-text",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动 , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -908,8 +929,8 @@ var _initialiseProps = function _initialiseProps() {
data: selectDataSource, data: selectDataSource,
notFoundContent: "Loading" //没有数据显示的默认字 notFoundContent: "Loading" //没有数据显示的默认字
, dataIndex: dataIndex //字段 , dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
onFocus: rows[1][index]["filterdropdownfocus"], onFocus: rows[1][index]["filterdropdownfocus"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
@ -924,8 +945,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM-DD", format: rows[1][index]["format"] || "YYYY-MM-DD",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -939,8 +960,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY", format: rows[1][index]["format"] || "YYYY",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -954,8 +975,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM", format: rows[1][index]["format"] || "YYYY-MM",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -969,8 +990,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-Wo", format: rows[1][index]["format"] || "YYYY-Wo",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@ -984,8 +1005,8 @@ var _initialiseProps = function _initialiseProps() {
onClick: function onClick() {}, onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM-DD", format: rows[1][index]["format"] || "YYYY-MM-DD",
dataIndex: dataIndex //字段 dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterChange: _this8.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调 , onFilterClear: _this8.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"], , filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

61093
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", "name": "bee-table",
"version": "2.2.40", "version": "2.2.41",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

18
src/TableHeader.js
View File

@ -39,6 +39,24 @@ class TableHeader extends Component {
contentWidthDiff: 0 contentWidthDiff: 0
}; };
componentWillReceiveProps(nextProps) {
// 表格column改变时，要重新绑定拖拽事件，否则拖拽不生效
const { columnsChildrenList:oldCols } = this.props;
const { columnsChildrenList:newCols } = nextProps;
if (this._thead) {
if(newCols.length !== oldCols.length){
this.event = false;
return;
}
oldCols.some((item, index) => {
if (newCols[index] && newCols[index].dataIndex !== item.dataIndex) {
this.event = false;
return true;
}
});
}
}
componentDidUpdate(){ componentDidUpdate(){
this.initTable(); this.initTable();
this.initEvent(); this.initEvent();