diff --git a/build/Table.css b/build/Table.css index 0108a27..48c34f1 100644 --- a/build/Table.css +++ b/build/Table.css @@ -460,8 +460,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/Table.js b/build/Table.js index c5858db..e51179c 100644 --- a/build/Table.js +++ b/build/Table.js @@ -241,6 +241,9 @@ var Table = function (_Component) { } }); if (currentIndex > -1) { + if (_this.contentTable.dragType == 'top') { + targetIndex = targetIndex - 1; + } data = _this.swapArray(data, currentIndex, targetIndex); _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex); _this.setState({ @@ -478,9 +481,36 @@ var Table = function (_Component) { // if (prevProps.data.length === 0 || this.props.data.length === 0 ) { // this.resetScrollX(); // } - + // 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部 + var prevScrollY = prevProps.scroll.y; + var currentScrollY = this.props.scroll.y; + if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) { + this.bodyTable.scrollTop = 0; + } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && prevScrollY !== currentScrollY) { + var distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY); + if (distance < 0) { + this.bodyTable.scrollTop = 0; + } else { + this.bodyTable.scrollTop = distance; + } + } // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断 this.isShowScrollY(); + if (this.bodyTable) { + if (!this.props.scroll.x && window.getComputedStyle(this.bodyTable).overflowX !== 'hidden') { + this.bodyTable.style.overflowX = 'hidden'; + } + } + if (this.bodyTableOuter) { + // 隐藏几个不需要真正滚动的父元素的滚动条 + this.bodyTableOuter.style.overflowY = 'hidden'; + } + if (this.fixedColumnsBodyLeftOuter) { + this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden'; + } + if (this.fixedColumnsBodyRightOuter) { + this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden'; + } }; Table.prototype.componentWillUnmount = function componentWillUnmount() { @@ -1262,7 +1292,6 @@ var Table = function (_Component) { }; var headTable = void 0; - if (useFixedHeader) { headTable = _react2["default"].createElement( 'div', @@ -1284,16 +1313,21 @@ var Table = function (_Component) { { className: clsPrefix + '-body', style: bodyStyle, - ref: function ref(el) { - _this4.bodyTable = el; - }, onMouseOver: this.detectScrollTarget, onTouchStart: this.detectScrollTarget, - onScroll: this.handleBodyScroll, + ref: function ref(el) { + _this4.bodyTableOuter = el; + }, onMouseLeave: this.onBodyMouseLeave }, this.renderDragHideTable(), - renderTable(!useFixedHeader) + _react2["default"].createElement( + 'div', + { className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) { + _this4.bodyTable = el; + }, style: _extends({}, bodyStyle) }, + renderTable(!useFixedHeader) + ) ); if (fixed && columns.length) { @@ -1316,12 +1350,17 @@ var Table = function (_Component) { { style: _extends({}, innerBodyStyle), className: clsPrefix + '-body-inner', - ref: refName, + ref: function ref(el) { + return _this4[refName + 'Outer'] = el; + }, onMouseOver: this.detectScrollTarget, - onTouchStart: this.detectScrollTarget, - onScroll: this.handleBodyScroll + onTouchStart: this.detectScrollTarget }, - renderTable(!useFixedHeader) + _react2["default"].createElement( + 'div', + { className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll }, + renderTable(!useFixedHeader) + ) ) ); } @@ -1416,8 +1455,6 @@ var Table = function (_Component) { }; Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() { - var _this5 = this; - //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题 var _props9 = this.props, clsPrefix = _props9.clsPrefix, @@ -1451,13 +1488,13 @@ var Table = function (_Component) { rightHeight = void 0, currentHeight = void 0, maxHeight = void 0; - leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0; - rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0; - currentHeight = parseInt(row.getBoundingClientRect().height); + leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理 + rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; + currentHeight = Number(row.getBoundingClientRect().height).toFixed(2); maxHeight = Math.max(leftHeight, rightHeight, currentHeight); return maxHeight || 'auto'; } else { - return parseInt(row.getBoundingClientRect().height) || 'auto'; + return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto'; } } }); @@ -1465,17 +1502,16 @@ var Table = function (_Component) { // expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) { var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"); - var exHeight = height; - if (!exHeight) { - exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto'; - try { - //子表数据减少时，动态计算高度 - var td = row.querySelector('td'); - var tdPadding = _this5.getTdPadding(td); - var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); - exHeight = trueheight + tdPadding; - } catch (error) {} - } + var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto'; + // fix: ie 展开表格计算渲染bug + // try {//子表数据减少时，动态计算高度 + // let td = row.querySelector('td'); + // let tdPadding = this.getTdPadding(td); + // let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); + // exHeight = trueheight+tdPadding; + // } catch (error) { + + // } fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight); }); if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) { @@ -1499,10 +1535,10 @@ var Table = function (_Component) { }; Table.prototype.findExpandedRow = function findExpandedRow(record, index) { - var _this6 = this; + var _this5 = this; var rows = this.getExpandedRows().filter(function (i) { - return i === _this6.getRowKey(record, index); + return i === _this5.getRowKey(record, index); }); return rows[0]; }; @@ -1646,7 +1682,7 @@ var Table = function (_Component) { }; Table.prototype.render = function render() { - var _this7 = this; + var _this6 = this; var _state3 = this.state, currentHoverRecord = _state3.currentHoverRecord, @@ -1700,7 +1736,7 @@ var Table = function (_Component) { return _react2["default"].createElement( 'div', { className: className, style: props.style, ref: function ref(el) { - return _this7.contentTable = el; + return _this6.contentTable = el; }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') }, this.getTitle(), @@ -1732,7 +1768,7 @@ var Table = function (_Component) { 'div', { className: 'u-row-hover', onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) { - return _this7.hoverDom = el; + return _this6.hoverDom = el; } }, props.hoverContent(currentHoverRecord, currentHoverIndex) ) diff --git a/build/TableCell.js b/build/TableCell.js index ab69fb9..289a4c4 100644 --- a/build/TableCell.js +++ b/build/TableCell.js @@ -356,70 +356,74 @@ var TableCell = function (_Component) { var colSpan = void 0; var rowSpan = void 0, title = void 0; - - if (render && !showSum) { - text = render(text, record, index, _extends({ - dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other)); - if (this.isInvalidRenderCellText(text)) { - tdProps = text.props || {}; - rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan; - colSpan = tdProps.colSpan; - text = text.children; - } - } - var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index); - // 根据 fieldType 来渲染数据 - if (!render) { - switch (column.fieldType) { - case 'link': - { - text = this.renderLinkType(text, record, index, column.linkConfig); - break; - } - case 'bool': - { - text = this.renderBoolType(text, column.boolConfig); - break; - } - case 'currency': - { - var config = { - precision: 2, // 精度值,需要大于0 - thousand: true, // 是否显示千分符号 - makeUp: true, // 末位是否补零 - preSymbol: '', // 前置符号 - nextSymbol: '' // 后置符号 - }; - text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width); - break; - } - case 'number': - { - var _config = { - precision: 0, // 精度值,需要大于0 - thousand: true, // 是否显示千分符号 - makeUp: false, // 末位是否补零 - preSymbol: '', // 前置符号 - nextSymbol: '' // 后置符号 - }; - text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width); - break; - } - case 'date': - { - text = this.renderDate(text, column.dateConfig); - break; - } - case 'select': - { - text = this.renderSelect(text, column.selectConfig); - break; - } - default: - { - break; - } + // 如果是固定列在主表格上就渲染null + if (column.fixed && !fixed) { + text = null; + } else { + if (render && !showSum) { + text = render(text, record, index, _extends({ + dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other)); + if (this.isInvalidRenderCellText(text)) { + tdProps = text.props || {}; + rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan; + colSpan = tdProps.colSpan; + text = text.children; + } + } + + // 根据 fieldType 来渲染数据 + if (!render) { + switch (column.fieldType) { + case 'link': + { + text = this.renderLinkType(text, record, index, column.linkConfig); + break; + } + case 'bool': + { + text = this.renderBoolType(text, column.boolConfig); + break; + } + case 'currency': + { + var config = { + precision: 2, // 精度值,需要大于0 + thousand: true, // 是否显示千分符号 + makeUp: true, // 末位是否补零 + preSymbol: '', // 前置符号 + nextSymbol: '' // 后置符号 + }; + text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width); + break; + } + case 'number': + { + var _config = { + precision: 0, // 精度值,需要大于0 + thousand: true, // 是否显示千分符号 + makeUp: false, // 末位是否补零 + preSymbol: '', // 前置符号 + nextSymbol: '' // 后置符号 + }; + text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width); + break; + } + case 'date': + { + text = this.renderDate(text, column.dateConfig); + break; + } + case 'select': + { + text = this.renderSelect(text, column.selectConfig); + break; + } + default: + { + break; + } + } } } diff --git a/build/TableHeader.js b/build/TableHeader.js index 92f999e..b23c199 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -142,6 +142,7 @@ var TableHeader = function (_Component) { table.cols = tableDome.getElementsByTagName("col"); table.ths = tableDome.getElementsByTagName("th"); table.tr = tableDome.getElementsByTagName("tr"); + table.tableHeaderCols = contentTable.querySelector('.u-table-scroll .u-table-header') && contentTable.querySelector('.u-table-scroll .u-table-header').getElementsByTagName("col"); table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body'); table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col"); table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || []; @@ -230,13 +231,18 @@ var TableHeader = function (_Component) { TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() { - var _this5 = this; - if (!this.props.dragborder) return; - var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; - this.doEventList(this.table.tr, function (tr) { - _this5.eventListen(events, '', tr); //表示把事件添加到th元素上 - }); + this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body); + this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body); + + // let events = [ + // {key:'mouseup', fun:this.onTrMouseUp}, + // {key:'mousemove', fun:this.onTrMouseMove}, + // // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差 + // ]; + // this.doEventList(this.table.tr,(tr)=>{ + // this.eventListen(events,'',tr);//表示把事件添加到th元素上 + // }) // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 }; @@ -246,12 +252,12 @@ var TableHeader = function (_Component) { TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { - var _this6 = this; + var _this5 = this; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; // this.eventListen(events,'remove',this.table.tr[0]); this.doEventList(this.table.tr, function (tr) { - _this6.eventListen(events, 'remove', _this6.table.tr); + _this5.eventListen(events, 'remove', _this5.table.tr); }); }; @@ -431,7 +437,7 @@ var TableHeader = function (_Component) { TableHeader.prototype.render = function render() { - var _this7 = this; + var _this6 = this; var _props2 = this.props, clsPrefix = _props2.clsPrefix, @@ -449,7 +455,7 @@ var TableHeader = function (_Component) { return _react2["default"].createElement( "thead", _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) { - return _this7._thead = _thead; + return _this6._thead = _thead; } }), rows.map(function (row, index) { var _rowLeng = row.length - 1; @@ -495,7 +501,7 @@ var TableHeader = function (_Component) { // } if (filterable && index == rows.length - 1) { - da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex); + da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex); if (da.key === undefined) { keyTemp.key = keyTemp.key + '-filterable'; } @@ -516,7 +522,7 @@ var TableHeader = function (_Component) { "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-type": "draggable", onCopy: function onCopy(event) { - _this7.onCopy(da, columIndex, event); + _this6.onCopy(da, columIndex, event); } }), da.children, @@ -524,10 +530,10 @@ var TableHeader = function (_Component) { dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement( "div", { ref: function ref(el) { - return _this7.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" }, + "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" }, _react2["default"].createElement("div", { className: "online" }) ) : "" ); @@ -538,7 +544,22 @@ var TableHeader = function (_Component) { da.onClick ? thDefaultObj.onClick = function (e) { da.onClick(da, e); } : ""; - return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this7.onCopy })); + return _react2["default"].createElement( + "th", + _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this6.onCopy }), + da.children, + + // && columIndex != _rowLeng + dragborder ? _react2["default"].createElement( + "div", + { ref: function ref(el) { + return _this6.gap = el; + }, "data-line-key": da.key, + "data-line-index": columIndex, "data-th-width": da.width, + "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" }, + _react2["default"].createElement("div", { className: "online" }) + ) : "" + ); } }) ); @@ -554,7 +575,7 @@ TableHeader.defaultProps = { }; var _initialiseProps = function _initialiseProps() { - var _this8 = this; + var _this7 = this; this.getOnLineObject = function (_element) { var type = _element.getAttribute('data-type'), @@ -571,28 +592,29 @@ var _initialiseProps = function _initialiseProps() { }; this.onTrMouseDown = function (e) { - var eventNoStop = _this8.props.eventNoStop; + var eventNoStop = _this7.props.eventNoStop; !eventNoStop && _utils.Event.stopPropagation(e); var event = _utils.Event.getEvent(e), targetEvent = _utils.Event.getTarget(event); - var _props3 = _this8.props, + var _props3 = _this7.props, clsPrefix = _props3.clsPrefix, contentTable = _props3.contentTable, lastShowIndex = _props3.lastShowIndex, columnsChildrenList = _props3.columnsChildrenList; // let currentElement = this.getOnLineObject(targetEvent); - var currentElement = _this8.getTargetToType(targetEvent); + var currentElement = _this7.getTargetToType(targetEvent); if (!currentElement) return; var type = currentElement.getAttribute('data-type'); - if (!_this8.props.dragborder && !_this8.props.draggable) return; - if (type == 'online' && _this8.props.dragborder) { + var fixedType = currentElement.getAttribute('data-th-fixed'); + if (!_this7.props.dragborder && !_this7.props.draggable) return; + if (type == 'online' && _this7.props.dragborder) { // if(!this.props.dragborder)return; targetEvent.setAttribute('draggable', false); //添加交换列效果 var currentIndex = -1; var defaultWidth = currentElement.getAttribute("data-th-width"); - _this8.drag.option = "border"; //拖拽操作 + _this7.drag.option = "border"; //拖拽操作 if (columnsChildrenList) { var columnKey = currentElement.getAttribute("data-line-key"); if (columnKey) { @@ -605,27 +627,44 @@ var _initialiseProps = function _initialiseProps() { console.log('Key must be set for column!'); return; } - var currentObj = _this8.table.cols[currentIndex]; - _this8.drag.currIndex = currentIndex; - _this8.drag.oldLeft = event.clientX; - _this8.drag.oldWidth = parseInt(currentObj.style.width); - _this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; - _this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth); - if (!_this8.tableOldWidth) { - _this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth(); + var currentObj = _this7.table.cols[currentIndex]; + _this7.drag.currIndex = currentIndex; + _this7.drag.oldLeft = event.clientX; + _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(); } - if (!_this8.lastColumWidth) { - _this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width); + + // if(!this.lastColumWidth){ + var contentT = _this7.table.tableHeaderCols || _this7.table.cols; + _this7.lastColumWidth = parseInt(contentT[lastShowIndex].style.width); + // console.log('begin--lastColumnWidth',this.lastColumWidth); + // } + _this7.drag.contentTableCWidth = _this7.table.contentTableHeader.clientWidth; + _this7.drag.contentTableSWidth = _this7.table.contentTableHeader.scrollWidth; + if (fixedType) { + var contentTablePar = _this7.table.contentTableHeader.parentNode; + + if (contentTablePar) { + var originL = parseInt(contentTablePar.style.marginLeft); + var originR = parseInt(contentTablePar.style.marginRight); + // 内容区表格marginLef + _this7.drag.contentTableML = originL; + _this7.drag.contentTableMR = originR; + } } - } else if (type != 'online' && _this8.props.draggable) { + _this7.drag.fixedType = fixedType; + } else if (type != 'online' && _this7.props.draggable) { // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; - if (!_this8.props.draggable) return; - var th = _this8.getTargetToType(targetEvent); + if (!_this7.props.draggable) return; + var th = _this7.getTargetToType(targetEvent); th.setAttribute('draggable', true); //添加交换列效果 - _this8.drag.option = 'dragAble'; - _this8.currentDome = th; + _this7.drag.option = 'dragAble'; + _this7.currentDome = th; var _currentIndex = parseInt(th.getAttribute("data-line-index")); - _this8.drag.currIndex = _currentIndex; + _this7.drag.currIndex = _currentIndex; } else { // console.log("onTrMouseDown dragborder or draggable is all false !"); return; @@ -635,8 +674,8 @@ var _initialiseProps = function _initialiseProps() { this.getTableWidth = function () { var tableWidth = 0, offWidth = 0; //this.table.cols.length; - for (var index = 0; index < _this8.table.cols.length; index++) { - var da = _this8.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; @@ -645,7 +684,7 @@ var _initialiseProps = function _initialiseProps() { this.getTargetToType = function (targetEvent) { var tag = targetEvent; if (targetEvent && !targetEvent.getAttribute("data-type")) { - tag = _this8.getTargetToType(targetEvent.parentElement); + tag = _this7.getTargetToType(targetEvent.parentElement); } return tag; }; @@ -653,15 +692,15 @@ var _initialiseProps = function _initialiseProps() { this.getTargetToTh = function (targetEvent) { var th = targetEvent; if (targetEvent.nodeName.toUpperCase() != "TH") { - th = _this8.getThDome(targetEvent); + th = _this7.getThDome(targetEvent); } // console.log(" getTargetToTh: ", th); return th; }; this.onTrMouseMove = function (e) { - if (!_this8.props.dragborder && !_this8.props.draggable) return; - var _props4 = _this8.props, + if (!_this7.props.dragborder && !_this7.props.draggable) return; + var _props4 = _this7.props, clsPrefix = _props4.clsPrefix, dragborder = _props4.dragborder, contentDomWidth = _props4.contentDomWidth, @@ -677,20 +716,20 @@ var _initialiseProps = function _initialiseProps() { !eventNoStop && _utils.Event.stopPropagation(e); var event = _utils.Event.getEvent(e); - if (_this8.props.dragborder && _this8.drag.option == "border") { + if (_this7.props.dragborder && _this7.drag.option == "border") { //移动改变宽度 - var currentCols = _this8.table.cols[_this8.drag.currIndex]; - var diff = event.clientX - _this8.drag.oldLeft; - var newWidth = _this8.drag.oldWidth + diff; - _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth; - if (newWidth > _this8.minWidth) { + var currentCols = _this7.table.cols[_this7.drag.currIndex]; + var diff = event.clientX - _this7.drag.oldLeft; + var newWidth = _this7.drag.oldWidth + diff; + _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth; + if (newWidth > _this7.minWidth) { currentCols.style.width = newWidth + 'px'; // displayinrow 判断、 固定行高判断 if (!bodyDisplayInRow) { - _this8.table.bodyRows.forEach(function (row, index) { - var leftRow = _this8.table.fixedLeftBodyRows[index]; - var rightRow = _this8.table.fixedRightBodyRows[index]; + _this7.table.bodyRows.forEach(function (row, index) { + var leftRow = _this7.table.fixedLeftBodyRows[index]; + var rightRow = _this7.table.fixedRightBodyRows[index]; if (leftRow || rightRow) { var height = row.getBoundingClientRect().height; leftRow && (leftRow.style.height = height + "px"); @@ -700,74 +739,113 @@ var _initialiseProps = function _initialiseProps() { } //hao 支持固定表头拖拽 修改表体的width - if (_this8.fixedTable.cols) { - _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px"; + if (_this7.fixedTable.cols) { + _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px"; } - var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width); - if (newDiff > 0) { - //缩小 - var lastWidth = _this8.lastColumWidth + newDiff; - _this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 - _this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 + var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth; + // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff); + if (diff < 0 && contentTableSWidth + diff < 0) { + var headerCols = _this7.table.tableHeaderCols || _this7.table.cols; + var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff); + // console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex); + headerCols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 + _this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 } - var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth; - //表头滚动条处理 - if (headerScroll) { - if (showScroll < 0) { - //小于 0 出现滚动条 - //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; - _this8.table.contentTableHeader.style.overflowX = 'scroll'; - _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth); - _this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth); + // 内容区非固定列场景拖拽 + if (!_this7.drag.fixedType) { + + // let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width)); + // if(newDiff > 0){//缩小 + // let lastWidth = this.lastColumWidth + newDiff; + // this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头 + // this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体 + + // } + + var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth; + + //表头滚动条处理 + if (headerScroll) { + if (showScroll < 0) { + //小于 0 出现滚动条 + //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; + _this7.table.contentTableHeader.style.overflowX = 'scroll'; + _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth); + _this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth); + } else { + //大于 0 不显示滚动条 + _this7.table.contentTableHeader.style.overflowX = 'hidden'; + _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0); + _this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0); + } } else { - //大于 0 不显示滚动条 - _this8.table.contentTableHeader.style.overflowX = 'hidden'; - _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0); - _this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0); + if (showScroll < 0) { + _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 { + _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 { - if (showScroll < 0) { - _this8.table.tableBody.style.overflowX = 'auto'; - _this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth); - _this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth); - _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' }); - _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' }); + } else if (_this7.drag.fixedType) { + if (_this7.table.ths[_this7.drag.currIndex]) { + _this7.table.ths[_this7.drag.currIndex].width = newWidth; + } + // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff); + // debugger + + var contentTablePar = _this7.table.contentTableHeader.parentNode; + // left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列 + // diff<0 往里拖， + // const contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth; + // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff); + // if(diff<0 && contentTableSWidth+diff < 0) { + // const headerCols = this.table.tableHeaderCols || this.table.cols; + // const lastWidth =this.lastColumWidth - (contentTableSWidth+diff); + // console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex); + // headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头 + // this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体 + // } + if (_this7.drag.fixedType == 'left') { + contentTablePar.style.marginLeft = _this7.drag.contentTableML + diff + 'px'; } else { - _this8.table.tableBody.style.overflowX = 'hidden'; - _this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0); - _this8.optTableMargin(_this8.table.fixedRightBodyTable, 0); - _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' }); - _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' }); + contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px'; } } } else { - _this8.drag.newWidth = _this8.minWidth; + _this7.drag.newWidth = _this7.minWidth; } } // 增加拖拽列宽动作的回调函数 - _this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth); + _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth); }; this.onTrMouseUp = function (e) { var event = _utils.Event.getEvent(e); - var width = _this8.drag.newWidth; - var opt = _this8.drag.option; - _this8.mouseClear(); + var width = _this7.drag.newWidth; + var opt = _this7.drag.option; + _this7.mouseClear(); if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题 - _this8.props.onDropBorder && _this8.props.onDropBorder(event, width); + _this7.props.onDropBorder && _this7.props.onDropBorder(event, width); }; this.clearThsDr = function () { - var ths = _this8.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 (!_this8.drag || !_this8.drag.option) return; - _this8.mouseClear(); + if (!_this7.drag || !_this7.drag.option) return; + _this7.mouseClear(); }; this.optTableMargin = function (table, scrollbarWidth) { @@ -790,31 +868,31 @@ var _initialiseProps = function _initialiseProps() { }; this.onDragStart = function (e) { - if (!_this8.props.draggable) return; - if (_this8.drag && _this8.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 = _this8.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 = _this8.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(_this8._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); - _this8.currentObj = _this8.props.rows[0][currentIndex]; + _this7.currentObj = _this7.props.rows[0][currentIndex]; }; this.onDragOver = function (e) { @@ -823,34 +901,34 @@ var _initialiseProps = function _initialiseProps() { }; this.onDrop = function (e) { - if (!_this8.props.draggable) return; - var props = _this8.getCurrentEventData(_this8._dragCurrent); + if (!_this7.props.draggable) return; + var props = _this7.getCurrentEventData(_this7._dragCurrent); e.column = { props: props }; - if (_this8.drag && _this8.drag.option != 'dragAble') { - _this8.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); event.preventDefault(); event.stopPropagation(); - _this8.currentDome.setAttribute('draggable', false); //添加交换列效果 + _this7.currentDome.setAttribute('draggable', false); //添加交换列效果 // let data = this.getCurrentEventData(this._dragCurrent); // if(!data){ // this.props.onDrop(e); // return; // } - if (!_this8.props.onDrop) return; + if (!_this7.props.onDrop) return; // this.props.onDrop(event,target); - _this8.props.onDrop(event, { dragSource: _this8.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); - _this8._dragCurrent = target; + _this7._dragCurrent = target; var currentIndex = target.getAttribute("data-line-index"); - if (!currentIndex || parseInt(currentIndex) === _this8.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)"); @@ -861,24 +939,24 @@ var _initialiseProps = function _initialiseProps() { this.onDragEnd = function (e) { var event = _utils.Event.getEvent(e), target = _utils.Event.getTarget(event); - _this8._dragCurrent.setAttribute("style", ""); + _this7._dragCurrent.setAttribute("style", ""); event.preventDefault(); event.stopPropagation(); // this._dragCurrent.style = ""; - document.getElementById(_this8._table_none_cont_id).innerHTML = ""; + document.getElementById(_this7._table_none_cont_id).innerHTML = ""; - var data = _this8.getCurrentEventData(_this8._dragCurrent); + var data = _this7.getCurrentEventData(_this7._dragCurrent); if (!data) return; - if (!_this8.currentObj || _this8.currentObj.key == data.key) return; - if (!_this8.props.onDragEnd) return; - _this8.props.onDragEnd(event, { dragSource: _this8.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) === _this8.drag.currIndex) return; + if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return; if (target.nodeName.toUpperCase() === "TH") { target.setAttribute("style", ""); // this._dragCurrent.style = ""; @@ -886,7 +964,7 @@ var _initialiseProps = function _initialiseProps() { }; this.handlerFilterChange = function (key, value, condition) { - var onFilterChange = _this8.props.onFilterChange; + var onFilterChange = _this7.props.onFilterChange; if (onFilterChange) { onFilterChange(key, value, condition); @@ -894,7 +972,7 @@ var _initialiseProps = function _initialiseProps() { }; this.handlerFilterClear = function (field) { - var onFilterClear = _this8.props.onFilterClear; + var onFilterClear = _this7.props.onFilterClear; if (onFilterClear) { onFilterClear(field); @@ -902,7 +980,7 @@ var _initialiseProps = function _initialiseProps() { }; this.filterRenderType = function (type, dataIndex, index) { - var _props5 = _this8.props, + var _props5 = _this7.props, clsPrefix = _props5.clsPrefix, rows = _props5.rows, filterDelay = _props5.filterDelay, @@ -917,8 +995,8 @@ var _initialiseProps = function _initialiseProps() { , clsPrefix: clsPrefix //css前缀 , className: clsPrefix + " filter-text", dataIndex: dataIndex //字段 - , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调 - , onFilterClear: _this8.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去显示 @@ -931,8 +1009,8 @@ var _initialiseProps = function _initialiseProps() { clsPrefix: clsPrefix, className: clsPrefix + " filter-text", dataIndex: dataIndex //字段 - , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动 - , onFilterClear: _this8.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去显示 @@ -966,8 +1044,8 @@ var _initialiseProps = function _initialiseProps() { data: selectDataSource, notFoundContent: "Loading" //没有数据显示的默认字 , dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.handlerFilterClear //清除回调 + , onFilterChange: _this7.handlerFilterChange //输入框回调 + , onFilterClear: _this7.handlerFilterClear //清除回调 , filterDropdown: rows[1][index]["filterdropdown"], onFocus: rows[1][index]["filterdropdownfocus"], filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number @@ -982,8 +1060,8 @@ var _initialiseProps = function _initialiseProps() { onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-MM-DD", dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.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去显示 @@ -997,8 +1075,8 @@ var _initialiseProps = function _initialiseProps() { onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY", dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.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去显示 @@ -1012,8 +1090,8 @@ var _initialiseProps = function _initialiseProps() { onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-MM", dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.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去显示 @@ -1027,8 +1105,8 @@ var _initialiseProps = function _initialiseProps() { onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-Wo", dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.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去显示 @@ -1042,8 +1120,8 @@ var _initialiseProps = function _initialiseProps() { onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-MM-DD", dataIndex: dataIndex //字段 - , onFilterChange: _this8.handlerFilterChange //输入框回调 - , onFilterClear: _this8.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去显示 @@ -1055,8 +1133,8 @@ var _initialiseProps = function _initialiseProps() { }; this.onCopy = function (data, index, event) { - if (_this8.props.onCopy) { - _this8.props.onCopy(_extends(data, { col: index }), event); + if (_this7.props.onCopy) { + _this7.props.onCopy(_extends(data, { col: index }), event); } }; }; diff --git a/build/TableRow.js b/build/TableRow.js index 4342401..ac6e35a 100644 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -122,6 +122,9 @@ var TableRow = function (_Component) { target = target.parentNode; } _this.currentIndex = target.getAttribute("data-row-key"); + + // 拖拽其实index + _this.props.contentTable.startI = target.getAttribute("data-row-index"); _this._dragCurrent = target; event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("Text", _this.currentIndex); @@ -134,7 +137,9 @@ var TableRow = function (_Component) { }; _this.onDrop = function (e) { - var onDragRow = _this.props.onDragRow; + var _this$props = _this.props, + onDragRow = _this$props.onDragRow, + contentTable = _this$props.contentTable; var event = _utils.Event.getEvent(e), _target = _utils.Event.getTarget(event), @@ -224,9 +229,9 @@ var TableRow = function (_Component) { }; _this.synchronizeTableTrShadow = function () { - var _this$props = _this.props, - contentTable = _this$props.contentTable, - index = _this$props.index; + var _this$props2 = _this.props, + contentTable = _this$props2.contentTable, + index = _this$props2.index; var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index], @@ -277,21 +282,29 @@ var TableRow = function (_Component) { currentObj = element; } } - if (type) { + if (type == 'down') { currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD"); + } else if (type) { + currentObj && currentObj.setAttribute("style", "border-top:2px solid #02B1FD"); } else { currentObj && currentObj.setAttribute("style", ""); } }; _this.onDragEnter = function (e) { + var contentTable = _this.props.contentTable; + var event = _utils.Event.getEvent(e), _target = _utils.Event.getTarget(event), target = _target.parentNode; var currentIndex = target.getAttribute("data-row-key"); + var dragEnterIndex = target.getAttribute("data-row-index"); if (!currentIndex || currentIndex === _this.currentIndex) return; + var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top'; + + contentTable.dragType = dragType; if (target.nodeName.toUpperCase() === "TR") { - _this.synchronizeTableTr(currentIndex, true); + _this.synchronizeTableTr(currentIndex, dragType); } }; @@ -678,7 +691,8 @@ var TableRow = function (_Component) { onMouseLeave: this.onMouseLeave, className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent, style: style, - 'data-row-key': record && record.key ? record.key : hoverKey + 'data-row-key': record && record.key ? record.key : hoverKey, + 'data-row-index': this.props.index // key={hoverKey} , ref: this.bindElement }, diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js index ea9fc27..03bc53e 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,115 +35,115 @@ 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.onDragEnd = function (event, data) { - var dragSource = data.dragSource, - dragTarg = data.dragTarg; - var columns = _this.state.columns; + _this.onDragEnd = 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); + }); + _this.setState({ + columns: _newColumns //cloneDeep(columns) + }); + if (_this.props.onDragEnd) { + _this.props.onDragEnd(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; }); - _this.setState({ - columns: _newColumns //cloneDeep(columns) - }); - if (_this.props.onDragEnd) { - _this.props.onDragEnd(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, + others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']); - _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', + onDragEnd: this.onDragEnd, + 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, - others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']); - - return _react2["default"].createElement(Table, _extends({}, others, { - columns: this.state.columns, - data: data, - className: className + ' u-table-drag-border', - onDragEnd: this.onDragEnd, - 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/sort.js b/build/lib/sort.js index 2af4626..beeddf1 100644 --- a/build/lib/sort.js +++ b/build/lib/sort.js @@ -228,8 +228,13 @@ function sort(Table, Icon) { this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) { var currentCol = orderCols[currentIndex]; + var getMultiSorterValueFunc = currentCol.getMultiSorterValue; var preKey = pre[currentCol.key]; var afterKey = after[currentCol.key]; + if (getMultiSorterValueFunc) { + preKey = getMultiSorterValueFunc(pre, currentCol); + afterKey = getMultiSorterValueFunc(after, currentCol); + } var colSortFun = currentCol.sorter; if (typeof colSortFun !== 'function') { colSortFun = function colSortFun() { 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/package.json b/package.json index 8c040ec..297de21 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "2.3.14", + "version": "2.3.15-beta.1", "description": "Table ui component for react", "keywords": [ "react",