From d3b4cb34de75ca747dc49aa563594042c737cc3c Mon Sep 17 00:00:00 2001 From: jonyshi Date: Fri, 30 Aug 2019 13:43:25 +0800 Subject: [PATCH] =?UTF-8?q?=20drop=20=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0n?= =?UTF-8?q?ode.props.cloum?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/TableHeader.js | 869 ++++++++++++++++++++++--------------------- package.json | 2 +- src/TableHeader.js | 4 +- 3 files changed, 440 insertions(+), 435 deletions(-) diff --git a/build/TableHeader.js b/build/TableHeader.js index 94d225f..290037b 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -57,438 +57,7 @@ var TableHeader = function (_Component) { var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - _this.getOnLineObject = function (_element) { - var type = _element.getAttribute('data-type'), - elementObj = null; - if (!type) { - var element = _element.parentElement || parentNode; //兼容写法。 - if (element.getAttribute('data-type')) { - elementObj = element; - } - } else { - elementObj = _element; - } - return elementObj; - }; - - _this.onTrMouseDown = function (e) { - _utils.Event.stopPropagation(e); - var event = _utils.Event.getEvent(e), - targetEvent = _utils.Event.getTarget(event); - var _this$props = _this.props, - clsPrefix = _this$props.clsPrefix, - contentTable = _this$props.contentTable, - lastShowIndex = _this$props.lastShowIndex; - // let currentElement = this.getOnLineObject(targetEvent); - - var currentElement = _this.getTargetToType(targetEvent); - if (!currentElement) return; - var type = currentElement.getAttribute('data-type'); - if (!_this.props.dragborder && !_this.props.draggable) return; - if (type == 'online' && _this.props.dragborder) { - if (!_this.props.dragborder) return; - targetEvent.setAttribute('draggable', false); //添加交换列效果 - var currentIndex = parseInt(currentElement.getAttribute("data-line-index")); - var defaultWidth = currentElement.getAttribute("data-th-width"); - var currentObj = _this.table.cols[currentIndex]; - _this.drag.option = "border"; //拖拽操作 - _this.drag.currIndex = currentIndex; - _this.drag.oldLeft = event.x; - _this.drag.oldWidth = parseInt(currentObj.style.width); - _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; - _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth); - // console.log(" ----- ",this.drag); - if (!_this.tableOldWidth) { - _this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth(); - // console.log(" this.tableOldWidth--- ",this.tableOldWidth); - } - if (!_this.lastColumWidth) { - _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; - var th = _this.getTargetToType(targetEvent); - th.setAttribute('draggable', true); //添加交换列效果 - _this.drag.option = 'dragAble'; - _this.currentDome = th; - var _currentIndex = parseInt(th.getAttribute("data-line-index")); - _this.drag.currIndex = _currentIndex; - } else { - // console.log("onTrMouseDown dragborder or draggable is all false !"); - return; - } - }; - - _this.getTableWidth = function () { - var tableWidth = 0, - offWidth = 0; //this.table.cols.length; - for (var index = 0; index < _this.table.cols.length; index++) { - var da = _this.table.cols[index]; - tableWidth += parseInt(da.style.width); - } - return tableWidth - offWidth; - }; - - _this.getTargetToType = function (targetEvent) { - var tag = targetEvent; - if (targetEvent && !targetEvent.getAttribute("data-type")) { - tag = _this.getTargetToType(targetEvent.parentElement); - } - return tag; - }; - - _this.getTargetToTh = function (targetEvent) { - var th = targetEvent; - if (targetEvent.nodeName.toUpperCase() != "TH") { - th = _this.getThDome(targetEvent); - } - console.log(" getTargetToTh: ", th); - return th; - }; - - _this.onTrMouseMove = function (e) { - if (!_this.props.dragborder && !_this.props.draggable) return; - var _this$props2 = _this.props, - clsPrefix = _this$props2.clsPrefix, - dragborder = _this$props2.dragborder, - contentDomWidth = _this$props2.contentDomWidth, - scrollbarWidth = _this$props2.scrollbarWidth, - contentTable = _this$props2.contentTable, - headerScroll = _this$props2.headerScroll, - lastShowIndex = _this$props2.lastShowIndex, - onDraggingBorder = _this$props2.onDraggingBorder, - leftFixedWidth = _this$props2.leftFixedWidth, - rightFixedWidth = _this$props2.rightFixedWidth; - - _utils.Event.stopPropagation(e); - var event = _utils.Event.getEvent(e); - if (_this.props.dragborder && _this.drag.option == "border") { - //移动改变宽度 - var currentCols = _this.table.cols[_this.drag.currIndex]; - var diff = event.x - _this.drag.oldLeft; - var newWidth = _this.drag.oldWidth + diff; - _this.drag.newWidth = newWidth > 0 ? newWidth : _this.minWidth; - // if(newWidth > this.drag.minWidth){ - if (newWidth > _this.minWidth) { - currentCols.style.width = newWidth + 'px'; - //hao 支持固定表头拖拽 修改表体的width - if (_this.fixedTable.cols) { - _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px"; - } - - // const newTableWidth = this.drag.tableWidth + diff;// +'px'; - // this.table.table.style.width = newTableWidth+'px';;//改变table的width - // if(this.table.innerTableBody){//TODO 后续需要处理此处 - // this.table.innerTableBody.style.width = newTableWidth+'px'; - - // } - - 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"; //同步表体 - } - var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth; - //表头滚动条处理 - if (headerScroll) { - if (showScroll < 0) { - //小于 0 出现滚动条 - //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; - _this.table.contentTableHeader.style.overflowX = 'scroll'; - _this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth); - _this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth); - // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px"); - // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); - //todo inner scroll-x去掉；outer marginbottom 设置成-15px】 - } else { - //大于 0 不显示滚动条 - _this.table.contentTableHeader.style.overflowX = 'hidden'; - _this.optTableMargin(_this.table.fixedLeftHeaderTable, 0); - _this.optTableMargin(_this.table.fixedRighHeadertTable, 0); - } - } else { - if (showScroll < 0) { - _this.table.tableBody.style.overflowX = 'auto'; - _this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth); - _this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth); - _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' }); - _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' }); - } else { - _this.table.tableBody.style.overflowX = 'hidden'; - _this.optTableMargin(_this.table.fixedLeftBodyTable, 0); - _this.optTableMargin(_this.table.fixedRightBodyTable, 0); - _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' }); - _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' }); - } - } - } else { - _this.drag.newWidth = _this.minWidth; - } - } else if (_this.props.draggable && _this.drag.option == "draggable") { - // console.log(" --onTrMouseMove--draggable- ",this.drag.option); - } else {} - // console.log("onTrMouseMove dragborder or draggable is all false !"); - - // 增加拖拽列宽动作的回调函数 - _this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this.drag.newWidth); - }; - - _this.onTrMouseUp = function (e) { - var event = _utils.Event.getEvent(e); - var width = _this.drag.newWidth; - _this.mouseClear(); - _this.props.onDropBorder && _this.props.onDropBorder(event, width); - }; - - _this.clearThsDr = function () { - var ths = _this.table.ths; - for (var index = 0; index < ths.length; index++) { - ths[index].setAttribute('draggable', false); //去掉交换列效果 - } - }; - - _this.bodyonLineMouseUp = function (events, type) { - if (!_this.drag || !_this.drag.option) return; - _this.mouseClear(); - }; - - _this.optTableMargin = function (table, scrollbarWidth) { - if (table) { - table.style.marginBottom = scrollbarWidth + "px"; - } - }; - - _this.optTableScroll = function (table) { - var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - if (table) { - var innerTable = table.querySelector('.u-table-body-inner'); - if (innerTable) { - //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行 - overflow.x && (innerTable.style.overflowX = overflow.x); - overflow.y && (innerTable.style.overflowY = overflow.y); - } - } - }; - - _this.onDragStart = function (e) { - if (!_this.props.draggable) return; - if (_this.drag && _this.drag.option != 'dragAble') { - return; - } - var event = _utils.Event.getEvent(e), - - // target = Event.getTarget(event); - target = _this.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 = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步 - crt.style.height = "40px"; - // crt.style['line-height'] = "40px"; - // document.body.appendChild(crt); - document.getElementById(_this._table_none_cont_id).appendChild(crt); - event.dataTransfer.setDragImage(crt, 0, 0); - } - - event.dataTransfer.effectAllowed = "move"; - event.dataTransfer.setData("Text", currentKey); - _this.currentObj = _this.props.rows[0][currentIndex]; - }; - - _this.onDragOver = function (e) { - var event = _utils.Event.getEvent(e); - event.preventDefault(); - }; - - _this.onDrop = function (e) { - if (!_this.props.draggable) return; - var colum = _this.getCurrentEventData(_this._dragCurrent); - e.node = { props: { colum: colum } }; - if (_this.drag && _this.drag.option != 'dragAble') { - _this.props.onDrop(e); - return; - } - var event = _utils.Event.getEvent(e), - target = _utils.Event.getTarget(event); - _this.currentDome.setAttribute('draggable', false); //添加交换列效果 - // let data = this.getCurrentEventData(this._dragCurrent); - // if(!data){ - // this.props.onDrop(e); - // return; - // } - if (!_this.props.onDrop) return; - // this.props.onDrop(event,target); - _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: colum }); - }; - - _this.onDragEnter = function (e) { - var event = _utils.Event.getEvent(e), - target = _utils.Event.getTarget(event); - _this._dragCurrent = target; - var currentIndex = target.getAttribute("data-line-index"); - if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return; - if (target.nodeName.toUpperCase() === "TH") { - // target.style.border = "2px dashed rgba(5,0,0,0.25)"; - target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)"); - // target.style.backgroundColor = 'rgb(235, 236, 240)'; - } - }; - - _this.onDragEnd = function (e) { - var event = _utils.Event.getEvent(e), - target = _utils.Event.getTarget(event); - _this._dragCurrent.setAttribute("style", ""); - // this._dragCurrent.style = ""; - document.getElementById(_this._table_none_cont_id).innerHTML = ""; - - var data = _this.getCurrentEventData(_this._dragCurrent); - if (!data) return; - if (!_this.currentObj || _this.currentObj.key == data.key) return; - if (!_this.props.onDragEnd) return; - _this.props.onDragEnd(event, { dragSource: _this.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) === _this.drag.currIndex) return; - if (target.nodeName.toUpperCase() === "TH") { - target.setAttribute("style", ""); - // this._dragCurrent.style = ""; - } - }; - - _this.handlerFilterChange = function (key, value, condition) { - var onFilterChange = _this.props.onFilterChange; - - if (onFilterChange) { - onFilterChange(key, value, condition); - } - }; - - _this.handlerFilterClear = function (field) { - var onFilterClear = _this.props.onFilterClear; - - if (onFilterClear) { - onFilterClear(field); - } - }; - - _this.filterRenderType = function (type, dataIndex, index) { - var _this$props3 = _this.props, - clsPrefix = _this$props3.clsPrefix, - rows = _this$props3.rows, - filterDelay = _this$props3.filterDelay, - locale = _this$props3.locale; - - switch (type) { - //文本输入 - case "text": - return _react2["default"].createElement(_FilterType2["default"], { - locale: locale //多语 - , rendertype: type //渲染类型 - , clsPrefix: clsPrefix //css前缀 - , className: clsPrefix + " filter-text", - dataIndex: dataIndex //字段 - , onFilterChange: _this.handlerFilterChange //输入框回调 - , onFilterClear: _this.handlerFilterClear //清除回调 - , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件 - , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number - , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 - }); - //数值输入 - case "number": - return _react2["default"].createElement(_FilterType2["default"], { - locale: locale, - rendertype: type, - clsPrefix: clsPrefix, - className: clsPrefix + " filter-text", - dataIndex: dataIndex //字段 - , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动 - , onFilterClear: _this.handlerFilterClear //清除回调 - , filterDropdown: rows[1][index]["filterdropdown"], - filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number - , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 - , filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性 - }); - //下拉框选择 - case "dropdown": - var selectDataSource = []; - //处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入 - if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") { - var hash = {}; - //处理下拉重复对象组装dropdown - selectDataSource = Array.from(rows[1][0].datasource, function (x) { - return { - key: x[dataIndex], - value: x[dataIndex] - }; - }); - selectDataSource = selectDataSource.reduceRight(function (item, next) { - hash[next.key] ? "" : hash[next.key] = true && item.push(next); - return item; - }, []); - } else { - //从外部数据源加载系统数据 - selectDataSource = rows[1][index]["filterdropdowndata"]; - } - return _react2["default"].createElement(_FilterType2["default"], { - locale: locale, - rendertype: type, - className: clsPrefix + " filter-dropdown", - data: selectDataSource, - notFoundContent: "Loading" //没有数据显示的默认字 - , dataIndex: dataIndex //字段 - , onFilterChange: _this.handlerFilterChange //输入框回调 - , onFilterClear: _this.handlerFilterClear //清除回调 - , filterDropdown: rows[1][index]["filterdropdown"], - onFocus: rows[1][index]["filterdropdownfocus"], - filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number - , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 - }); - //日期 - case "date": - return _react2["default"].createElement(_FilterType2["default"], { - locale: locale, - rendertype: type, - className: "filter-date", - onClick: function onClick() {}, - format: rows[1][index]["format"] || "YYYY-MM-DD", - dataIndex: dataIndex //字段 - , onFilterChange: _this.handlerFilterChange //输入框回调 - , onFilterClear: _this.handlerFilterClear //清除回调 - , filterDropdown: rows[1][index]["filterdropdown"], - filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number - , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 - }); - //日期范围 - case "daterange": - return _react2["default"].createElement(_FilterType2["default"], { - locale: locale, - rendertype: type, - className: "filter-date", - onClick: function onClick() {}, - format: rows[1][index]["format"] || "YYYY-MM-DD", - dataIndex: dataIndex //字段 - , onFilterChange: _this.handlerFilterChange //输入框回调 - , onFilterClear: _this.handlerFilterClear //清除回调 - , filterDropdown: rows[1][index]["filterdropdown"], - filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number - , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 - }); - default: - //不匹配类型默认文本输入 - return _react2["default"].createElement("div", null); - } - }; + _initialiseProps.call(_this); _this.currentObj = null; _this.theadKey = new Date().getTime(); @@ -914,6 +483,442 @@ TableHeader.defaultProps = { contentWidthDiff: 0 }; +var _initialiseProps = function _initialiseProps() { + var _this3 = this; + + this.getOnLineObject = function (_element) { + var type = _element.getAttribute('data-type'), + elementObj = null; + if (!type) { + var element = _element.parentElement || parentNode; //兼容写法。 + if (element.getAttribute('data-type')) { + elementObj = element; + } + } else { + elementObj = _element; + } + return elementObj; + }; + + this.onTrMouseDown = function (e) { + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e), + targetEvent = _utils.Event.getTarget(event); + var _props3 = _this3.props, + clsPrefix = _props3.clsPrefix, + contentTable = _props3.contentTable, + lastShowIndex = _props3.lastShowIndex; + // let currentElement = this.getOnLineObject(targetEvent); + + var currentElement = _this3.getTargetToType(targetEvent); + if (!currentElement) return; + var type = currentElement.getAttribute('data-type'); + if (!_this3.props.dragborder && !_this3.props.draggable) return; + if (type == 'online' && _this3.props.dragborder) { + if (!_this3.props.dragborder) return; + targetEvent.setAttribute('draggable', false); //添加交换列效果 + var currentIndex = parseInt(currentElement.getAttribute("data-line-index")); + var defaultWidth = currentElement.getAttribute("data-th-width"); + var currentObj = _this3.table.cols[currentIndex]; + _this3.drag.option = "border"; //拖拽操作 + _this3.drag.currIndex = currentIndex; + _this3.drag.oldLeft = event.x; + _this3.drag.oldWidth = parseInt(currentObj.style.width); + _this3.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; + _this3.drag.tableWidth = parseInt(_this3.table.table.style.width ? _this3.table.table.style.width : _this3.table.table.scrollWidth); + // console.log(" ----- ",this.drag); + if (!_this3.tableOldWidth) { + _this3.tableOldWidth = _this3.drag.tableWidth; //this.getTableWidth(); + // console.log(" this.tableOldWidth--- ",this.tableOldWidth); + } + if (!_this3.lastColumWidth) { + _this3.lastColumWidth = parseInt(_this3.table.cols[lastShowIndex].style.width); + } + } else if (type != 'online' && _this3.props.draggable) { + // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; + if (!_this3.props.draggable) return; + var th = _this3.getTargetToType(targetEvent); + th.setAttribute('draggable', true); //添加交换列效果 + _this3.drag.option = 'dragAble'; + _this3.currentDome = th; + var _currentIndex = parseInt(th.getAttribute("data-line-index")); + _this3.drag.currIndex = _currentIndex; + } else { + // console.log("onTrMouseDown dragborder or draggable is all false !"); + return; + } + }; + + this.getTableWidth = function () { + var tableWidth = 0, + offWidth = 0; //this.table.cols.length; + for (var index = 0; index < _this3.table.cols.length; index++) { + var da = _this3.table.cols[index]; + tableWidth += parseInt(da.style.width); + } + return tableWidth - offWidth; + }; + + this.getTargetToType = function (targetEvent) { + var tag = targetEvent; + if (targetEvent && !targetEvent.getAttribute("data-type")) { + tag = _this3.getTargetToType(targetEvent.parentElement); + } + return tag; + }; + + this.getTargetToTh = function (targetEvent) { + var th = targetEvent; + if (targetEvent.nodeName.toUpperCase() != "TH") { + th = _this3.getThDome(targetEvent); + } + console.log(" getTargetToTh: ", th); + return th; + }; + + this.onTrMouseMove = function (e) { + if (!_this3.props.dragborder && !_this3.props.draggable) return; + var _props4 = _this3.props, + clsPrefix = _props4.clsPrefix, + dragborder = _props4.dragborder, + contentDomWidth = _props4.contentDomWidth, + scrollbarWidth = _props4.scrollbarWidth, + contentTable = _props4.contentTable, + headerScroll = _props4.headerScroll, + lastShowIndex = _props4.lastShowIndex, + onDraggingBorder = _props4.onDraggingBorder, + leftFixedWidth = _props4.leftFixedWidth, + rightFixedWidth = _props4.rightFixedWidth; + + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + if (_this3.props.dragborder && _this3.drag.option == "border") { + //移动改变宽度 + var currentCols = _this3.table.cols[_this3.drag.currIndex]; + var diff = event.x - _this3.drag.oldLeft; + var newWidth = _this3.drag.oldWidth + diff; + _this3.drag.newWidth = newWidth > 0 ? newWidth : _this3.minWidth; + // if(newWidth > this.drag.minWidth){ + if (newWidth > _this3.minWidth) { + currentCols.style.width = newWidth + 'px'; + //hao 支持固定表头拖拽 修改表体的width + if (_this3.fixedTable.cols) { + _this3.fixedTable.cols[_this3.drag.currIndex].style.width = newWidth + "px"; + } + + // const newTableWidth = this.drag.tableWidth + diff;// +'px'; + // this.table.table.style.width = newTableWidth+'px';;//改变table的width + // if(this.table.innerTableBody){//TODO 后续需要处理此处 + // this.table.innerTableBody.style.width = newTableWidth+'px'; + + // } + + var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width); + if (newDiff > 0) { + //缩小 + var lastWidth = _this3.lastColumWidth + newDiff; + _this3.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 + _this3.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 + } + var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this3.drag.tableWidth + diff) - scrollbarWidth; + //表头滚动条处理 + if (headerScroll) { + if (showScroll < 0) { + //小于 0 出现滚动条 + //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; + _this3.table.contentTableHeader.style.overflowX = 'scroll'; + _this3.optTableMargin(_this3.table.fixedLeftHeaderTable, scrollbarWidth); + _this3.optTableMargin(_this3.table.fixedRighHeadertTable, scrollbarWidth); + // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px"); + // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); + //todo inner scroll-x去掉；outer marginbottom 设置成-15px】 + } else { + //大于 0 不显示滚动条 + _this3.table.contentTableHeader.style.overflowX = 'hidden'; + _this3.optTableMargin(_this3.table.fixedLeftHeaderTable, 0); + _this3.optTableMargin(_this3.table.fixedRighHeadertTable, 0); + } + } else { + if (showScroll < 0) { + _this3.table.tableBody.style.overflowX = 'auto'; + _this3.optTableMargin(_this3.table.fixedLeftBodyTable, '-' + scrollbarWidth); + _this3.optTableMargin(_this3.table.fixedRightBodyTable, '-' + scrollbarWidth); + _this3.optTableScroll(_this3.table.fixedLeftBodyTable, { x: 'scroll' }); + _this3.optTableScroll(_this3.table.fixedRightBodyTable, { x: 'scroll' }); + } else { + _this3.table.tableBody.style.overflowX = 'hidden'; + _this3.optTableMargin(_this3.table.fixedLeftBodyTable, 0); + _this3.optTableMargin(_this3.table.fixedRightBodyTable, 0); + _this3.optTableScroll(_this3.table.fixedLeftBodyTable, { x: 'auto' }); + _this3.optTableScroll(_this3.table.fixedRightBodyTable, { x: 'auto' }); + } + } + } else { + _this3.drag.newWidth = _this3.minWidth; + } + } else if (_this3.props.draggable && _this3.drag.option == "draggable") { + // console.log(" --onTrMouseMove--draggable- ",this.drag.option); + } else {} + // console.log("onTrMouseMove dragborder or draggable is all false !"); + + // 增加拖拽列宽动作的回调函数 + _this3.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this3.drag.newWidth); + }; + + this.onTrMouseUp = function (e) { + var event = _utils.Event.getEvent(e); + var width = _this3.drag.newWidth; + _this3.mouseClear(); + _this3.props.onDropBorder && _this3.props.onDropBorder(event, width); + }; + + this.clearThsDr = function () { + var ths = _this3.table.ths; + for (var index = 0; index < ths.length; index++) { + ths[index].setAttribute('draggable', false); //去掉交换列效果 + } + }; + + this.bodyonLineMouseUp = function (events, type) { + if (!_this3.drag || !_this3.drag.option) return; + _this3.mouseClear(); + }; + + this.optTableMargin = function (table, scrollbarWidth) { + if (table) { + table.style.marginBottom = scrollbarWidth + "px"; + } + }; + + this.optTableScroll = function (table) { + var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + if (table) { + var innerTable = table.querySelector('.u-table-body-inner'); + if (innerTable) { + //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行 + overflow.x && (innerTable.style.overflowX = overflow.x); + overflow.y && (innerTable.style.overflowY = overflow.y); + } + } + }; + + this.onDragStart = function (e) { + if (!_this3.props.draggable) return; + if (_this3.drag && _this3.drag.option != 'dragAble') { + return; + } + var event = _utils.Event.getEvent(e), + + // target = Event.getTarget(event); + target = _this3.getTargetToTh(_utils.Event.getTarget(event)); + var currentIndex = parseInt(target.getAttribute("data-line-index")); + var currentKey = target.getAttribute('data-line-key'); + + if (event.dataTransfer.setDragImage) { + var crt = target.cloneNode(true); + crt.style.backgroundColor = "#ebecf0"; + crt.style.width = _this3.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步 + crt.style.height = "40px"; + // crt.style['line-height'] = "40px"; + // document.body.appendChild(crt); + document.getElementById(_this3._table_none_cont_id).appendChild(crt); + event.dataTransfer.setDragImage(crt, 0, 0); + } + + event.dataTransfer.effectAllowed = "move"; + event.dataTransfer.setData("Text", currentKey); + _this3.currentObj = _this3.props.rows[0][currentIndex]; + }; + + this.onDragOver = function (e) { + var event = _utils.Event.getEvent(e); + event.preventDefault(); + }; + + this.onDrop = function (e) { + if (!_this3.props.draggable) return; + var props = _this3.getCurrentEventData(_this3._dragCurrent); + e.column = { props: props }; + if (_this3.drag && _this3.drag.option != 'dragAble') { + _this3.props.onDrop(e); + return; + } + var event = _utils.Event.getEvent(e), + target = _utils.Event.getTarget(event); + _this3.currentDome.setAttribute('draggable', false); //添加交换列效果 + // let data = this.getCurrentEventData(this._dragCurrent); + // if(!data){ + // this.props.onDrop(e); + // return; + // } + if (!_this3.props.onDrop) return; + // this.props.onDrop(event,target); + _this3.props.onDrop(event, { dragSource: _this3.currentObj, dragTarg: colum }); + }; + + this.onDragEnter = function (e) { + var event = _utils.Event.getEvent(e), + target = _utils.Event.getTarget(event); + _this3._dragCurrent = target; + var currentIndex = target.getAttribute("data-line-index"); + if (!currentIndex || parseInt(currentIndex) === _this3.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)"); + // target.style.backgroundColor = 'rgb(235, 236, 240)'; + } + }; + + this.onDragEnd = function (e) { + var event = _utils.Event.getEvent(e), + target = _utils.Event.getTarget(event); + _this3._dragCurrent.setAttribute("style", ""); + // this._dragCurrent.style = ""; + document.getElementById(_this3._table_none_cont_id).innerHTML = ""; + + var data = _this3.getCurrentEventData(_this3._dragCurrent); + if (!data) return; + if (!_this3.currentObj || _this3.currentObj.key == data.key) return; + if (!_this3.props.onDragEnd) return; + _this3.props.onDragEnd(event, { dragSource: _this3.currentObj, dragTarg: data }); + }; + + this.onDragLeave = function (e) { + var event = _utils.Event.getEvent(e), + target = _utils.Event.getTarget(event); + var currentIndex = target.getAttribute("data-line-index"); + if (!currentIndex || parseInt(currentIndex) === _this3.drag.currIndex) return; + if (target.nodeName.toUpperCase() === "TH") { + target.setAttribute("style", ""); + // this._dragCurrent.style = ""; + } + }; + + this.handlerFilterChange = function (key, value, condition) { + var onFilterChange = _this3.props.onFilterChange; + + if (onFilterChange) { + onFilterChange(key, value, condition); + } + }; + + this.handlerFilterClear = function (field) { + var onFilterClear = _this3.props.onFilterClear; + + if (onFilterClear) { + onFilterClear(field); + } + }; + + this.filterRenderType = function (type, dataIndex, index) { + var _props5 = _this3.props, + clsPrefix = _props5.clsPrefix, + rows = _props5.rows, + filterDelay = _props5.filterDelay, + locale = _props5.locale; + + switch (type) { + //文本输入 + case "text": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale //多语 + , rendertype: type //渲染类型 + , clsPrefix: clsPrefix //css前缀 + , className: clsPrefix + " filter-text", + dataIndex: dataIndex //字段 + , onFilterChange: _this3.handlerFilterChange //输入框回调 + , onFilterClear: _this3.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件 + , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //数值输入 + case "number": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + clsPrefix: clsPrefix, + className: clsPrefix + " filter-text", + dataIndex: dataIndex //字段 + , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this3.handlerFilterChange) //输入框回调并且函数防抖动 + , onFilterClear: _this3.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + , filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性 + }); + //下拉框选择 + case "dropdown": + var selectDataSource = []; + //处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入 + if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") { + var hash = {}; + //处理下拉重复对象组装dropdown + selectDataSource = Array.from(rows[1][0].datasource, function (x) { + return { + key: x[dataIndex], + value: x[dataIndex] + }; + }); + selectDataSource = selectDataSource.reduceRight(function (item, next) { + hash[next.key] ? "" : hash[next.key] = true && item.push(next); + return item; + }, []); + } else { + //从外部数据源加载系统数据 + selectDataSource = rows[1][index]["filterdropdowndata"]; + } + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: clsPrefix + " filter-dropdown", + data: selectDataSource, + notFoundContent: "Loading" //没有数据显示的默认字 + , dataIndex: dataIndex //字段 + , onFilterChange: _this3.handlerFilterChange //输入框回调 + , onFilterClear: _this3.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + onFocus: rows[1][index]["filterdropdownfocus"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //日期 + case "date": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: "filter-date", + onClick: function onClick() {}, + format: rows[1][index]["format"] || "YYYY-MM-DD", + dataIndex: dataIndex //字段 + , onFilterChange: _this3.handlerFilterChange //输入框回调 + , onFilterClear: _this3.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //日期范围 + case "daterange": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: "filter-date", + onClick: function onClick() {}, + format: rows[1][index]["format"] || "YYYY-MM-DD", + dataIndex: dataIndex //字段 + , onFilterChange: _this3.handlerFilterChange //输入框回调 + , onFilterClear: _this3.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + default: + //不匹配类型默认文本输入 + return _react2["default"].createElement("div", null); + } + }; +}; TableHeader.propTypes = propTypes; exports["default"] = TableHeader; diff --git a/package.json b/package.json index f7799f4..dfaca77 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "2.2.5", + "version": "2.2.6", "description": "Table ui component for react", "keywords": [ "react", diff --git a/src/TableHeader.js b/src/TableHeader.js index 8aacd9d..9cd8127 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -488,8 +488,8 @@ class TableHeader extends Component { */ onDrop = (e) => { if (!this.props.draggable) return; - let colum = this.getCurrentEventData(this._dragCurrent) - e.node = {props:{colum}}; + let props = this.getCurrentEventData(this._dragCurrent) + e.column = {props}; if(this.drag && this.drag.option != 'dragAble'){ this.props.onDrop(e); return;