publish 2.2.17
This commit is contained in:
“jonyshi”
parent
7e822f3c5b
commit
ed32734bbb
|
|
@ -213,8 +213,6 @@
|
|||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
border-right: none; }
|
||||
.u-table tr:hover td .uf-eye {
|
||||
visibility: visible !important; }
|
||||
.u-table tr tr a {
|
||||
|
|
@ -525,9 +523,10 @@
|
|||
z-index: 1; }
|
||||
.u-table-thead-th-drag-gap .online {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: transparent;
|
||||
width: 4px;
|
||||
margin: 0 auto; }
|
||||
.u-table-thead-th-drag-gap .online:hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th-drag-gap .online-hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th-drag-gap:hover {
|
||||
|
|
|
|||
|
|
@ -199,6 +199,12 @@ var Table = function (_Component) {
|
|||
_this.contentTable.appendChild(div);
|
||||
};
|
||||
|
||||
_this.getColumnsChildrenList = function (columns) {
|
||||
columns.forEach(function (da) {
|
||||
da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
|
||||
});
|
||||
};
|
||||
|
||||
_this.onDragRowStart = function (currentKey) {
|
||||
var data = _this.state.data,
|
||||
currentIndex = void 0,
|
||||
|
|
@ -310,6 +316,10 @@ var Table = function (_Component) {
|
|||
} else {
|
||||
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
|
||||
}
|
||||
|
||||
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
|
||||
_this.getColumnsChildrenList(props.columns); //复杂表头、所有叶子节点
|
||||
|
||||
_this.state = {
|
||||
expandedRowKeys: expandedRowKeys,
|
||||
data: props.data,
|
||||
|
|
@ -350,7 +360,7 @@ var Table = function (_Component) {
|
|||
_this.tableUid = null;
|
||||
_this.contentTable = null;
|
||||
_this.leftColumnsLength; //左侧固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -576,6 +586,9 @@ var Table = function (_Component) {
|
|||
return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
||||
};
|
||||
|
||||
//todo 后续改进
|
||||
|
||||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
|
|
@ -614,7 +627,6 @@ var Table = function (_Component) {
|
|||
rowSpan: rows.length
|
||||
});
|
||||
}
|
||||
|
||||
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
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 } : {};
|
||||
|
|
@ -624,6 +636,7 @@ var Table = function (_Component) {
|
|||
contentWidthDiff = this.state.contentWidthDiff;
|
||||
}
|
||||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
|
||||
columnsChildrenList: this.columnsChildrenList,
|
||||
locale: this.props.locale,
|
||||
minColumnWidth: minColumnWidth,
|
||||
contentWidthDiff: contentWidthDiff,
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _this2 = this;
|
||||
|
||||
this.fixedTable = null;
|
||||
if (!this.table) return;
|
||||
if (this.props.draggable) {
|
||||
|
|
@ -94,7 +96,10 @@ var TableHeader = function (_Component) {
|
|||
if (this.props.dragborder) {
|
||||
this.removeDragBorderEvent();
|
||||
}
|
||||
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], 'remove', this.table.tr[0]);
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this2.eventListen([{ key: 'mousedown', fun: _this2.onTrMouseDown }], 'remove', tr);
|
||||
});
|
||||
// this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body);
|
||||
};
|
||||
|
||||
|
|
@ -149,6 +154,8 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.initEvent = function initEvent() {
|
||||
var _this3 = this;
|
||||
|
||||
var _props = this.props,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
|
|
@ -168,21 +175,35 @@ var TableHeader = function (_Component) {
|
|||
this.dragAbleEventInit(); //交换列
|
||||
}
|
||||
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) {
|
||||
_this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], '', tr); //body mouseup
|
||||
});
|
||||
}
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
|
||||
}
|
||||
};
|
||||
|
||||
TableHeader.prototype.doEventList = function doEventList(trs, action) {
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 拖拽列宽事件的监听
|
||||
*/
|
||||
|
||||
|
||||
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
|
||||
var _this4 = this;
|
||||
|
||||
if (!this.props.dragborder) return;
|
||||
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
|
||||
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this4.eventListen(events, '', tr); //表示把事件添加到th元素上
|
||||
});
|
||||
// this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -191,8 +212,13 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
|
||||
var _this5 = this;
|
||||
|
||||
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) {
|
||||
_this5.eventListen(events, 'remove', _this5.table.tr);
|
||||
});
|
||||
};
|
||||
|
||||
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
|
|
@ -371,7 +397,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
|
|
@ -381,14 +407,15 @@ var TableHeader = function (_Component) {
|
|||
rows = _props2.rows,
|
||||
filterable = _props2.filterable,
|
||||
fixed = _props2.fixed,
|
||||
lastShowIndex = _props2.lastShowIndex;
|
||||
|
||||
lastShowIndex = _props2.lastShowIndex,
|
||||
columnsChildrenList = _props2.columnsChildrenList;
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
var lastObj = columnsChildrenList[columnsChildrenList.length - 1];
|
||||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
return _this2._thead = _thead;
|
||||
return _this6._thead = _thead;
|
||||
} }),
|
||||
rows.map(function (row, index) {
|
||||
var _rowLeng = row.length - 1;
|
||||
|
|
@ -424,7 +451,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
if (da.key === undefined) {
|
||||
keyTemp.key = keyTemp.key + '-filterable';
|
||||
}
|
||||
|
|
@ -451,10 +478,12 @@ var TableHeader = function (_Component) {
|
|||
"*"
|
||||
) : '',
|
||||
da.children,
|
||||
dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
|
||||
|
||||
// && columIndex != _rowLeng
|
||||
dragborder && da.key != lastObj.key ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this2.gap = el;
|
||||
return _this6.gap = el;
|
||||
}, "data-line-key": da.key,
|
||||
"data-line-index": columIndex, "data-th-width": da.width,
|
||||
"data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
|
||||
|
|
@ -484,7 +513,7 @@ TableHeader.defaultProps = {
|
|||
};
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
var _this7 = this;
|
||||
|
||||
this.getOnLineObject = function (_element) {
|
||||
var type = _element.getAttribute('data-type'),
|
||||
|
|
@ -504,45 +533,53 @@ var _initialiseProps = function _initialiseProps() {
|
|||
_utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e),
|
||||
targetEvent = _utils.Event.getTarget(event);
|
||||
var _props3 = _this3.props,
|
||||
var _props3 = _this7.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
contentTable = _props3.contentTable,
|
||||
lastShowIndex = _props3.lastShowIndex;
|
||||
lastShowIndex = _props3.lastShowIndex,
|
||||
columnsChildrenList = _props3.columnsChildrenList;
|
||||
// let currentElement = this.getOnLineObject(targetEvent);
|
||||
|
||||
var currentElement = _this3.getTargetToType(targetEvent);
|
||||
var currentElement = _this7.getTargetToType(targetEvent);
|
||||
if (!currentElement) return;
|
||||
var type = currentElement.getAttribute('data-type');
|
||||
if (!_this3.props.dragborder && !_this3.props.draggable) return;
|
||||
if (type == 'online' && _this3.props.dragborder) {
|
||||
if (!_this3.props.dragborder) return;
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
if (type == 'online' && _this7.props.dragborder) {
|
||||
if (!_this7.props.dragborder) return;
|
||||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||||
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
|
||||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
var currentObj = _this3.table.cols[currentIndex];
|
||||
_this3.drag.option = "border"; //拖拽操作
|
||||
_this3.drag.currIndex = currentIndex;
|
||||
_this3.drag.oldLeft = event.x;
|
||||
_this3.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this3.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||||
_this3.drag.tableWidth = parseInt(_this3.table.table.style.width ? _this3.table.table.style.width : _this3.table.table.scrollWidth);
|
||||
// console.log(" ----- ",this.drag);
|
||||
if (!_this3.tableOldWidth) {
|
||||
_this3.tableOldWidth = _this3.drag.tableWidth; //this.getTableWidth();
|
||||
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
|
||||
_this7.drag.option = "border"; //拖拽操作
|
||||
if (columnsChildrenList) {
|
||||
var columnKey = currentElement.getAttribute("data-line-key");
|
||||
if (columnKey) {
|
||||
currentIndex = columnsChildrenList.findIndex(function (da) {
|
||||
return da.key.toLowerCase() === columnKey.toLowerCase();
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!_this3.lastColumWidth) {
|
||||
_this3.lastColumWidth = parseInt(_this3.table.cols[lastShowIndex].style.width);
|
||||
console.log("currentIndex :", currentIndex);
|
||||
var currentObj = _this7.table.cols[currentIndex];
|
||||
_this7.drag.currIndex = currentIndex;
|
||||
_this7.drag.oldLeft = event.x;
|
||||
_this7.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this7.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);
|
||||
if (!_this7.tableOldWidth) {
|
||||
_this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
|
||||
}
|
||||
} else if (type != 'online' && _this3.props.draggable) {
|
||||
if (!_this7.lastColumWidth) {
|
||||
_this7.lastColumWidth = parseInt(_this7.table.cols[lastShowIndex].style.width);
|
||||
}
|
||||
} else if (type != 'online' && _this7.props.draggable) {
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!_this3.props.draggable) return;
|
||||
var th = _this3.getTargetToType(targetEvent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var th = _this7.getTargetToType(targetEvent);
|
||||
th.setAttribute('draggable', true); //添加交换列效果
|
||||
_this3.drag.option = 'dragAble';
|
||||
_this3.currentDome = th;
|
||||
_this7.drag.option = 'dragAble';
|
||||
_this7.currentDome = th;
|
||||
var _currentIndex = parseInt(th.getAttribute("data-line-index"));
|
||||
_this3.drag.currIndex = _currentIndex;
|
||||
_this7.drag.currIndex = _currentIndex;
|
||||
} else {
|
||||
// console.log("onTrMouseDown dragborder or draggable is all false !");
|
||||
return;
|
||||
|
|
@ -552,8 +589,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTableWidth = function () {
|
||||
var tableWidth = 0,
|
||||
offWidth = 0; //this.table.cols.length;
|
||||
for (var index = 0; index < _this3.table.cols.length; index++) {
|
||||
var da = _this3.table.cols[index];
|
||||
for (var index = 0; index < _this7.table.cols.length; index++) {
|
||||
var da = _this7.table.cols[index];
|
||||
tableWidth += parseInt(da.style.width);
|
||||
}
|
||||
return tableWidth - offWidth;
|
||||
|
|
@ -562,7 +599,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToType = function (targetEvent) {
|
||||
var tag = targetEvent;
|
||||
if (targetEvent && !targetEvent.getAttribute("data-type")) {
|
||||
tag = _this3.getTargetToType(targetEvent.parentElement);
|
||||
tag = _this7.getTargetToType(targetEvent.parentElement);
|
||||
}
|
||||
return tag;
|
||||
};
|
||||
|
|
@ -570,15 +607,15 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToTh = function (targetEvent) {
|
||||
var th = targetEvent;
|
||||
if (targetEvent.nodeName.toUpperCase() != "TH") {
|
||||
th = _this3.getThDome(targetEvent);
|
||||
th = _this7.getThDome(targetEvent);
|
||||
}
|
||||
console.log(" getTargetToTh: ", th);
|
||||
return th;
|
||||
};
|
||||
|
||||
this.onTrMouseMove = function (e) {
|
||||
if (!_this3.props.dragborder && !_this3.props.draggable) return;
|
||||
var _props4 = _this3.props,
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
var _props4 = _this7.props,
|
||||
clsPrefix = _props4.clsPrefix,
|
||||
dragborder = _props4.dragborder,
|
||||
contentDomWidth = _props4.contentDomWidth,
|
||||
|
|
@ -592,18 +629,18 @@ var _initialiseProps = function _initialiseProps() {
|
|||
|
||||
_utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e);
|
||||
if (_this3.props.dragborder && _this3.drag.option == "border") {
|
||||
if (_this7.props.dragborder && _this7.drag.option == "border") {
|
||||
//移动改变宽度
|
||||
var currentCols = _this3.table.cols[_this3.drag.currIndex];
|
||||
var diff = event.x - _this3.drag.oldLeft;
|
||||
var newWidth = _this3.drag.oldWidth + diff;
|
||||
_this3.drag.newWidth = newWidth > 0 ? newWidth : _this3.minWidth;
|
||||
var currentCols = _this7.table.cols[_this7.drag.currIndex];
|
||||
var diff = event.x - _this7.drag.oldLeft;
|
||||
var newWidth = _this7.drag.oldWidth + diff;
|
||||
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
|
||||
// if(newWidth > this.drag.minWidth){
|
||||
if (newWidth > _this3.minWidth) {
|
||||
if (newWidth > _this7.minWidth) {
|
||||
currentCols.style.width = newWidth + 'px';
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if (_this3.fixedTable.cols) {
|
||||
_this3.fixedTable.cols[_this3.drag.currIndex].style.width = newWidth + "px";
|
||||
if (_this7.fixedTable.cols) {
|
||||
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
|
||||
|
|
@ -616,72 +653,72 @@ var _initialiseProps = function _initialiseProps() {
|
|||
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
|
||||
if (newDiff > 0) {
|
||||
//缩小
|
||||
var lastWidth = _this3.lastColumWidth + newDiff;
|
||||
_this3.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this3.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
var lastWidth = _this7.lastColumWidth + newDiff;
|
||||
_this7.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this3.drag.tableWidth + diff) - scrollbarWidth;
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth;
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
_this3.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this3.optTableMargin(_this3.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this3.optTableMargin(_this3.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
_this7.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
|
||||
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
||||
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this3.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this3.optTableMargin(_this3.table.fixedLeftHeaderTable, 0);
|
||||
_this3.optTableMargin(_this3.table.fixedRighHeadertTable, 0);
|
||||
_this7.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
if (showScroll < 0) {
|
||||
_this3.table.tableBody.style.overflowX = 'auto';
|
||||
_this3.optTableMargin(_this3.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this3.optTableMargin(_this3.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this3.optTableScroll(_this3.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this3.optTableScroll(_this3.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
_this7.table.tableBody.style.overflowX = 'auto';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else {
|
||||
_this3.table.tableBody.style.overflowX = 'hidden';
|
||||
_this3.optTableMargin(_this3.table.fixedLeftBodyTable, 0);
|
||||
_this3.optTableMargin(_this3.table.fixedRightBodyTable, 0);
|
||||
_this3.optTableScroll(_this3.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this3.optTableScroll(_this3.table.fixedRightBodyTable, { x: 'auto' });
|
||||
_this7.table.tableBody.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_this3.drag.newWidth = _this3.minWidth;
|
||||
_this7.drag.newWidth = _this7.minWidth;
|
||||
}
|
||||
} else if (_this3.props.draggable && _this3.drag.option == "draggable") {
|
||||
} else if (_this7.props.draggable && _this7.drag.option == "draggable") {
|
||||
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
|
||||
} else {}
|
||||
// console.log("onTrMouseMove dragborder or draggable is all false !");
|
||||
|
||||
// 增加拖拽列宽动作的回调函数
|
||||
_this3.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this3.drag.newWidth);
|
||||
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
|
||||
};
|
||||
|
||||
this.onTrMouseUp = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
var width = _this3.drag.newWidth;
|
||||
_this3.mouseClear();
|
||||
_this3.props.onDropBorder && _this3.props.onDropBorder(event, width);
|
||||
var width = _this7.drag.newWidth;
|
||||
_this7.mouseClear();
|
||||
_this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
|
||||
};
|
||||
|
||||
this.clearThsDr = function () {
|
||||
var ths = _this3.table.ths;
|
||||
var ths = _this7.table.ths;
|
||||
for (var index = 0; index < ths.length; index++) {
|
||||
ths[index].setAttribute('draggable', false); //去掉交换列效果
|
||||
}
|
||||
};
|
||||
|
||||
this.bodyonLineMouseUp = function (events, type) {
|
||||
if (!_this3.drag || !_this3.drag.option) return;
|
||||
_this3.mouseClear();
|
||||
if (!_this7.drag || !_this7.drag.option) return;
|
||||
_this7.mouseClear();
|
||||
};
|
||||
|
||||
this.optTableMargin = function (table, scrollbarWidth) {
|
||||
|
|
@ -704,31 +741,31 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDragStart = function (e) {
|
||||
if (!_this3.props.draggable) return;
|
||||
if (_this3.drag && _this3.drag.option != 'dragAble') {
|
||||
if (!_this7.props.draggable) return;
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
||||
// target = Event.getTarget(event);
|
||||
target = _this3.getTargetToTh(_utils.Event.getTarget(event));
|
||||
target = _this7.getTargetToTh(_utils.Event.getTarget(event));
|
||||
var currentIndex = parseInt(target.getAttribute("data-line-index"));
|
||||
var currentKey = target.getAttribute('data-line-key');
|
||||
|
||||
if (event.dataTransfer.setDragImage) {
|
||||
var crt = target.cloneNode(true);
|
||||
crt.style.backgroundColor = "#ebecf0";
|
||||
crt.style.width = _this3.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this3._table_none_cont_id).appendChild(crt);
|
||||
document.getElementById(_this7._table_none_cont_id).appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
}
|
||||
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", currentKey);
|
||||
_this3.currentObj = _this3.props.rows[0][currentIndex];
|
||||
_this7.currentObj = _this7.props.rows[0][currentIndex];
|
||||
};
|
||||
|
||||
this.onDragOver = function (e) {
|
||||
|
|
@ -737,32 +774,32 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDrop = function (e) {
|
||||
if (!_this3.props.draggable) return;
|
||||
var props = _this3.getCurrentEventData(_this3._dragCurrent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var props = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
e.column = { props: props };
|
||||
if (_this3.drag && _this3.drag.option != 'dragAble') {
|
||||
_this3.props.onDrop(e);
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
_this7.props.onDrop(e);
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this3.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
_this7.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||
// if(!data){
|
||||
// this.props.onDrop(e);
|
||||
// return;
|
||||
// }
|
||||
if (!_this3.props.onDrop) return;
|
||||
if (!_this7.props.onDrop) return;
|
||||
// this.props.onDrop(event,target);
|
||||
_this3.props.onDrop(event, { dragSource: _this3.currentObj, dragTarg: e.column });
|
||||
_this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
|
||||
};
|
||||
|
||||
this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this3._dragCurrent = target;
|
||||
_this7._dragCurrent = target;
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this3.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
|
||||
|
|
@ -773,22 +810,22 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.onDragEnd = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this3._dragCurrent.setAttribute("style", "");
|
||||
_this7._dragCurrent.setAttribute("style", "");
|
||||
// this._dragCurrent.style = "";
|
||||
document.getElementById(_this3._table_none_cont_id).innerHTML = "";
|
||||
document.getElementById(_this7._table_none_cont_id).innerHTML = "";
|
||||
|
||||
var data = _this3.getCurrentEventData(_this3._dragCurrent);
|
||||
var data = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this3.currentObj || _this3.currentObj.key == data.key) return;
|
||||
if (!_this3.props.onDragEnd) return;
|
||||
_this3.props.onDragEnd(event, { dragSource: _this3.currentObj, dragTarg: data });
|
||||
if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
|
||||
if (!_this7.props.onDragEnd) return;
|
||||
_this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data });
|
||||
};
|
||||
|
||||
this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this3.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
target.setAttribute("style", "");
|
||||
// this._dragCurrent.style = "";
|
||||
|
|
@ -796,7 +833,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterChange = function (key, value, condition) {
|
||||
var onFilterChange = _this3.props.onFilterChange;
|
||||
var onFilterChange = _this7.props.onFilterChange;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
|
|
@ -804,7 +841,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterClear = function (field) {
|
||||
var onFilterClear = _this3.props.onFilterClear;
|
||||
var onFilterClear = _this7.props.onFilterClear;
|
||||
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
|
|
@ -812,7 +849,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.filterRenderType = function (type, dataIndex, index) {
|
||||
var _props5 = _this3.props,
|
||||
var _props5 = _this7.props,
|
||||
clsPrefix = _props5.clsPrefix,
|
||||
rows = _props5.rows,
|
||||
filterDelay = _props5.filterDelay,
|
||||
|
|
@ -827,8 +864,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
, clsPrefix: clsPrefix //css前缀
|
||||
, className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this3.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this3.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -841,8 +878,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
clsPrefix: clsPrefix,
|
||||
className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this3.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this3.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -876,8 +913,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
data: selectDataSource,
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this3.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this3.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
|
|
@ -892,8 +929,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this3.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this3.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -907,8 +944,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this3.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this3.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.2.16",
|
||||
"version": "2.2.17",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
Loading…
Reference in New Issue