From e65f4cec38ef894c9ee202fbb3bd8502234f9664 Mon Sep 17 00:00:00 2001 From: cw Date: Fri, 9 Aug 2019 10:59:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BA=86th.setAttribute('dra?= =?UTF-8?q?ggable',=20true)=E6=8A=A5th=E4=B8=BAundefinded=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Table.css | 4 +- build/TableHeader.js | 12 +-- build/lib/dragColumn.js | 222 ++++++++++++++++++++-------------------- build/lib/util.js | 80 +++++++-------- src/TableHeader.js | 66 ++++++------ 5 files changed, 192 insertions(+), 192 deletions(-) diff --git a/build/Table.css b/build/Table.css index 0e22b33..afc4d36 100644 --- a/build/Table.css +++ b/build/Table.css @@ -438,8 +438,8 @@ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; - /* - Introduced in IE 10. + /* + Introduced in IE 10. */ -ms-user-select: none; user-select: none; } diff --git a/build/TableHeader.js b/build/TableHeader.js index 23f5cfa..b2e2e67 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -106,9 +106,9 @@ var TableHeader = function (_Component) { _this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width); } } else if (type != 'online' && _this.props.draggable) { - // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; + // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; if (!_this.props.draggable) return; - var th = _this.getTargetToTh(targetEvent); + var th = _this.getTargetToType(targetEvent); th.setAttribute('draggable', true); //添加交换列效果 _this.drag.option = 'dragAble'; _this.currentDome = th; @@ -184,7 +184,7 @@ var TableHeader = function (_Component) { var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width); if (newDiff > 0) { - //缩小 + //缩小 var lastWidth = _this.lastColumWidth + newDiff; _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 @@ -698,7 +698,7 @@ var TableHeader = function (_Component) { if (!this.props.draggable) return; var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发 { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件 - { key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 + { key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }]; this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上 @@ -767,7 +767,7 @@ var TableHeader = function (_Component) { } }; - //---拖拽列交换----end----- + //---拖拽列交换----end----- /** * 过滤输入后或下拉条件的回调函数 @@ -832,7 +832,7 @@ var TableHeader = function (_Component) { // if(da.dataindex && da.key ===undefined ){ keyTemp.key = da.key || da.dataindex || index + '-' + columIndex; - // } + // } if (filterable && index == rows.length - 1) { da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex); if (da.key === undefined) { diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js index 476242c..1eefb7d 100644 --- a/build/lib/dragColumn.js +++ b/build/lib/dragColumn.js @@ -1,7 +1,7 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; @@ -35,126 +35,126 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" function dragColumn(Table) { - return function (_Component) { - _inherits(DragColumn, _Component); + return function (_Component) { + _inherits(DragColumn, _Component); - function DragColumn(props) { - _classCallCheck(this, DragColumn); + function DragColumn(props) { + _classCallCheck(this, DragColumn); - var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - _this.setColumOrderByIndex = function (_column) { - _column.forEach(function (da, i) { - da.dragIndex = i; - da.drgHover = false; - }); - return _column; - }; + _this.setColumOrderByIndex = function (_column) { + _column.forEach(function (da, i) { + da.dragIndex = i; + da.drgHover = false; + }); + return _column; + }; - _this.onDrop = function (event, data) { - var dragSource = data.dragSource, - dragTarg = data.dragTarg; - var columns = _this.state.columns; + _this.onDrop = function (event, data) { + var dragSource = data.dragSource, + dragTarg = data.dragTarg; + var columns = _this.state.columns; - var sourceIndex = -1, - targetIndex = -1; + var sourceIndex = -1, + targetIndex = -1; - sourceIndex = columns.findIndex(function (da, i) { - return da.key == dragSource.key; - }); - targetIndex = columns.findIndex(function (da, i) { - return da.key == dragTarg.key; - }); - // 向前移动 - if (targetIndex < sourceIndex) { - targetIndex = targetIndex + 1; + sourceIndex = columns.findIndex(function (da, i) { + return da.key == dragSource.key; + }); + targetIndex = columns.findIndex(function (da, i) { + return da.key == dragTarg.key; + }); + // 向前移动 + if (targetIndex < sourceIndex) { + targetIndex = targetIndex + 1; + } + columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]); + var _newColumns = []; + columns.forEach(function (da, i) { + var newDate = _extends(da, {}); + newDate.title = da.title; + _newColumns.push(newDate); + }); + // console.log(" onDrop-------columns--- ",columns); + _this.setState({ + columns: _newColumns //cloneDeep(columns) + }); + // console.log(" onDrop-------columns--- ",_newColumns); + // console.log(columns === _newColumns); + if (_this.props.onDrop) { + _this.props.onDrop(event, data, columns); + } + }; + + _this.getTarget = function (evt) { + return evt.target || evt.srcElement; + }; + + _this.state = { + columns: _this.setColumOrderByIndex(props.columns) + }; + return _this; } - columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]); - var _newColumns = []; - columns.forEach(function (da, i) { - var newDate = _extends(da, {}); - newDate.title = da.title; - _newColumns.push(newDate); + + DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (nextProps.columns != this.props.columns) { + this.setState({ + columns: this.setColumOrderByIndex(nextProps.columns) + }); + } + }; + + DragColumn.prototype.recursion = function (_recursion) { + function recursion(_x) { + return _recursion.apply(this, arguments); + } + + recursion.toString = function () { + return _recursion.toString(); + }; + + return recursion; + }(function (obj) { + var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + for (key in obj) { + if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) { + data[key] = recursion(obj[key]); + } else { + data[key] = obj[key]; + } + } + return data; }); - // console.log(" onDrop-------columns--- ",columns); - _this.setState({ - columns: _newColumns //cloneDeep(columns) - }); - // console.log(" onDrop-------columns--- ",_newColumns); - // console.log(columns === _newColumns); - if (_this.props.onDrop) { - _this.props.onDrop(event, data, columns); - } - }; - _this.getTarget = function (evt) { - return evt.target || evt.srcElement; - }; + DragColumn.prototype.render = function render() { + var _props = this.props, + data = _props.data, + dragborder = _props.dragborder, + draggable = _props.draggable, + className = _props.className, + columns = _props.columns, + onDragStart = _props.onDragStart, + onDragEnter = _props.onDragEnter, + onDragOver = _props.onDragOver, + onDrop = _props.onDrop, + others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']); - _this.state = { - columns: _this.setColumOrderByIndex(props.columns) - }; - return _this; - } + return _react2["default"].createElement(Table, _extends({}, others, { + columns: this.state.columns, + data: data, + className: className + ' u-table-drag-border', + onDragStart: this.onDragStart, + onDragOver: this.onDragOver, + onDrop: this.onDrop, + onDragEnter: this.onDragEnter, + draggable: draggable, + dragborder: dragborder + })); + }; - DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { - if (nextProps.columns != this.props.columns) { - this.setState({ - columns: this.setColumOrderByIndex(nextProps.columns) - }); - } - }; - - DragColumn.prototype.recursion = function (_recursion) { - function recursion(_x) { - return _recursion.apply(this, arguments); - } - - recursion.toString = function () { - return _recursion.toString(); - }; - - return recursion; - }(function (obj) { - var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - for (key in obj) { - if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) { - data[key] = recursion(obj[key]); - } else { - data[key] = obj[key]; - } - } - return data; - }); - - DragColumn.prototype.render = function render() { - var _props = this.props, - data = _props.data, - dragborder = _props.dragborder, - draggable = _props.draggable, - className = _props.className, - columns = _props.columns, - onDragStart = _props.onDragStart, - onDragEnter = _props.onDragEnter, - onDragOver = _props.onDragOver, - onDrop = _props.onDrop, - others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']); - - return _react2["default"].createElement(Table, _extends({}, others, { - columns: this.state.columns, - data: data, - className: className + ' u-table-drag-border', - onDragStart: this.onDragStart, - onDragOver: this.onDragOver, - onDrop: this.onDrop, - onDragEnter: this.onDragEnter, - draggable: draggable, - dragborder: dragborder - })); - }; - - return DragColumn; - }(_react.Component); + return DragColumn; + }(_react.Component); } module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/util.js b/build/lib/util.js index 9ea2e19..237dba1 100644 --- a/build/lib/util.js +++ b/build/lib/util.js @@ -1,7 +1,7 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign; */ function sortBy(arr, prop, desc) { - var props = [], - ret = [], - i = 0, - len = arr.length; - if (typeof prop == 'string') { - for (; i < len; i++) { - var oI = arr[i]; - (props[i] = new String(oI && oI[prop] || ''))._obj = oI; - } - } else if (typeof prop == 'function') { - for (; i < len; i++) { - var _oI = arr[i]; - (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI; - } - } else { - throw '参数类型错误'; + var props = [], + ret = [], + i = 0, + len = arr.length; + if (typeof prop == 'string') { + for (; i < len; i++) { + var oI = arr[i]; + (props[i] = new String(oI && oI[prop] || ''))._obj = oI; } - props.sort(); - for (i = 0; i < len; i++) { - ret[i] = props[i]._obj; + } else if (typeof prop == 'function') { + for (; i < len; i++) { + var _oI = arr[i]; + (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI; } - if (desc) ret.reverse(); - return ret; + } else { + throw '参数类型错误'; + } + props.sort(); + for (i = 0; i < len; i++) { + ret[i] = props[i]._obj; + } + if (desc) ret.reverse(); + return ret; }; /** @@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) { * @param {} property */ function compare(property) { - return function (a, b) { - var value1 = a[property]; - var value2 = b[property]; - return value1 - value2; - }; + return function (a, b) { + var value1 = a[property]; + var value2 = b[property]; + return value1 - value2; + }; } /** @@ -63,17 +63,17 @@ function compare(property) { * @param {*} obj 要拷贝的对象 */ function ObjectAssign(obj) { - var b = obj instanceof Array; - var tagObj = b ? [] : {}; - if (b) { - //数组 - obj.forEach(function (da) { - var _da = {}; - _extends(_da, da); - tagObj.push(_da); - }); - } else { - _extends(tagObj, obj); - } - return tagObj; + var b = obj instanceof Array; + var tagObj = b ? [] : {}; + if (b) { + //数组 + obj.forEach(function (da) { + var _da = {}; + _extends(_da, da); + tagObj.push(_da); + }); + } else { + _extends(tagObj, obj); + } + return tagObj; } \ No newline at end of file diff --git a/src/TableHeader.js b/src/TableHeader.js index 2b75c98..a4f8d3a 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -22,7 +22,7 @@ function getDiv(id){ class TableHeader extends Component { constructor(props) { super(props); - this.currentObj = null; + this.currentObj = null; this.theadKey = new Date().getTime(); this.drag = { option:'' @@ -88,7 +88,7 @@ class TableHeader extends Component { table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ; table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ; table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table'); - + this.table = table; if(!this.props.dragborder)return; @@ -97,7 +97,7 @@ class TableHeader extends Component { let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode; let siblingDom = _fixedParentContext.parentNode.nextElementSibling; if (siblingDom) { - let fixedTable = siblingDom.querySelector("table"); + let fixedTable = siblingDom.querySelector("table"); this.fixedTable.table = fixedTable this.fixedTable.cols = fixedTable.getElementsByTagName("col"); // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th"); @@ -193,7 +193,7 @@ class TableHeader extends Component { * @memberof TableHeader */ onTrMouseDown = (e) => { - Event.stopPropagation(e); + Event.stopPropagation(e); let event = Event.getEvent(e) , targetEvent = Event.getTarget(event); const { clsPrefix, contentTable,lastShowIndex } = this.props; @@ -223,9 +223,9 @@ class TableHeader extends Component { this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width); } }else if(type != 'online' && this.props.draggable){ - // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; - if (!this.props.draggable) return; - let th = this.getTargetToTh(targetEvent); + // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; + if (!this.props.draggable) return; + let th = this.getTargetToType(targetEvent); th.setAttribute('draggable',true);//添加交换列效果 this.drag.option = 'dragAble'; this.currentDome = th; @@ -236,7 +236,7 @@ class TableHeader extends Component { return ; } }; - + getTableWidth = ()=>{ let tableWidth = 0,offWidth = 0;//this.table.cols.length; for (let index = 0; index < this.table.cols.length; index++) { @@ -245,7 +245,7 @@ class TableHeader extends Component { } return (tableWidth-offWidth); } - + /** * 根据当前节点查找到有data-type类型的容器返回。 * @memberof TableHeader @@ -258,7 +258,7 @@ class TableHeader extends Component { return tag; } - + /** * 判断当前的target 是否是 th，如果不是，直接递归查找。 * @memberof TableHeader @@ -278,12 +278,12 @@ class TableHeader extends Component { onTrMouseMove = (e) => { if(!this.props.dragborder && !this.props.draggable)return; const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props; - Event.stopPropagation(e); - let event = Event.getEvent(e); + Event.stopPropagation(e); + let event = Event.getEvent(e); if(this.props.dragborder && this.drag.option == "border"){ //移动改变宽度 let currentCols = this.table.cols[this.drag.currIndex]; - let diff = (event.x - this.drag.oldLeft); + let diff = (event.x - this.drag.oldLeft); let newWidth = this.drag.oldWidth + diff; this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth; // if(newWidth > this.drag.minWidth){ @@ -298,11 +298,11 @@ class TableHeader extends Component { // this.table.table.style.width = newTableWidth+'px';;//改变table的width // if(this.table.innerTableBody){//TODO 后续需要处理此处 // this.table.innerTableBody.style.width = newTableWidth+'px'; - + // } let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width)); - if(newDiff > 0){//缩小 + if(newDiff > 0){//缩小 let lastWidth = this.lastColumWidth + newDiff; this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头 this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体 @@ -354,14 +354,14 @@ class TableHeader extends Component { * @memberof TableHeader */ onTrMouseUp = (e) => { - let event = Event.getEvent(e); + let event = Event.getEvent(e); let width = this.drag.newWidth; this.mouseClear(); this.props.onDropBorder && this.props.onDropBorder(event,width); }; - mouseClear(){ + mouseClear(){ if(!this.drag || !this.drag.option)return; let {rows} = this.props; let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex}; @@ -410,7 +410,7 @@ class TableHeader extends Component { // overflow.x && (innerTable.style.overflowX = overflow.x); overflow.y && (innerTable.style.overflowY = overflow.y); } - + } } @@ -423,9 +423,9 @@ class TableHeader extends Component { let events = [ {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发 {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件 - {key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件 + {key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件 - {key:'dragenter', fun:this.onDragEnter}, + {key:'dragenter', fun:this.onDragEnter}, {key:'dragend', fun:this.onDragEnd}, {key:'dragleave', fun:this.onDragLeave}, ]; @@ -440,7 +440,7 @@ class TableHeader extends Component { {key:'dragstart',fun:this.onDragStart}, {key:'dragover', fun:this.onDragOver}, {key:'drop', fun:this.onDrop}, - {key:'dragenter', fun:this.onDragEnter}, + {key:'dragenter', fun:this.onDragEnter}, {key:'dragend', fun:this.onDragEnd}, {key:'dragleave', fun:this.onDragLeave}, ]; @@ -452,7 +452,7 @@ class TableHeader extends Component { */ onDragStart = (e) => { if (!this.props.draggable) return; - if(this.drag && this.drag.option != 'dragAble'){return;} + if(this.drag && this.drag.option != 'dragAble'){return;} let event = Event.getEvent(e) , // target = Event.getTarget(event); target = this.getTargetToTh(Event.getTarget(event)); @@ -512,7 +512,7 @@ class TableHeader extends Component { this._dragCurrent.setAttribute("style",""); // this._dragCurrent.style = ""; document.getElementById(this._table_none_cont_id).innerHTML = ""; - + let data = this.getCurrentEventData(this._dragCurrent); if(!data)return; if (!this.currentObj || this.currentObj.key == data.key) return; @@ -531,9 +531,9 @@ class TableHeader extends Component { // this._dragCurrent.style = ""; } } - - + + /** * 获取当前th上的对象数据 * @param {*} e @@ -572,8 +572,8 @@ class TableHeader extends Component { } } - -//---拖拽列交换----end----- + +//---拖拽列交换----end----- /** * 过滤输入后或下拉条件的回调函数 @@ -710,7 +710,7 @@ class TableHeader extends Component { }; - render() { + render() { const { clsPrefix, rowStyle,draggable, dragborder, rows,filterable,fixed,lastShowIndex, } = this.props; @@ -732,7 +732,7 @@ class TableHeader extends Component { if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) { fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`; } - + if (lastShowIndex == columIndex) { canDotDrag = "th-can-not-drag"; } @@ -745,8 +745,8 @@ class TableHeader extends Component { //避免key为undefined // if(da.dataindex && da.key ===undefined ){ keyTemp.key = da.key || da.dataindex || index+'-'+columIndex - - // } + + // } if (filterable && index == rows.length - 1) { da.children = this.filterRenderType( da["filtertype"], @@ -760,7 +760,7 @@ class TableHeader extends Component { } let thDefaultObj = {}; - + if(draggable){ thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `; } @@ -769,7 +769,7 @@ class TableHeader extends Component { } thClassName += ` ${fixedStyle}`; if(!da.fixed ){ - return ( {da.children} {