bee-table
Version:
Table ui component for react
1,211 lines (1,080 loc) • 58.3 kB
JavaScript
"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 prefix = 'u';
var propTypes = {
clsPrefix: _propTypes2["default"].string,
locale: _propTypes2["default"].string,
rowStyle: _propTypes2["default"].object,
rows: _propTypes2["default"].array,
minColumnWidth: _propTypes2["default"].number,
contentDomWidth: _propTypes2["default"].number,
scrollbarWidth: _propTypes2["default"].number,
columnsChildrenList: _propTypes2["default"].any,
tableUid: _propTypes2["default"].string,
draggable: _propTypes2["default"].bool,
dragborder: _propTypes2["default"].bool,
contentTable: _propTypes2["default"].any,
headerScroll: _propTypes2["default"].any,
parentNode: _propTypes2["default"].any,
columnManager: _propTypes2["default"].any,
filterable: _propTypes2["default"].any,
lastShowIndex: _propTypes2["default"].number,
leftFixedWidth: _propTypes2["default"].number,
rightFixedWidth: _propTypes2["default"].number,
onMouseMove: _propTypes2["default"].func,
onDraggingBorder: _propTypes2["default"].func,
onDragEnd: _propTypes2["default"].func,
onMouseDown: _propTypes2["default"].func,
onDrop: _propTypes2["default"].func,
onFilterChange: _propTypes2["default"].func,
onFilterClear: _propTypes2["default"].func,
onCopy: _propTypes2["default"].func,
bodyDisplayInRow: _propTypes2["default"].bool,
eventNoStop: _propTypes2["default"].bool,
onDropBorder: _propTypes2["default"].bool,
fixed: _propTypes2["default"].bool,
afterDragColWidth: _propTypes2["default"].number,
filterDelay: _propTypes2["default"].number
};
var TableHeader = function (_Component) {
_inherits(TableHeader, _Component);
function TableHeader(props) {
_classCallCheck(this, TableHeader);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.createTableNone = function () {
_this._table_none_cont_id = _this.props.tableUid || "_table_uid_" + new Date().getTime();
if (document.getElementById(_this._table_none_cont_id)) return;
var div = document.createElement("div");
div.className = prefix + "-table-drag-hidden-cont";
div.id = _this._table_none_cont_id;
document.body.appendChild(div);
return div;
};
_this.destroyTableNone = function () {
var elem = document.getElementById(_this._table_none_cont_id);
if (!elem) return;
if (elem.remove) {
elem.remove();
} else {
//ie 不支持remove方法，只能用removeChild方法
elem.parentNode.removeChild(elem);
}
};
_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.onDragMouseDown = function (e) {
var _this$props = _this.props,
dragborder = _this$props.dragborder,
eventNoStop = _this$props.eventNoStop,
onMouseDown = _this$props.onMouseDown;
!eventNoStop && _utils.Event.stopPropagation(e);
dragborder && typeof onMouseDown == 'function' && onMouseDown(e);
};
_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) {
// console.log("AAA---TableHeader---mousemove->",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,
onMouseMove = _this$props2.onMouseMove,
onDraggingBorder = _this$props2.onDraggingBorder,
leftFixedWidth = _this$props2.leftFixedWidth,
rightFixedWidth = _this$props2.rightFixedWidth,
bodyDisplayInRow = _this$props2.bodyDisplayInRow,
eventNoStop = _this$props2.eventNoStop;
!eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (_this.props.dragborder && _this.drag.option == "border") {
//移动改变宽度
var isMoveToRight = _this.drag.currentLeft < event.clientX;
if (_this.drag.fixedType === 'left' && isMoveToRight && _this.drag.fixedRightBodyTableLeft) {
if (_this.drag.fixedRightBodyTableLeft - event.clientX < 100) {
return; // 拖动左侧固定列，离右侧固定列距离小于100时，禁止拖动
}
}
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.clientX - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth > 0 ? newWidth : _this.minWidth;
_this.drag.currentLeft = event.clientX;
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {
_this.table.bodyRows.forEach(function (row, index) {
var leftRow = _this.table.fixedLeftBodyRows[index];
var rightRow = _this.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 > _this.minWidth) {
//移动后的宽度大于列最小宽度，则更新列和内容宽度
/*拖拽列宽度使用尺标代替不再实时更新重绘宽度
currentCols.style.width = newWidth +'px'; //中间表头-拖拽过程中实时更新重绘宽度
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";//固定列表头-拖拽过程中实时更新重绘宽度
}
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);
headerCols[headerCols.length-1].style.width = lastWidth +"px";//同步表头
this.table.tableBodyCols[headerCols.length-1].style.width = lastWidth + "px";//同步表体
}
*/
// 内容区非固定列场景拖拽
if (!_this.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";//同步表体
// }
// let dargTableWidth = parseFloat(window.getComputedStyle(this.table.table).width)
// let showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (dargTableWidth + diff) - scrollbarWidth;
// //let 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.fixedRightHeaderTable,scrollbarWidth);
// }else{ //大于 0 不显示滚动条
// this.table.contentTableHeader.style.overflowX = 'hidden';
// this.optTableMargin( this.table.fixedLeftHeaderTable,0);
// this.optTableMargin( this.table.fixedRightHeaderTable,0);
// }
// }else{
// // const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
// if(showScroll < 0){
// // scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null//暂时注释，还原原来逻辑
// 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{
// // scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
// 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 if (_this.drag.fixedType) {
if (_this.table.ths[_this.drag.currIndex]) {
_this.table.ths[_this.drag.currIndex].width = newWidth;
}
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
// debugger
// this.syncFixedBodyTableWidth() // 同步body中table的宽度 以移到Table.syncFixedBodyTableWidth
var contentTablePar = _this.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 (_this.drag.fixedType == 'left') {
contentTablePar.style.marginLeft = _this.drag.contentTableML + diff + 'px';
} else {
contentTablePar.style.marginRight = _this.drag.contentTableMR + diff + 'px';
}
//暂时注释，还原
// const containerWidth = contentTablePar.getBoundingClientRect().width
// const tableWidth = this.table.innerTableBody.getBoundingClientRect().width
// const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
// if (tableWidth > containerWidth) {
// scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
// 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 {
// scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
// 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;
}
}
// console.log("AAAA----TableHeader---newWidth-->"+this.drag.newWidth)
// onMouseMove && onMouseMove(e);
// 增加拖拽列宽动作的回调函数
_this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this.drag.newWidth);
};
_this.syncFixedBodyTableWidth = function () {
var _this$table = _this.table,
fixedLeftHeaderTableBody = _this$table.fixedLeftHeaderTableBody,
fixedLeftInnerTableBody = _this$table.fixedLeftInnerTableBody,
fixedRightHeaderTableBody = _this$table.fixedRightHeaderTableBody,
fixedRightInnerTableBody = _this$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 = _this.drag.newWidth;
var opt = _this.drag.option;
_this.mouseClear();
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
_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.dragAbleMouseDown = function (e) {
var eventNoStop = _this.props.eventNoStop;
!eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event);
if (!_this.props.draggable) return;
var currentElement = _this.getTargetToType(targetEvent);
if (!currentElement) return;
var type = currentElement.getAttribute('data-type');
if (type == 'draggable' && _this.props.draggable) {
var th = currentElement;
th.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = th;
_this.drag.dragTarget = th; //抓起的th目标
}
};
_this.onDragStart = function (e) {
if (!_this.props.draggable) return;
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var event = _utils.Event.getEvent(e);
var target = _this.drag.dragTarget; //抓起的th目标
var currColKey = target.getAttribute("data-col-key");
var currColIndex = target.getAttribute('data-col-index');
if (event.dataTransfer.setDragImage) {
var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = _this.table.cols[currColIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
crt.style.height = "40px";
document.getElementById(_this._table_none_cont_id).appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0);
}
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currColKey);
};
_this.onDragOver = function (e) {
var event = _utils.Event.getEvent(e);
event.preventDefault();
};
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag && _this.drag.option != 'dragAble') {
_this.props.onDrop && _this.props.onDrop(e);
return;
}
var event = _utils.Event.getEvent(e);
_utils.Event.preventDefault(e); //防止拖拽后打开a链接
_utils.Event.stopPropagation(e);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
if (!_this.props.onDrop) return;
var _this$drag = _this.drag,
dragTarget = _this$drag.dragTarget,
enterTarget = _this$drag.enterTarget;
var dragColKey = dragTarget && dragTarget.getAttribute("data-col-key"); //抓起的th目标
var dropColKey = enterTarget && enterTarget.getAttribute("data-col-key");
var dragSourceColumn = _this.props.rows[0].find(function (da) {
return da.key == dragColKey;
}); //抓取来源列定义
var dragTargetColumn = _this.props.rows[0].find(function (da) {
return da.key == dropColKey;
}); //放置目标列定义
if (dragSourceColumn.fixed !== dragTargetColumn.fixed) return; //固定列和非固定列之间不能拖拽换顺序
_this.props.onDrop(event, { dragSource: dragSourceColumn, dragTarget: dragTargetColumn });
};
_this.onDragEnter = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.drag.enterTarget = target; //拖拽进入的目标th
var dragColKey = _this.drag.dragTarget && _this.drag.dragTarget.getAttribute('data-col-key');
var dragColFixed = _this.drag.dragTarget && _this.drag.dragTarget.getAttribute('data-th-fixed');
var currColKey = target.getAttribute("data-col-key");
var currColFixed = target.getAttribute("data-th-fixed");
if (dragColFixed !== currColFixed) return; //固定列和非固定列之间不能拖拽换顺序
if (!currColKey || currColKey === dragColKey) return; //拖放在同一个th目标上时则结束
if (target.nodeName.toUpperCase() === "TH") {
// 显示交换的插入点
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
}
};
_this.onDragEnd = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var _this$drag2 = _this.drag,
enterTarget = _this$drag2.enterTarget,
dragTarget = _this$drag2.dragTarget;
enterTarget && enterTarget.setAttribute("style", ""); //清除进入目标th的插入点
event.preventDefault();
event.stopPropagation();
//清除抓取目标的副本
document.getElementById(_this._table_none_cont_id).innerHTML = "";
if (!_this.props.onDragEnd) return;
var dragColKey = dragTarget && dragTarget.getAttribute('data-col-key');
var dropColKey = enterTarget && enterTarget.getAttribute("data-col-key");
var dragSourceColumn = _this.props.rows[0].find(function (da) {
return da.key == dragColKey;
}); //抓取来源列定义
var dragTargetColumn = _this.props.rows[0].find(function (da) {
return da.key == dropColKey;
}); //放置目标列定义
if (!dragTargetColumn) return;
if (dragSourceColumn.fixed !== dragTargetColumn.fixed) return; //固定列和非固定列之间不能拖拽换顺序
if (!dropColKey || dropColKey == dragColKey) return;
_this.props.onDragEnd(event, { dragSource: dragSourceColumn, dragTarget: dragTargetColumn });
};
_this.onDragLeave = function (e) {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
var dragColKey = _this.drag.dragTarget && _this.drag.dragTarget.getAttribute('data-col-key');
var currColKey = target.getAttribute("data-col-key");
if (!currColKey || currColKey === dragColKey) return;
if (target.nodeName.toUpperCase() === "TH") {
// 清除交换的插入点
target.setAttribute("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: (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去显示
});
//数值输入
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 "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: _this.handlerFilterChange //输入框回调
, onFilterClear: _this.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: _this.handlerFilterChange //输入框回调
, onFilterClear: _this.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: _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:
//不匹配类型默认文本输入,注意需要一个空格占位以撑开div
return _react2["default"].createElement("div", { dangerouslySetInnerHTML: { __html: ' ' } });
}
};
_this.onCopy = function (data, index, event) {
if (_this.props.onCopy) {
_this.props.onCopy(_extends(data, { col: index }), event);
}
};
_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 = {};
_this.isIE = !!window.ActiveXObject || "ActiveXObject" in window;
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();
};
//----交换列头顺序时抓起的副本---begin
//----交换列头顺序时抓起的副本---end
TableHeader.prototype.componentDidMount = function componentDidMount() {
this.createTableNone(); // 交换列头时用到的副本-创建
};
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
this.destroyTableNone(); // 交换列头时用到的副本-销毁
this.fixedTable = null;
if (!this.table) return;
var _props = this.props,
dragborder = _props.dragborder,
draggable = _props.draggable;
dragborder && this.dragBorderEvent().off();
draggable && this.dragAbleEvent().off();
// 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 _props2 = this.props,
clsPrefix = _props2.clsPrefix,
contentTable = _props2.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.thDragGaps = tableDome.getElementsByClassName(clsPrefix + "-thead-th-drag-gap") || []; //拖拽列宽的全部抓手
table.tableHeaderCols = contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-header") && contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-header").getElementsByTagName("col");
table.tableBody = contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-body") && contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-body");
table.tableBodyCols = contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-body") && contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-body").getElementsByTagName("col");
table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
table.fixedLeftHeaderTable = contentTable.querySelector("." + prefix + "-table-fixed-left ." + prefix + "-table-header");
table.fixedRightHeaderTable = contentTable.querySelector("." + prefix + "-table-fixed-right ." + prefix + "-table-header");
table.contentTableHeader = contentTable.querySelector("." + prefix + "-table-scroll ." + prefix + "-table-header");
table.fixedLeftBodyTable = contentTable.querySelectorAll("." + prefix + "-table-fixed-left ." + prefix + "-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("." + prefix + "-table-fixed-right ." + prefix + "-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("." + prefix + "-table-scroll ." + prefix + "-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') || [];
}
//维护表格全部的dom元素
this.table = table;
/*
if(!this.props.dragborder)return;
if(document.getElementById("u-table-drag-thead-" + this.theadKey)){
this.fixedTable = {};
let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
let siblingDom = _fixedParentContext.parentNode.nextElementSibling;
if (siblingDom) {
let fixedTable = siblingDom.querySelector("table");
// this.fixedTable.table = fixedTable //没有用到
this.fixedTable.cols = fixedTable&&fixedTable.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
}
}
*/
};
/**
* 事件初始化
*/
TableHeader.prototype.initEvent = function initEvent() {
var _props3 = this.props,
dragborder = _props3.dragborder,
draggable = _props3.draggable,
rows = _props3.rows;
// 当传入的 columns 为空时，不绑定拖拽事件
if (Object.prototype.toString.call(rows) === '[object Array]' && rows.length === 0) {
return;
}
// if(!this.event){ //避免多次绑定问题。
// this.event = true;
this.dragBorderEvent().off(); //拖拽列宽事件-清理
if (dragborder) {
this.dragBorderEvent().on(); //交换列事件-绑定
}
this.dragAbleEvent().off(); //交换列事件-清理
if (draggable) {
this.dragAbleEvent().on(); //交换列事件-绑定
}
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body);
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) {
if (this.isIE && !trs[0]) return;
for (var index = 0; index < trs.length; index++) {
action(trs[index]);
}
}
};
/**
* 拖拽列宽事件的监听
*/
TableHeader.prototype.dragBorderEvent = function dragBorderEvent() {
var _this3 = this;
if (!this.table || !this.table.thDragGaps) return { off: function off() {}, on: function on() {} };
/* 事件监听不应该渲染到body上性能损耗很大 by zhuzj
this.eventListen([{key:'mouseup', fun:this.onTrMouseUp}],'',document.body);
this.eventListen([{key:'mousemove', fun:this.onTrMouseMove}],'',document.body);
*/
var events = [
// {key:'mousedown', fun:this.onTrMouseDown},
{ key: 'mousedown', fun: this.onDragMouseDown }, //拖拽列宽度-尺标方式
{ key: 'mouseup', fun: this.onTrMouseUp }];
return {
off: function off() {
//清理事件
_this3.doEventList(_this3.table.thDragGaps, function (elem) {
_this3.eventListen(events, 'remove', elem);
});
},
on: function on() {
//绑定事件
_this3.doEventList(_this3.table.thDragGaps, function (elem) {
_this3.eventListen(events, '', elem); //表示把事件添加到元素上
});
}
};
};
// 将多个事件绑定到dom元素上
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
if (!this.table) return;
if (!eventSource) {
console.log("Please set the attributes of column !");
return;
}
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
*/
/*
onTrMouseDown = (e) => {
const { eventNoStop } = this.props;
!eventNoStop && Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props;
// let currentElement = this.getOnLineObject(targetEvent);
let currentElement = this.getTargetToType(targetEvent);
if(!currentElement)return;
let type = currentElement.getAttribute('data-type');
const fixedType = currentElement.getAttribute('data-th-fixed');
if(!this.props.dragborder && !this.props.draggable)return;
if(type == 'online' && this.props.dragborder){
// if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable',false);//添加交换列效果
let currentIndex = -1;
let defaultWidth = currentElement.getAttribute("data-th-width");
this.drag.option = "border";//拖拽操作
if(columnsChildrenList){
let columnKey = currentElement.getAttribute("data-line-key");
if(columnKey){
currentIndex = columnsChildrenList.findIndex(da=> (da.key && da.key.toLowerCase()) === columnKey.toLowerCase());
}
}
if(currentIndex < 0){
console.log('Key must be set for column!')
return;
}
let currentObj = this.table.cols[currentIndex];
this.drag.currIndex = currentIndex;
this.drag.oldLeft = event.clientX;
this.drag.currentLeft = event.clientX;
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);
if(!this.tableOldWidth){
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
}
// if(!this.lastColumWidth){
const contentT = this.table.tableHeaderCols || this.table.cols ;
this.lastColumWidth = parseInt(contentT[contentT.length-1].style.width);
// console.log('begin--lastColumnWidth',this.lastColumWidth);
// }
this.drag.contentTableCWidth = this.table.contentTableHeader.clientWidth;
this.drag.contentTableSWidth = this.table.contentTableHeader.scrollWidth;
if(fixedType) {
const contentTablePar = this.table.contentTableHeader.parentNode;
if(contentTablePar) {
const originL = parseInt(contentTablePar.style.marginLeft);
const originR = parseInt(contentTablePar.style.marginRight);
// 内容区表格marginLef
this.drag.contentTableML = originL;
this.drag.contentTableMR = originR;
}
}
this.drag.fixedType = fixedType;
// add by gx
// if (fixedType === 'left' && this.table.fixedRightBodyTable) {
// this.drag.fixedRightBodyTableLeft = this.table.fixedRightBodyTable.getBoundingClientRect().left
// } else {
// this.drag.fixedRightBodyTableLeft = null
// }
}else if(type != 'online' && this.props.draggable){
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
let th = this.getTargetToType(targetEvent);
th.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = th;
let currentIndex = parseInt(th.getAttribute("data-line-index"));
this.drag.currIndex = currentIndex;
}else{
// console.log("onTrMouseDown dragborder or draggable is all false !");
return ;
}
};
*/
/**
* 根据当前节点查找到有data-type类型的容器返回。
* @memberof TableHeader
*/
/**
* 判断当前的target 是否是 th，如果不是，直接递归查找。
* @memberof TableHeader
*/
/**
* 调整列宽的move事件
* @memberof TableHeader
* @deprecated
*/
/**
* 调整列宽的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
*/
/*
optTableMargin =(table,scrollbarWidth)=>{
if(table){
table.style.marginBottom = scrollbarWidth + "px"
}
}
optTableScroll = (table,overflow ={})=>{
if(table){
const innerTable = table.querySelector('.u-table-body-inner');
if(innerTable){
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行，//暂时注释，还原
// if (overflow.x) {
// const 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);
// overflow.x && (innerTable.style.overflowX = overflow.x);
}
}
}
*/
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
TableHeader.prototype.dragAbleEvent = function dragAbleEvent() {
var _this4 = this;
if (!this.table || !this.table.tr) return { off: function off() {}, on: function on() {} };
var events = [{ key: 'mousedown', fun: this.dragAbleMouseDown }, //用户开始按住列头元素时触发
{ 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 }];
return {
off: function off() {
//关闭事件
_this4.eventListen(events, 'remove', _this4.table.tr[0]);
},
on: function on() {
//开启事件
if (_this4.props.draggable) {
_this4.eventListen(events, '', _this4.table.tr[0]); //表示把事件添加到th元素上
}
}
};
};
/**
* 按下调整交换列的事件
*/
/**
* 开始调整交换列的事件
*/
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
//注意：列不多的情况下，如果最后一列：实际宽度-100，被填充宽度-300，则与其前面列交换后宽度只是实际宽度交换，填充宽度不会交换
/**
* 获取当前th上的对象数据
* @param {*} e
* @returns
* @memberof TableHeader
*/
/*
getCurrentEventData(th){
if(!th){
console.log(" event target is not th ! ");
return null;
}
let key = th.getAttribute('data-line-key');
let data = this.props.rows[0].find(da=>da.key == key);
if(data){
return data;
}else{
console.log(" getCurrentEventData data is null ");
return null;
}
}
*/
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @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 _this5 = this;
var _props4 = this.props,
clsPrefix = _props4.clsPrefix,
rowStyle = _props4.rowStyle,
draggable = _props4.draggable,
tableUid = _props4.tableUid,
dragborder = _props4.dragborder,
rows = _props4.rows,
filterable = _props4.filterable,
fixed = _props4.fixed,
columnsChildrenList = _props4.columnsChildrenList,
columnManager = _props4.columnManager;
var attr = dragborder ? { id: prefix + "-table-drag-thead-" + this.theadKey } : {};
var showColumns = columnManager.showLeafColumns(fixed);
return _react2["default"].createElement(
"thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
return _this5._thead = _thead;
} }),
rows.map(function (row, index) {
var leftFixedColIndex = 0,
rightFixedColIndex = 0,
centerColIndex = 0;
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;
/*
let fixedStyle = "";
//主表格下、固定列或者是过滤行中含有固定列时添加该属性
if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) {
fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`;
}
*/
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 colKey = da.key || da.dataIndex || index + '-' + columIndex; //避免key为undefined
if (filterable && index == rows.length - 1) {
da.children = _this5.filterRenderType(da["filtertype"], da.dataIndex, columIndex);
if (da.key === undefined) {
colKey = colKey + '-filterable';