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

拖拽table优化测试完成

This commit is contained in:
jonyshi 2019-04-22 10:24:52 +08:00
parent 104f7c8cab
commit 782a1d9532
6 changed files with 309 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/Table.css
View File

@ -35,6 +35,8 @@
color: #1565c0; }
.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 {

11
build/Table.js
View File

@ -159,13 +159,14 @@ var Table = function (_Component) {
_this.renderDragHideTable = function () {
var _this$props = _this.props,
columns = _this$props.columns,
dragborder = _this$props.dragborder;
dragborder = _this$props.dragborder,
dragborderKey = _this$props.dragborderKey;
if (!dragborder) return null;
var sum = 0;
return _react2["default"].createElement(
'div',
{ className: _this.props.clsPrefix + '-hiden-drag' },
{ id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
columns.map(function (da, i) {
sum += da.width ? da.width : 0;
return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
@ -465,6 +466,7 @@ var Table = function (_Component) {
onMouseUp = _props.onMouseUp,
dragborder = _props.dragborder,
onThMouseMove = _props.onThMouseMove,
dragborderKey = _props.dragborderKey,
minColumnWidth = _props.minColumnWidth,
headerHeight = _props.headerHeight,
afterDragColWidth = _props.afterDragColWidth,
@ -484,7 +486,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 dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, onDropBorder: onDropBorder } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
var contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {
@ -646,7 +648,8 @@ var Table = function (_Component) {
clsPrefix: clsPrefix + '-expanded-row',
indent: 1,
expandable: false,
store: this.store
store: this.store,
dragborderKey: this.props.dragborderKey
});
};
/**

537
build/TableHeader.js
View File

@ -42,6 +42,12 @@ var propTypes = {
rows: _propTypes2["default"].array
};
function getDiv(id) {
var div = document.createElement("div");
div.id = id;
return div;
}
var TableHeader = function (_Component) {
_inherits(TableHeader, _Component);
@ -50,20 +56,39 @@ var TableHeader = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.getOnLineObject = function (_element) {
var type = _element.getAttribute('data-type'),
elementObj = null;
if (!type) {
var element = _element.parentElement || parentNode; //兼容写法。
if (element.getAttribute('data-type')) {
elementObj = element;
}
} else {
elementObj = _element;
}
return elementObj;
};
_this.onTrMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event);
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
var type = _utils.Event.getTarget(event).getAttribute('data-type');
console.log(" ------------------onTrMouseDown------------------ ");
var currentElement = _this.getOnLineObject(targetEvent);
if (!currentElement) return;
var type = currentElement.getAttribute('data-type');
console.log("type : ", type);
if (!_this.props.dragborder && !_this.props.draggable) return;
if (type == 'online' && _this.props.dragborder) {
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
if (!_this.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var defaultWidth = currentElement.getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
_this.drag.option = "border"; //拖拽操作
_this.drag.currIndex = currentIndex;
@ -71,7 +96,16 @@ var TableHeader = function (_Component) {
_this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
} else if (type != 'online' && _this.props.draggable) {} else {
console.log("====================", _this.drag);
} else if (type != 'online' && _this.props.draggable) {
if (!_this.props.draggable) return;
targetEvent.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
var _currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
_this.drag.currIndex = _currentIndex;
console.log(" ------------------onTrMouseDown------this.drag------------ ", _this.drag);
} else {
console.log("onTrMouseDown dragborder or draggable is all false !");
return;
}
@ -89,11 +123,13 @@ var TableHeader = function (_Component) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (_this.props.dragborder && _this.drag.option == "border") {
console.log(" --onTrMouseMove--border- ", _this.drag.option);
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
@ -135,21 +171,32 @@ var TableHeader = function (_Component) {
}
}
}
} else if (_this.props.draggable && _this.drag.option == "draggable") {} else {
console.log("onTrMouseMove dragborder or draggable is all false !");
return;
} else if (_this.props.draggable && _this.drag.option == "draggable") {
console.log(" --onTrMouseMove--draggable- ", _this.drag.option);
} else {
// console.log("onTrMouseMove dragborder or draggable is all false !");
// return ;
}
};
_this.onTrMouseUp = function (event) {
_this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e);
var width = _this.drag.newWidth;
_this.mouseClear(event);
_this.mouseClear();
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
var rows = _this.props.rows;
_this.clearThsDr = function () {
var ths = _this.table.ths;
for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果
}
};
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
_this.bodyonLineMouseUp = function (events, type) {
if (!_this.drag || !_this.drag.option) return;
console.log("----bodyEventListen", _this.drag);
_this.mouseClear();
};
_this.optTableMargin = function (table, scrollbarWidth) {
@ -170,141 +217,31 @@ var TableHeader = function (_Component) {
}
};
_this.onLineMouseMove = function (e) {
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
dragborder = _this$props3.dragborder,
contentDomWidth = _this$props3.contentDomWidth,
scrollbarWidth = _this$props3.scrollbarWidth,
contentTable = _this$props3.contentTable,
headerScroll = _this$props3.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.dragborder) return;
if (_this.drag.option != "border") {
return false;
}
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
_this.table.innerTableBody.style.width = newTableWidth;
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
_this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
_this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
}
} else {
if (showScroll < 0) {
_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.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
}
}
}
};
_this.onLineMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
contentTable = _this$props4.contentTable;
if (!_this.props.dragborder) return;
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
_this.drag.option = "border"; //拖拽操作
_this.drag.currIndex = currentIndex;
_this.drag.oldLeft = event.x;
_this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
};
_this.onLineMouseUp = function (event) {
var width = _this.drag.newWidth;
// const newTableWidth = this.drag.tableWidth + diff +'px';
// this.table.table.style.width = newTableWidth;//同步table的width
// this.table.innerTableBody.style.width = newTableWidth ;//同步改变table body 的width
// console.log(" --onLineMouseUp--- ");
_this.clearDragBorder(event);
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
_this.bodyonLineMouseMove = function (event) {
_this.clearDragBorder(event);
};
_this.dragAbleMouseDown = function (e) {
// Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th
_this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
_this.addDragAbleEvent(); //添加拖拽交换列的事件
};
_this.dragAbleMouseUp = function (e) {
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
_this.removeDragAbleEvent();
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th
//拖拽交换列事件
_this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上
_this.initEvent();
};
_this.onDragStart = function (e) {
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var currentIndex = parseInt(target.getAttribute("data-line-index"));
var currentKey = target.getAttribute('data-line-key');
var crt = target.cloneNode(true);
console.log(" -------crt-------", crt);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
crt.style.height = "44px";
// crt.style['line-height'] = "44px";
// document.body.appendChild(crt);
document.getElementById(_this._table_none_cont_id).appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0);
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -313,17 +250,54 @@ var TableHeader = function (_Component) {
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e);
var data = _this.getCurrentEventData(target);
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 });
};
_this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent = target;
var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
console.log("-onDragEnter-----", target);
target.style.border = "2px dashed #000";
}
};
_this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent.style = "";
document.getElementById(_this._table_none_cont_id).innerHTML = "";
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
console.log("--------------onDragEnd----", _this._dragCurrent);
};
_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) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
console.log("--onDragLeave----", target);
// console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
target.style = "";
// this._dragCurrent.style = "";
}
};
_this.handlerFilterChange = function (key, value, condition) {
var onFilterChange = _this.props.onFilterChange;
@ -341,11 +315,11 @@ var TableHeader = function (_Component) {
};
_this.filterRenderType = function (type, dataIndex, index) {
var _this$props5 = _this.props,
clsPrefix = _this$props5.clsPrefix,
rows = _this$props5.rows,
filterDelay = _this$props5.filterDelay,
locale = _this$props5.locale;
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
rows = _this$props3.rows,
filterDelay = _this$props3.filterDelay,
locale = _this$props3.locale;
switch (type) {
//文本输入
@ -461,8 +435,14 @@ var TableHeader = function (_Component) {
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable();
// this.initEvent();
this.initNewEvent();
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
var uid = "_table_uid_" + new Date().getTime();
this._table_none_cont_id = uid;
var div = getDiv(uid);
document.querySelector("body").appendChild(div);
};
/**
@ -509,18 +489,25 @@ var TableHeader = function (_Component) {
}
};
TableHeader.prototype.initNewEvent = function initNewEvent() {
/**
* 事件初始化
*/
TableHeader.prototype.initEvent = function initEvent() {
this.dragBorderEventInit(); //列宽
this.dragAbleEventInit(); //交换列
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
};
/**
* 拖拽列宽事件的监听
*/
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }, { key: 'mousedown', fun: this.onTrMouseDown }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
// if(this.props.dragborder){
// this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
// }
// if(!this.props.draggable)return;
//拖拽交换列事件
// this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
};
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
@ -536,6 +523,13 @@ var TableHeader = function (_Component) {
}
};
/**
*
*根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
* @memberof TableHeader
*/
/**
* 调整列宽的down事件
* @memberof TableHeader
@ -556,116 +550,24 @@ var TableHeader = function (_Component) {
TableHeader.prototype.mouseClear = function mouseClear() {
if (!this.drag || !this.drag.option) return;
// let {rows} = this.props;
//
//
var rows = this.props.rows;
this.drag = {
option: ""
};
this.clearThsDr();
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
};
/**
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
ths = _table.ths,
cols = _table.cols;
for (var index = 0; index < ths.length; index++) {
var element = ths[index]; //.getAttribute('data-type');
if (!element.getAttribute('data-th-fixed')) {
var colLine = null;
if (element.children.length === 0) {
colLine = element;
} else if (element.children.length > 0) {
colLine = element.lastElementChild;
} else if (element.children.length === 1) {
colLine = element.children[0];
}
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
for (var i = 0; i < events.length; i++) {
var _event = events[i];
var _dataSource = eventSource ? element : colLine;
if (type === "remove") {
_utils.EventUtil.removeHandler(_dataSource, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(_dataSource, _event.key, _event.fun);
}
}
}
}
};
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type == "remove") {
_utils.EventUtil.removeHandler(document.body, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(document.body, _event.key, _event.fun);
}
}
};
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
if (!this.table) return;
if (this.props.draggable) {
this.removeDragAbleEvent();
}
if (this.props.dragborder) {
this.removeDragBorderEvent();
}
};
/**
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initEvent = function initEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
if (this.props.dragborder) {
this.thEventListen(events, '', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]);
}
if (!this.props.draggable) return;
//拖拽交换列事件
this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到th元素上
};
/**
* 移除当前全局事件对象
* @memberof TableHeader
*/
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
};
/**
*相关滚动条联动操作
*
@ -673,74 +575,18 @@ var TableHeader = function (_Component) {
*/
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
/**
* 调整列宽到区域以外的up事件
*/
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = {
option: ""
};
if (this.props.draggable) {
this.removeDragAbleEvent();
}
};
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
* @memberof TableHeader
*/
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
TableHeader.prototype.dragAbleEventInit = function dragAbleEventInit() {
if (!this.props.draggable) return;
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
};
{ key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
/**
* 删除换列的事件监听
*/
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
this.thEventListen(events, 'remove', true);
{ key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
};
/**
@ -749,9 +595,9 @@ var TableHeader = function (_Component) {
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
/**
@ -760,9 +606,7 @@ var TableHeader = function (_Component) {
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) {
if (!th) {
console.log(" event target is not th ! ");
return null;
@ -778,26 +622,6 @@ var TableHeader = function (_Component) {
return null;
}
};
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase();
if (element.getAttribute('data-filter-type') === 'filterContext') return null;
if (_tagName === 'i') return null;
if (_tagName != 'th') {
return this.getThDome(element.parentElement);
} else {
return element;
}
};
//---拖拽列交换----end-----
/**
@ -881,21 +705,20 @@ var TableHeader = function (_Component) {
thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
}
thClassName += " " + fixedStyle;
if (!da.fixed && columIndex != _rowLeng) {
if (!da.fixed) {
return _react2["default"].createElement(
"th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width, "data-row-leng": "1111111111111" }),
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
da.children,
dragborder ? _react2["default"].createElement(
dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
"div",
{ ref: function ref(el) {
return _this2.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" },
_react2["default"].createElement("div", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width })
_react2["default"].createElement("div", { className: "online" })
) : ""
);
} else {

BIN
build/归档.zip Normal file
View File

Binary file not shown.

211
dist/demo.js vendored
View File

@ -44114,6 +44114,12 @@
rows: _propTypes2["default"].array
};
function getDiv(id) {
var div = document.createElement("div");
div.id = id;
return div;
}
var TableHeader = function (_Component) {
_inherits(TableHeader, _Component);
@ -44151,7 +44157,8 @@
console.log("type : ", type);
if (!_this.props.dragborder && !_this.props.draggable) return;
if (type == 'online' && _this.props.dragborder) {
if (!_this.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var defaultWidth = currentElement.getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
@ -44162,7 +44169,15 @@
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
console.log("====================", _this.drag);
} else if (type != 'online' && _this.props.draggable) {} else {
} else if (type != 'online' && _this.props.draggable) {
if (!_this.props.draggable) return;
targetEvent.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
var _currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
_this.drag.currIndex = _currentIndex;
console.log(" ------------------onTrMouseDown------this.drag------------ ", _this.drag);
} else {
console.log("onTrMouseDown dragborder or draggable is all false !");
return;
}
@ -44186,6 +44201,7 @@
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
@ -44242,6 +44258,13 @@
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
_this.clearThsDr = function () {
var ths = _this.table.ths;
for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果
}
};
_this.bodyonLineMouseUp = function (events, type) {
if (!_this.drag || !_this.drag.option) return;
console.log("----bodyEventListen", _this.drag);
@ -44266,45 +44289,31 @@
}
};
_this.dragAbleMouseDown = function (e) {
// Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th
_this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
_this.addDragAbleEvent(); //添加拖拽交换列的事件
};
_this.dragAbleMouseUp = function (e) {
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
_this.removeDragAbleEvent();
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th
//拖拽交换列事件
_this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上
_this.initEvent();
};
_this.onDragStart = function (e) {
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var currentIndex = parseInt(target.getAttribute("data-line-index"));
var currentKey = target.getAttribute('data-line-key');
var crt = target.cloneNode(true);
console.log(" -------crt-------", crt);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
crt.style.height = "44px";
// crt.style['line-height'] = "44px";
// document.body.appendChild(crt);
document.getElementById(_this._table_none_cont_id).appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0);
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -44313,17 +44322,54 @@
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e);
var data = _this.getCurrentEventData(target);
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 });
};
_this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent = target;
var currentIndex = target.getAttribute("data-line-index");
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
console.log("-onDragEnter-----", target);
target.style.border = "2px dashed #000";
}
};
_this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this._dragCurrent.style = "";
document.getElementById(_this._table_none_cont_id).innerHTML = "";
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
console.log("--------------onDragEnd----", _this._dragCurrent);
};
_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) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
console.log("--onDragLeave----", target);
// console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
target.style = "";
// this._dragCurrent.style = "";
}
};
_this.handlerFilterChange = function (key, value, condition) {
var onFilterChange = _this.props.onFilterChange;
@ -44464,6 +44510,13 @@
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
var uid = "_table_uid_" + new Date().getTime();
this._table_none_cont_id = uid;
var div = getDiv(uid);
document.querySelector("body").appendChild(div);
};
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
@ -44508,10 +44561,25 @@
}
};
/**
* 事件初始化
*/
TableHeader.prototype.initEvent = function initEvent() {
this.dragBorderEventInit(); //列宽
this.dragAbleEventInit(); //交换列
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
};
/**
* 拖拽列宽事件的监听
*/
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }, { key: 'mousedown', fun: this.onTrMouseDown }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
};
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
@ -44559,6 +44627,7 @@
this.drag = {
option: ""
};
this.clearThsDr();
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
};
@ -44578,37 +44647,18 @@
*/
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
* @memberof TableHeader
*/
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
TableHeader.prototype.dragAbleEventInit = function dragAbleEventInit() {
if (!this.props.draggable) return;
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
};
{ key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
/**
* 删除换列的事件监听
*/
TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
this.thEventListen(events, 'remove', true);
{ key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
};
/**
@ -44617,9 +44667,9 @@
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
/**
@ -44628,9 +44678,7 @@
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) {
if (!th) {
console.log(" event target is not th ! ");
return null;
@ -44646,26 +44694,6 @@
return null;
}
};
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase();
if (element.getAttribute('data-filter-type') === 'filterContext') return null;
if (_tagName === 'i') return null;
if (_tagName != 'th') {
return this.getThDome(element.parentElement);
} else {
return element;
}
};
//---拖拽列交换----end-----
/**
@ -44749,14 +44777,13 @@
thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
}
thClassName += " " + fixedStyle;
if (!da.fixed && columIndex != _rowLeng) {
if (!da.fixed) {
return _react2["default"].createElement(
"th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width, "data-row-leng": "1111111111111" }),
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
da.children,
dragborder ? _react2["default"].createElement(
dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
"div",
{ ref: function ref(el) {
return _this2.gap = el;

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long