"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 = 80; //确定最小宽度就是80 _this.table = null; _this._thead = null; //当前对象 _this.event = false; //避免多次绑定问题 _this.lastColumWidth = null; //非固定列最后一列的初始化宽度 _this.fixedTable = {}; return _this; } 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() { this.fixedTable = null; if (!this.table) return; if (this.props.draggable) { this.removeDragAbleEvent(); } if (this.props.dragborder) { this.removeDragBorderEvent(); } 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.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.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header'); table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer'); table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer'); table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table'); this.table = table; if (!this.props.dragborder) return; 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 _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.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup } }; /** * 拖拽列宽事件的监听 */ TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() { if (!this.props.dragborder) return; var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上 }; /** * 删除拖动改变列宽的事件监听 */ TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }]; this.eventListen(events, 'remove', this.table.tr[0]); }; 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 _this2 = 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; var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {}; return _react2["default"].createElement( "thead", _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) { return _this2._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) { 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 = _this2.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" }), da.required ? _react2["default"].createElement( "span", { className: "required" }, "*" ) : '', da.children, dragborder && columIndex != _rowLeng ? _react2["default"].createElement( "div", { ref: function ref(el) { return _this2.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" }, _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 })); } }) ); }) ); }; return TableHeader; }(_react.Component); 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: e.column }); }; 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; module.exports = exports["default"];