"use strict"; Object.defineProperty(exports, "__esModule", { 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; }; var _react = require("react"); var _react2 = _interopRequireDefault(_react); var _reactDom = require("react-dom"); var _reactDom2 = _interopRequireDefault(_reactDom); var _propTypes = require("prop-types"); var _propTypes2 = _interopRequireDefault(_propTypes); var _throttleDebounce = require("throttle-debounce"); var _utils = require("./lib/utils"); var _FilterType = require("./FilterType"); var _FilterType2 = _interopRequireDefault(_FilterType); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } var propTypes = { clsPrefix: _propTypes2["default"].string, rowStyle: _propTypes2["default"].object, rows: _propTypes2["default"].array }; function getDiv(id) { var div = document.createElement("div"); div.className = "u-table-drag-hidden-cont"; div.id = id; return div; } var TableHeader = function (_Component) { _inherits(TableHeader, _Component); function TableHeader(props) { _classCallCheck(this, TableHeader); var _this = _possibleConstructorReturn(this, _Component.call(this, props)); _initialiseProps.call(_this); _this.currentObj = null; _this.theadKey = new Date().getTime(); _this.drag = { option: '' }; _this.minWidth = parseInt(props.minColumnWidth); _this.table = null; _this._thead = null; //当前对象 _this.event = false; //避免多次绑定问题 _this.lastColumWidth = null; //非固定列最后一列的初始化宽度 _this.fixedTable = {}; return _this; } TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { var _this2 = this; // 表格column改变时,要重新绑定拖拽事件,否则拖拽不生效 var oldCols = this.props.columnsChildrenList; var newCols = nextProps.columnsChildrenList; if (this._thead) { if (newCols.length !== oldCols.length) { this.event = false; return; } oldCols.some(function (item, index) { if (newCols[index] && newCols[index].dataIndex !== item.dataIndex) { _this2.event = false; return true; } }); } }; TableHeader.prototype.componentDidUpdate = function componentDidUpdate() { this.initTable(); this.initEvent(); }; TableHeader.prototype.componentDidMount = function componentDidMount() { var uid = "_table_uid_" + new Date().getTime(); this._table_none_cont_id = uid; var div = getDiv(uid); document.querySelector("body").appendChild(div); }; TableHeader.prototype.componentWillUnmount = function componentWillUnmount() { var _this3 = this; this.fixedTable = null; if (!this.table) return; if (this.props.draggable) { this.removeDragAbleEvent(); } if (this.props.dragborder) { this.removeDragBorderEvent(); } this.doEventList(this.table.tr, function (tr) { _this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], 'remove', tr); }); // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]); this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body); }; /** * 获取table的属性存放在this.table 中。(公用方法) * @returns * @memberof TableHeader */ TableHeader.prototype.initTable = function initTable() { var contentTable = this.props.contentTable; if (!this.props.dragborder && !this.props.draggable) return; var tableDome = this._thead.parentNode; var table = {}; if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") { table.table = tableDome; 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') || []; table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); table.fixedRightHeaderTable = contentTable.querySelector('.u-table-fixed-right .u-table-header'); table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer'); if (table.fixedLeftBodyTable) { var leftBodyTableIndex = table.fixedLeftBodyTable.length - 1 < 0 ? 0 : table.fixedLeftBodyTable.length - 1; table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex]; } table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer'); if (table.fixedRightBodyTable) { var rightBodyTableIndex = table.fixedRightBodyTable.length - 1 < 0 ? 0 : table.fixedRightBodyTable.length - 1; table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex]; } table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table'); table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null; table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null; table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null; table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null; table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || []; table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || []; } this.table = table; if (!this.props.dragborder) return; if (document.getElementById("u-table-drag-thead-" + this.theadKey)) { this.fixedTable = {}; var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode; var siblingDom = _fixedParentContext.parentNode.nextElementSibling; if (siblingDom) { var fixedTable = siblingDom.querySelector("table"); this.fixedTable.table = fixedTable; this.fixedTable.cols = fixedTable.getElementsByTagName("col"); // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th"); } } }; /** * 事件初始化 */ TableHeader.prototype.initEvent = function initEvent() { var _this4 = this; var _props = this.props, dragborder = _props.dragborder, draggable = _props.draggable, rows = _props.rows; // 当传入的 columns 为空时,不绑定拖拽事件 if (Object.prototype.toString.call(rows) === '[object Array]' && rows.length === 0) { return; } if (!this.event) { //避免多次绑定问题。 this.event = true; if (dragborder) { this.dragBorderEventInit(); //列宽 } if (draggable) { this.dragAbleEventInit(); //交换列 } if (this.table && this.table.tr) { // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup this.doEventList(this.table.tr, function (tr) { _this4.eventListen([{ key: 'mousedown', fun: _this4.onTrMouseDown }], '', tr); //body mouseup }); } this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup } }; TableHeader.prototype.doEventList = function doEventList(trs, action) { if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) { for (var index = 0; index < trs.length; index++) { action(trs[index]); } } }; /** * 拖拽列宽事件的监听 */ TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() { if (!this.props.dragborder) return; 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元素上 }; /** * 删除拖动改变列宽的事件监听 */ TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { var _this5 = this; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; // this.eventListen(events,'remove',this.table.tr[0]); if (this.table && this.table.tr) { this.doEventList(this.table.tr, function (tr) { _this5.eventListen(events, 'remove', _this5.table.tr); }); } }; TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) { if (!this.table) return; if (!eventSource) { console.log("Please set the attributes of column !"); return; } var tr = this.table.tr; for (var i = 0; i < events.length; i++) { var _event = events[i]; if (type === "remove") { _utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun); } else { _utils.EventUtil.addHandler(eventSource, _event.key, _event.fun); } } }; /** * *根据 data-type 来获取当前拖拽的对象的Object,如果为null表示拖动的对象并非是online * @memberof TableHeader */ /** * 调整列宽的down事件 * @memberof TableHeader */ /** * 根据当前节点查找到有data-type类型的容器返回。 * @memberof TableHeader */ /** * 判断当前的target 是否是 th,如果不是,直接递归查找。 * @memberof TableHeader */ /** * 调整列宽的move事件 * @memberof TableHeader */ /** * 调整列宽的up事件 * @memberof TableHeader */ TableHeader.prototype.mouseClear = function mouseClear() { if (!this.drag || !this.drag.option) return; var rows = this.props.rows; var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex }; this.props.afterDragColWidth && this.props.afterDragColWidth(data); this.drag = { option: "" }; this.clearThsDr(); }; /** * 当前对象上绑定全局事件,用于拖拽区域以外时的事件处理 * @param {*} events * @param {*} type * @memberof TableHeader */ /** *相关滚动条联动操作 * * @memberof TableHeader */ //---拖拽交换列代码----start----- /** * 添加换列的事件监听 */ TableHeader.prototype.dragAbleEventInit = function dragAbleEventInit() { if (!this.props.draggable) return; var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发 { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件 { key: 'drop', fun: this.onDrop }, //在一个拖动过程中,释放鼠标键时触发此事件 { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }]; this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上 }; /** * 删除换列的事件监听 */ TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() { var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }]; this.eventListen(events, 'remove', this.table.tr[0]); }; /** * 开始调整交换列的事件 */ /** * 在一个拖动过程中,释放鼠标键时触发此事件。【目标事件】 * @memberof TableHeader */ /** * 获取当前th上的对象数据 * @param {*} e * @returns * @memberof TableHeader */ TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) { if (!th) { console.log(" event target is not th ! "); return null; } var key = th.getAttribute('data-line-key'); var data = this.props.rows[0].find(function (da) { return da.key == key; }); if (data) { return data; } else { console.log(" getCurrentEventData data is null "); return null; } }; /** * 根据当前鼠标点击的节点,进行递归遍历,最终找到th * @param {*} element * @returns 对象 * @memberof TableHeader */ TableHeader.prototype.getThDome = function getThDome(element) { var _tagName = element.tagName.toLowerCase(); if (element.getAttribute('data-filter-type') === 'filterContext') return null; if (_tagName === 'i') return null; if (_tagName != 'th') { return this.getThDome(element.parentElement); } else { return element; } }; //---拖拽列交换----end----- /** * 过滤输入后或下拉条件的回调函数 */ /** * 过滤行清除回调 */ /** * 过滤渲染的组件类型 */ TableHeader.prototype.render = function render() { var _this6 = this; var _props2 = this.props, clsPrefix = _props2.clsPrefix, rowStyle = _props2.rowStyle, draggable = _props2.draggable, dragborder = _props2.dragborder, rows = _props2.rows, filterable = _props2.filterable, fixed = _props2.fixed, lastShowIndex = _props2.lastShowIndex, columnsChildrenList = _props2.columnsChildrenList; var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {}; var lastObj = columnsChildrenList[columnsChildrenList.length - 1]; return _react2["default"].createElement( "thead", _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) { return _this6._thead = _thead; } }), rows.map(function (row, index) { var _rowLeng = row.length - 1; return _react2["default"].createElement( "tr", { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' }, row.map(function (da, columIndex, arr) { da.children = da.required ? _react2["default"].createElement( "span", null, _react2["default"].createElement( "span", { className: "required" }, "*" ), da.children ) : da.children; var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : ""; delete da.drgHover; var fixedStyle = ""; var canDotDrag = ""; //主表格下、固定列或者是过滤行中含有固定列时添加该属性 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"; } var thClassName = "" + da.className ? "" + da.className : ''; if (da.titleAlign) { thClassName += " text-" + da.titleAlign + " "; } else if (da.textAlign) { thClassName += " text-" + da.textAlign + " "; } delete da.textAlign; delete da.titleAlign; var keyTemp = {}; //避免key为undefined // if(da.dataindex && da.key ===undefined ){ keyTemp.key = da.key || da.dataindex || index + '-' + columIndex; // } if (filterable && index == rows.length - 1) { da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex); if (da.key === undefined) { keyTemp.key = keyTemp.key + '-filterable'; } delete da.filterdropdownfocus; } var thDefaultObj = {}; if (draggable) { thClassName += " " + clsPrefix + "-thead th-drag " + thHover + " "; } if (dragborder) { thClassName += " " + clsPrefix + "-thead-th " + canDotDrag; } thClassName += " " + fixedStyle; if (!da.fixed) { return _react2["default"].createElement( "th", _extends({}, 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) { _this6.onCopy(da, columIndex, event); } }), da.children, // && columIndex != _rowLeng dragborder && lastObj && da.key != lastObj.key ? _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" }) ) : "" ); } else { thDefaultObj = _extends({}, da, { className: thClassName + " " + fixedStyle }); 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: _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" }) ) : "" ); } }) ); }) ); }; return TableHeader; }(_react.Component); TableHeader.defaultProps = { contentWidthDiff: 0 }; var _initialiseProps = function _initialiseProps() { var _this7 = 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) { var eventNoStop = _this7.props.eventNoStop; !eventNoStop && _utils.Event.stopPropagation(e); var event = _utils.Event.getEvent(e), targetEvent = _utils.Event.getTarget(event); var _props3 = _this7.props, clsPrefix = _props3.clsPrefix, contentTable = _props3.contentTable, lastShowIndex = _props3.lastShowIndex, columnsChildrenList = _props3.columnsChildrenList; // let currentElement = this.getOnLineObject(targetEvent); var currentElement = _this7.getTargetToType(targetEvent); if (!currentElement) return; var type = currentElement.getAttribute('data-type'); 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"); _this7.drag.option = "border"; //拖拽操作 if (columnsChildrenList) { var columnKey = currentElement.getAttribute("data-line-key"); if (columnKey) { currentIndex = columnsChildrenList.findIndex(function (da) { return (da.key && da.key.toLowerCase()) === columnKey.toLowerCase(); }); } } if (currentIndex < 0) { console.log('Key must be set for column!'); return; } 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(!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; } } _this7.drag.fixedType = fixedType; } else if (type != 'online' && _this7.props.draggable) { // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; if (!_this7.props.draggable) return; var th = _this7.getTargetToType(targetEvent); th.setAttribute('draggable', true); //添加交换列效果 _this7.drag.option = 'dragAble'; _this7.currentDome = th; var _currentIndex = parseInt(th.getAttribute("data-line-index")); _this7.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 < _this7.table.cols.length; index++) { var da = _this7.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 = _this7.getTargetToType(targetEvent.parentElement); } return tag; }; this.getTargetToTh = function (targetEvent) { var th = targetEvent; if (targetEvent.nodeName.toUpperCase() != "TH") { th = _this7.getThDome(targetEvent); } // console.log(" getTargetToTh: ", th); return th; }; this.onTrMouseMove = function (e) { if (!_this7.props.dragborder && !_this7.props.draggable) return; var _props4 = _this7.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, bodyDisplayInRow = _props4.bodyDisplayInRow, eventNoStop = _props4.eventNoStop; !eventNoStop && _utils.Event.stopPropagation(e); var event = _utils.Event.getEvent(e); if (_this7.props.dragborder && _this7.drag.option == "border") { //移动改变宽度 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; // displayinrow 判断、 固定行高判断 if (!bodyDisplayInRow) { _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"); rightRow && (rightRow.style.height = height + "px"); } }); } if (newWidth > _this7.minWidth) { currentCols.style.width = newWidth + 'px'; //hao 支持固定表头拖拽 修改表体的width if (_this7.fixedTable.cols) { _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "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"; //同步表体 } // 内容区非固定列场景拖拽 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.fixedRightHeaderTable, scrollbarWidth); } else { //大于 0 不显示滚动条 _this7.table.contentTableHeader.style.overflowX = 'hidden'; _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0); _this7.optTableMargin(_this7.table.fixedRightHeaderTable, 0); } } else { var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || []; if (showScroll < 0) { scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null; _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 { scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null; _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 (_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 _this7.syncFixedBodyTableWidth(); // 同步body中table的宽度 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 { contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px'; } var containerWidth = contentTablePar.getBoundingClientRect().width; var tableWidth = _this7.table.innerTableBody.getBoundingClientRect().width; var _scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || []; if (tableWidth > containerWidth) { _scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'auto' : null; _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 { _scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'hidden' : null; _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 { _this7.drag.newWidth = _this7.minWidth; } } // 增加拖拽列宽动作的回调函数 _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth); }; this.syncFixedBodyTableWidth = function () { var _table = _this7.table, fixedLeftHeaderTableBody = _table.fixedLeftHeaderTableBody, fixedLeftInnerTableBody = _table.fixedLeftInnerTableBody, fixedRightHeaderTableBody = _table.fixedRightHeaderTableBody, fixedRightInnerTableBody = _table.fixedRightInnerTableBody; if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) { fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px'; } if (fixedRightHeaderTableBody && fixedRightInnerTableBody) { fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px'; } }; this.onTrMouseUp = function (e) { var event = _utils.Event.getEvent(e); var width = _this7.drag.newWidth; var opt = _this7.drag.option; _this7.mouseClear(); if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题 _this7.props.onDropBorder && _this7.props.onDropBorder(event, width); }; this.clearThsDr = function () { var ths = _this7.table.ths; for (var index = 0; index < ths.length; index++) { ths[index].setAttribute('draggable', false); //去掉交换列效果 } }; this.bodyonLineMouseUp = function (events, type) { if (!_this7.drag || !_this7.drag.option) return; _this7.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: 拖拽列宽后,滚动条滚到表格底部,会导致固定列和非固定列错行 if (overflow.x) { var fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container'); if (fixedScrollContainers && fixedScrollContainers.length) { fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x); fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x); } } overflow.y && (innerTable.style.overflowY = overflow.y); } } }; this.onDragStart = function (e) { if (!_this7.props.draggable) return; if (_this7.drag && _this7.drag.option != 'dragAble') { return; } var event = _utils.Event.getEvent(e), // target = 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 = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候,阴影效果可同步 crt.style.height = "40px"; // crt.style['line-height'] = "40px"; // document.body.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); _this7.currentObj = _this7.props.rows[0][currentIndex]; }; this.onDragOver = function (e) { var event = _utils.Event.getEvent(e); event.preventDefault(); }; this.onDrop = function (e) { if (!_this7.props.draggable) return; var props = _this7.getCurrentEventData(_this7._dragCurrent); e.column = { props: props }; 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(); _this7.currentDome.setAttribute('draggable', false); //添加交换列效果 // let data = this.getCurrentEventData(this._dragCurrent); // if(!data){ // this.props.onDrop(e); // return; // } if (!_this7.props.onDrop) return; // this.props.onDrop(event,target); _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); _this7._dragCurrent = target; var currentIndex = target.getAttribute("data-line-index"); 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)"); // target.style.backgroundColor = 'rgb(235, 236, 240)'; } }; this.onDragEnd = function (e) { var event = _utils.Event.getEvent(e), target = _utils.Event.getTarget(event); _this7._dragCurrent.setAttribute("style", ""); event.preventDefault(); event.stopPropagation(); // this._dragCurrent.style = ""; document.getElementById(_this7._table_none_cont_id).innerHTML = ""; var data = _this7.getCurrentEventData(_this7._dragCurrent); if (!data) return; 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) === _this7.drag.currIndex) return; if (target.nodeName.toUpperCase() === "TH") { target.setAttribute("style", ""); // this._dragCurrent.style = ""; } }; this.handlerFilterChange = function (key, value, condition) { var onFilterChange = _this7.props.onFilterChange; if (onFilterChange) { onFilterChange(key, value, condition); } }; this.handlerFilterClear = function (field) { var onFilterClear = _this7.props.onFilterClear; if (onFilterClear) { onFilterClear(field); } }; this.filterRenderType = function (type, dataIndex, index) { var _props5 = _this7.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: (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去显示 }); //数值输入 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, _this7.handlerFilterChange) //输入框回调并且函数防抖动 , onFilterClear: _this7.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: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.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: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.handlerFilterClear //清除回调 , filterDropdown: rows[1][index]["filterdropdown"], filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 }); //日期 年 case "dateyear": return _react2["default"].createElement(_FilterType2["default"], { locale: locale, rendertype: type, className: "filter-date", onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY", dataIndex: dataIndex //字段 , onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.handlerFilterClear //清除回调 , filterDropdown: rows[1][index]["filterdropdown"], filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 }); //日期 月 case "datemonth": return _react2["default"].createElement(_FilterType2["default"], { locale: locale, rendertype: type, className: "filter-date", onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-MM", dataIndex: dataIndex //字段 , onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.handlerFilterClear //清除回调 , filterDropdown: rows[1][index]["filterdropdown"], filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 }); //日期 周 case "dateweek": return _react2["default"].createElement(_FilterType2["default"], { locale: locale, rendertype: type, className: "filter-date", onClick: function onClick() {}, format: rows[1][index]["format"] || "YYYY-Wo", dataIndex: dataIndex //字段 , onFilterChange: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.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: _this7.handlerFilterChange //输入框回调 , onFilterClear: _this7.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); } }; this.onCopy = function (data, index, event) { if (_this7.props.onCopy) { _this7.props.onCopy(_extends(data, { col: index }), event); } }; }; TableHeader.propTypes = propTypes; exports["default"] = TableHeader; module.exports = exports["default"];