From 97cf51841088e7a432911d4680ae1328d8ffc8ca Mon Sep 17 00:00:00 2001 From: wanghaoo Date: Sun, 2 Dec 2018 16:53:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=9B=9E=E8=B0=83=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E4=BD=8D=E7=BD=AE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Table.css | 10 +- build/TableHeader.js | 663 +++++++++++++++++++--------------------- build/lib/dragColumn.js | 73 +---- build/utils.js | 63 +++- src/TableHeader.js | 7 +- 5 files changed, 390 insertions(+), 426 deletions(-) diff --git a/build/Table.css b/build/Table.css index 3dbfffd..d4b9d95 100644 --- a/build/Table.css +++ b/build/Table.css @@ -393,14 +393,10 @@ margin: 0 auto; } .u-table-thead-th-drag-gap .online-hover { background: #000000; } - .u-table-thead-th .th-drag-gap { - background: transparent; } - .u-table-thead-th .th-drag-gap-hover { + .u-table-thead-th-drag-gap:hover { cursor: col-resize; } - .u-table-thead-th .th-drag-gap > div { - background: transparent; } - .u-table-thead-th .th-drag-gap-hover > div { - background: #000000; } + .u-table-thead-th-drag-gap:hover .online { + background: #000000; } .u-table-thead-th:last-child-drag-gap { border: none; } .u-table-filter-column-pop-cont { diff --git a/build/TableHeader.js b/build/TableHeader.js index a2797f6..baf7b32 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -10,6 +10,10 @@ var _react = require("react"); var _react2 = _interopRequireDefault(_react); +var _reactDom = require("react-dom"); + +var _reactDom2 = _interopRequireDefault(_reactDom); + var _propTypes = require("prop-types"); var _propTypes2 = _interopRequireDefault(_propTypes); @@ -52,247 +56,136 @@ var TableHeader = function (_Component) { var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - _this.onDragStart = function (event, data) { - event.dataTransfer.effectAllowed = "move"; - event.dataTransfer.setData("Text", data.key); - _this.currentObj = data; - event.dataTransfer.setDragImage(event.target, 0, 0); - _this.props.onDragStart(event, data); - }; - - _this.onDragOver = function (event, data) { - var dragAbleOrBordStart = _this.state.dragAbleOrBordStart; - - _this.setState({ - dragAbleOrBordStart: "" - }); - if (!_this.currentObj || _this.currentObj.key == data.key) return; - event.preventDefault(); - _this.props.onDragOver(event, data); - }; - - _this.onDragEnter = function (event, data) { - if (!_this.currentObj || _this.currentObj.key == data.key) return; - _this.props.onDragEnter(event, data); - }; - - _this.onDrop = function (event, data) { - if (!_this.currentObj || _this.currentObj.key == data.key) return; - _this.props.onDrop(event, data); - }; - - _this.onMouseOver = function (event, data) { - //如果是固定列没有拖拽功能 - if (_this.border || data.fixed) return; - var clsPrefix = _this.props.clsPrefix; - - if (event.target.id != 'th-online') { - event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover"; - } - }; - - _this.ableOnMouseMove = function (event, data) { - var dragAbleOrBord = _this.state.dragAbleOrBord; - - if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return; - if (dragAbleOrBord === "able") return; - _this.setState({ - dragAbleOrBord: "able" - }); - }; - - _this.onMouseMove = function (event, data) { - var dragAbleOrBord = _this.state.dragAbleOrBord; - - if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return; - if (dragAbleOrBord != "border") { - _this.setState({ - dragAbleOrBord: "border" - }); - } - //如果是固定列没有拖拽功能 - if (_this.border || data.fixed) return; - // const {clsPrefix} = this.props; - // event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`; - }; - - _this.onMouseOut = function (event, data) { - if (_this.border) return; - var clsPrefix = _this.props.clsPrefix; - - if (event.target.id != 'th-online') { - event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap"; - } - }; - - _this.onMouseDown = function (event, data) { - var _this$state = _this.state, - dragAbleOrBord = _this$state.dragAbleOrBord, - dragAbleOrBordStart = _this$state.dragAbleOrBordStart; - - _this.setState({ - dragAbleOrBordStart: dragAbleOrBord === "border" ? "borderStart" : "" - }); - // console.log("-改变宽-----度--",dragAbleOrBordStart); - _this.border = true; + _this.onLineMouseMove = function (e) { var _this$props = _this.props, clsPrefix = _this$props.clsPrefix, - contentTable = _this$props.contentTable; + dragborder = _this$props.dragborder, + contentDomWidth = _this$props.contentDomWidth, + scrollbarWidth = _this$props.scrollbarWidth, + contentTable = _this$props.contentTable, + headerScroll = _this$props.headerScroll; - _this.drag.initPageLeftX = event.pageX; - _this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left); - _this.drag.x = _this.drag.initLeft; - _this.drag.currIndex = _this.props.rows[0].findIndex(function (da) { - return da.key == data.key; - }); - - var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode; - var styleWidth = contentTableDom.style.width; - if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) { - _this.contentTableWidth = parseInt(styleWidth); - } else { - _this.contentTableWidth = parseInt(contentTableDom.scrollWidth); + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + if (!_this.props.dragborder) return; + if (_this.drag.option != "border") { + return false; } - var dragColWidth = _this.drag.data[_this.drag.currIndex].width; - if (typeof dragColWidth == "string" && dragColWidth.indexOf("%") > -1) { - _this.drag.width = _this.contentTableWidth * parseInt(dragColWidth) / 100; - } else { - _this.drag.width = parseInt(_this.drag.data[_this.drag.currIndex].width); + //移动改变宽度 + var currentCols = _this.table.cols[_this.drag.currIndex]; + var diff = event.x - _this.drag.oldLeft; + var newWidth = _this.drag.oldWidth + diff; + if (newWidth > _this.drag.minWidth) { + currentCols.style.width = newWidth + 'px'; + //hao 支持固定表头拖拽 修改表体的width + if (_this.fixedTable.cols) { + _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px"; + } + + //表头滚动条处理 + if (headerScroll) { + var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth); + var newTableWidth = oldTableWidth + diff; + _this.table.table.style.width = newTableWidth; //改变table的width + + var showScroll = contentDomWidth - newTableWidth - scrollbarWidth; + // if(bordered){ + // showScroll = showScroll -1; + // } + var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); + var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header'); + var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); + if (showScroll < 0) { + //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; + contentTableHeader.style.overflowX = 'scroll'; + fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px"); + fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); + } else { + contentTableHeader.style.overflowX = 'hidden'; + fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px'); + fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px'); + } + } } }; - _this.onMouseUp = function (event, data) { - _this.setState({ - dragAbleOrBordStart: "" - }); - _this.border = false; - var clsPrefix = _this.props.clsPrefix; - - event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap"; - }; - - _this.onThMouseUp = function (event, data) { - _this.border = false; + _this.onLineMouseDown = function (e) { + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); var _this$props2 = _this.props, clsPrefix = _this$props2.clsPrefix, - rows = _this$props2.rows, - columns = _this$props2.columns; + contentTable = _this$props2.contentTable; - var eventDom = event.target; - var optDom = void 0; - if (eventDom.classList.contains(".th-drag-gap-hover")) { - optDom = eventDom; - } else { - optDom = eventDom.querySelector("." + clsPrefix + "-thead-th-drag-gap"); - } - if (optDom) { - optDom.classList.remove("th-drag-gap-hover"); - optDom.classList.add("th-drag-gap"); - } - // columns[this.drag.currIndex].width = data.width; - //宽度拖拽后，增加回调函数，外部可以记录宽度 - if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) { - _this.props.afterDragColWidth(rows[0], _this.drag.currIndex); - } + 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.onThMouseMove = function (event, data) { - if (!_this.border) return; - //固定表头拖拽 + _this.onLineMouseUp = function (event) { + var rows = _this.props.rows; - var _this$props3 = _this.props, - dragborderKey = _this$props3.dragborderKey, - contentTable = _this$props3.contentTable, - headerScroll = _this$props3.headerScroll, - contentDomWidth = _this$props3.contentDomWidth, - scrollbarWidth = _this$props3.scrollbarWidth, - bordered = _this$props3.bordered, - rows = _this$props3.rows; + var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex }; + _this.props.afterDragColWidth && _this.props.afterDragColWidth(data); + _this.clearDragBorder(event); + }; - var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0; - var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode; + _this.bodyonLineMouseMove = function (event) { + _this.clearDragBorder(event); + }; - if (!_this.contentTableWidth) { - var styleWidth = contentTableDom.style.width; - if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) { - _this.contentTableWidth = parseInt(styleWidth); - } else { - _this.contentTableWidth = parseInt(contentTableDom.scrollWidth); - } - } - var newTableWidth = _this.contentTableWidth + x; - var newWidth = _this.drag.width + x; - if (newWidth < _this.props.minColumnWidth) { - //清楚样式 - var moveDom = event.target.querySelector(".th-drag-gap-hover"); - moveDom && moveDom.classList.remove("th-drag-gap-hover"); - // event.target.classList.remove('th-drag-gap-hover'); + _this.dragAbleMouseDown = function (e) { + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + if (!_this.props.draggable) return; + event.target.setAttribute('draggable', true); //添加交换列效果 + _this.drag.option = 'dragAble'; + _this.removeDragBorderEvent(); //清理掉拖拽列宽的事件 + _this.addDragAbleEvent(); //添加拖拽交换列的事件 + }; + + _this.onDragStart = function (e) { + var event = _utils.Event.getEvent(e); + if (!_this.props.draggable) return; + if (_this.drag.option === 'border') { return; } - //设置hiden的left - //"u-table-drag-hide-table" - var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex]; - currentHideDom.style.left = _this.drag.initPageLeftX + x - grap + "px"; + var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index")); - //获取最小宽度，不让拖动 - // let minWidth = 0; - // for(let i=0;i<=this.drag.currIndex;i++){ - // minWidth += this.drag.data[i].width; - // } + 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); + }; - // //判断最小值后在赋值 todo - // let currLeft = this.drag.initPageLeftX+x-grap; - // console.log("currLeft minWidth ",currLeft + " "+minWidth); - // if(currLeft <= minWidth){ - // return; - // } - // currentHideDom.style.left = currLeft+"px"; + _this.onDragOver = function (e) { + event.preventDefault(); + }; - //设置当前的宽度 - var currentData = _this.drag.data[_this.drag.currIndex]; - currentData.width = newWidth; - var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex]; - currentDom.style.width = newWidth + "px"; - // this.contentTableWidth = newTableWidth; - contentTableDom.style.width = newTableWidth + "px"; - // data.width = newWidth; - rows[0][_this.drag.currIndex].width = newWidth; - _this.drag.x = x; - var contentColDomArr = contentTableDom.querySelectorAll("colgroup col"); - contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px"; - //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动 - var siblingDom = contentTableDom.parentNode.nextElementSibling; - if (siblingDom) { - var bodyTableDom = siblingDom.querySelector("table"); - //2、是的话将表头对应的表格的宽度给表体对应的表格的宽度 - bodyTableDom.style.width = newTableWidth + "px"; - //3、对应的col也要跟这变 - var colDomArr = bodyTableDom.querySelectorAll("colgroup col"); - colDomArr[_this.drag.currIndex].style.width = newWidth + "px"; - //4、设置overflow属性 + _this.onDragEnter = function (e) { + if (!_this.props.draggable) return; + if (_this.drag.option === 'border') { + return; } + var data = _this.getCurrentEventData(e); + if (!_this.currentObj || _this.currentObj.key == data.key) return; + }; - //表头需要显示滚动条时，需兼容含有固定列 - if (headerScroll) { - - var showScroll = contentDomWidth - newTableWidth - scrollbarWidth; - if (bordered) { - showScroll = showScroll - 1; - } - var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); - var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header'); - var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); - if (showScroll < 0) { - //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; - contentTableHeader.style.overflowX = 'scroll'; - fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px"); - fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px"); - } else { - contentTableHeader.style.overflowX = 'hidden'; - fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px'); - fixedRightTable && (fixedRightTable.style.marginBottom = '0px'); - } + _this.onDrop = function (e) { + if (!_this.props.draggable) return; + if (_this.drag.option === 'border') { + return; } + var data = _this.getCurrentEventData(e); + if (!_this.currentObj || _this.currentObj.key == data.key) return; + if (!_this.props.onDrop) return; + _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data }); }; _this.handlerFilterTextChange = function (key, val) { @@ -312,11 +205,11 @@ var TableHeader = function (_Component) { }; _this.filterRenderType = function (type, dataIndex, index) { - var _this$props4 = _this.props, - clsPrefix = _this$props4.clsPrefix, - rows = _this$props4.rows, - filterDelay = _this$props4.filterDelay, - locale = _this$props4.locale; + var _this$props3 = _this.props, + clsPrefix = _this$props3.clsPrefix, + rows = _this$props3.rows, + filterDelay = _this$props3.filterDelay, + locale = _this$props3.locale; switch (type) { //文本输入 @@ -407,13 +300,6 @@ var TableHeader = function (_Component) { }; _this.currentObj = null; - _this.state = { - border: false, - dragAbleOrBord: props.draggable ? "able" : "", //border 拖拽列宽，able 交换列, - dragAbleOrBordStart: "" // borderStart 开始拖拽宽度 ableStart 开始交换列 - - // draggable:props.draggable?props.draggable:false, - }; //拖拽宽度处理 if (!props.dragborder) return _possibleConstructorReturn(_this); _this.border = false; @@ -422,13 +308,10 @@ var TableHeader = function (_Component) { initPageLeftX: 0, initLeft: 0, x: 0, - width: 0 + width: 0, + option: '' }; - // let _da = {}; - // Object.assign(_da,this.props.rows[0]); - // this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0])); - // let a = this.props.rows[0]; - + _this.table = null; var _row = []; _this.props.rows[0] && _this.props.rows[0].forEach(function (item) { var newItem = item.key != "checkbox" ? (0, _utils.ObjectAssign)(item) : item; @@ -438,25 +321,174 @@ var TableHeader = function (_Component) { return _this; } - TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { - if (this.props.draggable != nextProps.draggable) { - this.setState({ - dragAbleOrBord: nextProps.draggable ? "able" : "" //border 拖拽列宽，able 交换列 - // draggable:nextProps.draggable, - }); - } + /** + * 动态绑定th line 事件 + * type 为false 为增加事件 + * eventSource 为false 给 th 内部的div增加事件 + */ + TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) { + var _table = this.table, + ths = _table.ths, + cols = _table.cols; - if (this.props.dragborder != nextProps.dragborder) { - this.setState({ - dragAbleOrBord: nextProps.dragborder ? "border" : "" //border 拖拽列宽，able 交换列 - }); + for (var index = 0; index < ths.length; index++) { + var element = ths[index]; //.getAttribute('data-type'); + if (!element.getAttribute('data-th-fixed')) { + var colLine = element.children.length > 1 ? element.lastElementChild : element.children[0]; + // const colLine = element.children[0]; + for (var i = 0; i < events.length; i++) { + var _event = events[i]; + var _dataSource = eventSource ? element : colLine; + if (type === "remove") { + _dataSource.removeEventListener(_event.key, _event.fun); + } else { + _dataSource.addEventListener(_event.key, _event.fun); + } + } + } } }; - // shouldComponentUpdate(nextProps) { - // return !shallowequal(nextProps, this.props); - // } + TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) { + for (var i = 0; i < events.length; i++) { + var _event = events[i]; + if (type == "remove") { + document.removeEventListener(_event.key, _event.fun); + } else { + document.addEventListener(_event.key, _event.fun); + } + } + }; + TableHeader.prototype.componentDidUpdate = function componentDidUpdate() { + this.initTable(); + this.initEvent(); + }; + + TableHeader.prototype.componentDidMount = function componentDidMount() { + this.initTable(); + this.initEvent(); + }; + + /** + * 拖拽列宽的事件处理 + */ + + + 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); //表示把事件添加到竖线 + }; + + /** + * 移除拖拽宽度的事件 + */ + + + 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'); + }; + + /** + * 获取table的属性存放在this.table 中。(公用方法) + */ + + + TableHeader.prototype.initTable = function initTable() { + if (!this.props.dragborder && !this.props.draggable) return; + var el = _reactDom2["default"].findDOMNode(this); + var tableDome = el.parentNode; + var table = {}; + if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") { + table.table = tableDome; + table.cols = tableDome.getElementsByTagName("col"); + table.ths = tableDome.getElementsByTagName("th"); + } + this.table = table; + + if (!this.props.dragborder) return; + if (document.getElementById("u-table-drag-thead-" + this.theadKey)) { + //hao 固定列table + this.fixedTable = {}; + var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode; + var siblingDom = _fixedParentContext.parentNode.nextElementSibling; + if (siblingDom) { + var fixedTable = siblingDom.querySelector("table"); + this.fixedTable.table = fixedTable; + this.fixedTable.cols = fixedTable.getElementsByTagName("col"); + // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th"); + } + } + }; + + //---拖拽列宽代码逻辑----start----- + + + TableHeader.prototype.clearDragBorder = function clearDragBorder() { + if (!this.props.dragborder) return; + + this.drag = { + option: "" + }; + }; + + //---拖拽列宽代码逻辑----start----- + + /** + * 拖拽交换列的事件处理 + */ + TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() { + 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, '', true); + // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]); + }; + + 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); + }; + + /** + * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】 + * @memberof TableHeader + */ + + + /** + * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】 + * @memberof TableHeader + */ + + + TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) { + var event = _utils.Event.getEvent(e); + var key = event.target.getAttribute('data-line-key'); + var data = this.props.rows[0].find(function (da) { + return da.key == key; + }); + if (data) { + return data; + } else { + console.log(" getCurrentEventData data is null "); + return null; + } + }; + //---拖拽列交换----end----- /** * @description 过滤输入后的回调函数 */ @@ -473,9 +505,6 @@ var TableHeader = function (_Component) { TableHeader.prototype.render = function render() { var _this2 = this; - var _state = this.state, - dragAbleOrBord = _state.dragAbleOrBord, - dragAbleOrBordStart = _state.dragAbleOrBordStart; var _props = this.props, clsPrefix = _props.clsPrefix, rowStyle = _props.rowStyle, @@ -500,12 +529,12 @@ var TableHeader = function (_Component) { return _react2["default"].createElement( "thead", - _extends({ className: clsPrefix + "-thead" }, attr), + _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }), rows.map(function (row, index) { return _react2["default"].createElement( "tr", { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' }, - row.map(function (da, i, arr) { + row.map(function (da, columIndex, arr) { var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : ""; delete da.drgHover; var fixedStyle = ""; @@ -514,128 +543,48 @@ var TableHeader = function (_Component) { fixedStyle = clsPrefix + "-row-fixed-columns-in-body"; } - if (lastShowIndex == i) { + if (lastShowIndex == columIndex) { canDotDrag = "th-can-not-drag"; } if (filterable && index == rows.length - 1) { - da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, i); + da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex); delete da.filterdropdownfocus; } - var thAbleObj = {}, - thBorObj = {}, - thDefaultObj = {}, - thLineObj = {}; + var thDefaultObj = {}; var thClassName = "" + da.className; - if (draggable || dragborder) { - if (draggable && dragAbleOrBordStart != "borderStart") { - thAbleObj = _extends({}, da, { - onDragStart: function onDragStart(e) { - _this2.onDragStart(e, da); - }, - onDragOver: function onDragOver(e) { - _this2.onDragOver(e, da); - }, - onDrop: function onDrop(e) { - _this2.onDrop(e, da); - }, - onDragEnter: function onDragEnter(e) { - _this2.onDragEnter(e, da); - }, - onMouseMove: function onMouseMove(e) { - _this2.ableOnMouseMove(e, da); - }, - onMouseDown: function onMouseDown(e) { - //避免表头其他元素对其影响 - var filterDom = contentTable.querySelector('.filterable'); - //是否是过滤行元素，是的话不触发 - var isFilterDom = filterDom ? filterDom.contains(e.target) : false; - - if (e.target.classList.contains('uf') || isFilterDom) { - return; - } - if (e.target.classList.contains('uf')) { - return; - } - var _state2 = _this2.state, - dragAbleOrBord = _state2.dragAbleOrBord, - dragAbleOrBordStart = _state2.dragAbleOrBordStart; - - _this2.setState({ - dragAbleOrBordStart: dragAbleOrBord === "able" ? "ableStart" : "" - }); - }, - draggable: draggable, - // className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`, - key: da.key - }); - thClassName += clsPrefix + "-thead th-drag " + thHover + " "; - } - // if (dragborder && dragAbleOrBord === "border") { - if (dragborder && dragAbleOrBordStart != "ableStart") { - thBorObj.style = { 'width': da.width - // thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`, - };thBorObj.onMouseMove = function (e) { - if (draggable) { - _this2.ableOnMouseMove(e, da); - } - _this2.onThMouseMove(e, da); - }; - thBorObj.onMouseUp = function (e) { - _this2.onThMouseUp(e, da); - }; - - thClassName += clsPrefix + "-thead-th " + canDotDrag; - thBorObj.style = { width: da.width - // key:i - }; - } - // thObj.className = thObj.className+`${fixedStyle}`; - thClassName += "" + fixedStyle; - if (!da.fixed) { - thLineObj = { - onMouseMove: function onMouseMove(e) { - e.stopPropagation();_this2.onMouseMove(e, da); - }, - onMouseOut: function onMouseOut(e) { - _this2.onMouseOut(e, da); - }, - onMouseDown: function onMouseDown(e) { - e.stopPropagation();_this2.onMouseDown(e, da); - }, - onMouseUp: function onMouseUp(e) { - _this2.onMouseUp(e, da); - }, - onMouseOver: function onMouseOver(e) { - _this2.onMouseOver(e, da); - } - // className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`, - }; - if (dragAbleOrBordStart !== 'ableStart') { - thLineObj.className = clsPrefix + "-thead-th-drag-gap th-drag-gap"; - } - } + if (draggable) { + thClassName += clsPrefix + "-thead th-drag " + thHover + " "; + } + if (dragborder) { + thClassName += clsPrefix + "-thead-th " + canDotDrag; + } + thClassName += "" + fixedStyle; + if (!da.fixed) { return _react2["default"].createElement( "th", - _extends({ key: Math.random() + new Date().getTime() }, thAbleObj, thBorObj, { className: thClassName }), + { key: Math.random() + new Date().getTime(), className: thClassName, "data-th-fixed": da.fixed, + "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }, da.children, - da.fixed ? "" : _react2["default"].createElement( + dragborder ? _react2["default"].createElement( "div", - _extends({ ref: function ref(el) { + { ref: function ref(el) { return _this2.gap = el; - } }, thLineObj), - _react2["default"].createElement("div", { id: "th-online", className: "online" }) - ) + }, "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 }) + ) : "" ); } else { thDefaultObj = _extends({}, da, { className: da.className + " " + fixedStyle, - key: i + key: columIndex }); da.onClick ? thDefaultObj.onClick = function (e) { da.onClick(da, e); } : ""; - return _react2["default"].createElement("th", thDefaultObj); + return _react2["default"].createElement("th", _extends({}, thDefaultObj, { "data-th-fixed": da.fixed })); } }) ); diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js index c1844ab..bb60608 100644 --- a/build/lib/dragColumn.js +++ b/build/lib/dragColumn.js @@ -49,71 +49,30 @@ function dragColumn(Table) { return _column; }; - _this.onDragStart = function (event, data) { - if (_this.props.onDragStart) { - _this.props.onDragStart(event, data); - } - }; - - _this.onDragOver = function (event, data) { - if (_this.props.onDragOver) { - _this.props.onDragOver(event, data); - } - }; - - _this.onDragEnter = function (event, data) { - if (data.key == "checkbox") return; - var _columns = _this.state.columns; - - var columns = []; - _extends(columns, _columns); - columns.forEach(function (da) { - return da.drgHover = false; - }); - var current = columns.find(function (da) { - return da.key == data.key; - }); - if (current.fixed) return; - current.drgHover = true; - _this.setState({ - columns: columns - }); - if (_this.props.onDragEnter) { - _this.props.onDragEnter(event, data); - } - }; - _this.onDrop = function (event, data) { - if (data.key == "checkbox") return; + var dragSource = data.dragSource, + dragTarg = data.dragTarg; var columns = _this.state.columns; - var id = event.dataTransfer.getData("Text"); - var objIndex = columns.findIndex(function (_da, i) { - return _da.key == id; + var dragSourceColum = columns.find(function (da, i) { + return da.key == dragSource.key; }); - var targetIndex = columns.findIndex(function (_da, i) { - return _da.key == data.key; + var dragTargColum = columns.find(function (da, i) { + return da.key == dragTarg.key; }); - if (columns[objIndex].fixed) return; //固定列不让拖拽 - if (columns[targetIndex].fixed) return; //固定列不让拖拽 - columns.forEach(function (da, i) { - da.drgHover = false; - if (da.key == id) { - //obj - da.dragIndex = targetIndex; + + for (var index = 0; index < columns.length; index++) { + var da = columns[index]; + if (da.key === dragSource.key) { + columns[index] = dragTargColum; } - if (da.key == data.key) { - //targetObj - da.dragIndex = objIndex; + if (da.key === dragTarg.key) { + columns[index] = dragSourceColum; } - }); - var _columns = columns.sort((0, _util.compare)('dragIndex')); - _this.setState({ - columns: _columns.slice() - }); - if (_this.props.onDrop) { - _this.props.onDrop(event, data, columns); } + _this.setState({ + columns: JSON.parse(JSON.stringify(columns)) + }); }; _this.getTarget = function (evt) { diff --git a/build/utils.js b/build/utils.js index 1f6f0e6..fdcb298 100644 --- a/build/utils.js +++ b/build/utils.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.tryParseInt = undefined; +exports.Event = exports.tryParseInt = undefined; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -186,4 +186,63 @@ function getColChildrenLength(columns, chilrenLen) { } }); return chilrenLen; -} \ No newline at end of file +} + +function addHandler(element, type, handler) { + + if (element.addEventListener) { + //检测是否为DOM2级方法 + element.addEventListener(type, handler, false); + } else if (element.attachEvent) { + //检测是否为IE级方法 + element.attachEvent("on" + type, handler); + } else { + //检测是否为DOM0级方法 + element["on" + type] = handler; + } +} + +function removeHandler(element, type, handler) { + if (element.removeEventListener) { + element.removeEventListener(type, handler, false); + } else if (element.detachEvent) { + element.detachEvent("on" + type, handler); + } else { + element["on" + type] = null; + } +} + +//获取事件对象的兼容性写法 +function getEvent(event) { + return event ? event : window.event; +} + +//获取事件对象目标的兼容性写法 +function getTarget(event) { + return event.target || event.srcElement; +} + +function preventDefault(event) { + if (event.preventDefault) { + event.preventDefault(); + } else { + event.returnValue = false; + } +} + +function stopPropagation(event) { + if (event.stopPropagation) { + event.stopPropagation(); + } else { + event.cancelBubble = true; + } +} + +var Event = exports.Event = { + addHandler: addHandler, + removeHandler: removeHandler, + getEvent: getEvent, + getTarget: getTarget, + preventDefault: preventDefault, + stopPropagation: stopPropagation +}; \ No newline at end of file diff --git a/src/TableHeader.js b/src/TableHeader.js index 94c15b3..7a5f83e 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -217,6 +217,9 @@ class TableHeader extends Component { }; onLineMouseUp = (event) => { + let {rows} = this.props; + let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex}; + this.props.afterDragColWidth && this.props.afterDragColWidth(data); this.clearDragBorder(event); }; bodyonLineMouseMove = (event) => { @@ -225,9 +228,7 @@ class TableHeader extends Component { clearDragBorder(){ if (!this.props.dragborder) return; - let {rows} = this.props; - let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex}; - this.props.afterDragColWidth && this.props.afterDragColWidth(data); + this.drag = { option:"" };