894 lines
34 KiB
JavaScript
894 lines
34 KiB
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 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));
|
||
|
||
_this.getOnLineObject = function (_element) {
|
||
var type = _element.getAttribute('data-type'),
|
||
elementObj = null;
|
||
if (!type) {
|
||
var element = _element.parentElement || parentNode; //兼容写法。
|
||
if (element.getAttribute('data-type')) {
|
||
elementObj = element;
|
||
}
|
||
} else {
|
||
elementObj = _element;
|
||
}
|
||
return elementObj;
|
||
};
|
||
|
||
_this.onTrMouseDown = function (e) {
|
||
_utils.Event.stopPropagation(e);
|
||
var event = _utils.Event.getEvent(e),
|
||
targetEvent = _utils.Event.getTarget(event);
|
||
var _this$props = _this.props,
|
||
clsPrefix = _this$props.clsPrefix,
|
||
contentTable = _this$props.contentTable,
|
||
lastShowIndex = _this$props.lastShowIndex;
|
||
// let currentElement = this.getOnLineObject(targetEvent);
|
||
|
||
var currentElement = _this.getTargetToType(targetEvent);
|
||
if (!currentElement) return;
|
||
var type = currentElement.getAttribute('data-type');
|
||
if (!_this.props.dragborder && !_this.props.draggable) return;
|
||
if (type == 'online' && _this.props.dragborder) {
|
||
if (!_this.props.dragborder) return;
|
||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
|
||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||
var currentObj = _this.table.cols[currentIndex];
|
||
_this.drag.option = "border"; //拖拽操作
|
||
_this.drag.currIndex = currentIndex;
|
||
_this.drag.oldLeft = event.x;
|
||
_this.drag.oldWidth = parseInt(currentObj.style.width);
|
||
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
|
||
// console.log(" ----- ",this.drag);
|
||
if (!_this.tableOldWidth) {
|
||
_this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth();
|
||
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
|
||
}
|
||
if (!_this.lastColumWidth) {
|
||
_this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
|
||
}
|
||
} else if (type != 'online' && _this.props.draggable) {
|
||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||
if (!_this.props.draggable) return;
|
||
var th = _this.getTargetToType(targetEvent);
|
||
th.setAttribute('draggable', true); //添加交换列效果
|
||
_this.drag.option = 'dragAble';
|
||
_this.currentDome = th;
|
||
var _currentIndex = parseInt(th.getAttribute("data-line-index"));
|
||
_this.drag.currIndex = _currentIndex;
|
||
} else {
|
||
// console.log("onTrMouseDown dragborder or draggable is all false !");
|
||
return;
|
||
}
|
||
};
|
||
|
||
_this.getTableWidth = function () {
|
||
var tableWidth = 0,
|
||
offWidth = 0; //this.table.cols.length;
|
||
for (var index = 0; index < _this.table.cols.length; index++) {
|
||
var da = _this.table.cols[index];
|
||
tableWidth += parseInt(da.style.width);
|
||
}
|
||
return tableWidth - offWidth;
|
||
};
|
||
|
||
_this.getTargetToType = function (targetEvent) {
|
||
var tag = targetEvent;
|
||
if (targetEvent && !targetEvent.getAttribute("data-type")) {
|
||
tag = _this.getTargetToType(targetEvent.parentElement);
|
||
}
|
||
return tag;
|
||
};
|
||
|
||
_this.getTargetToTh = function (targetEvent) {
|
||
var th = targetEvent;
|
||
if (targetEvent.nodeName.toUpperCase() != "TH") {
|
||
th = _this.getThDome(targetEvent);
|
||
}
|
||
console.log(" getTargetToTh: ", th);
|
||
return th;
|
||
};
|
||
|
||
_this.onTrMouseMove = function (e) {
|
||
if (!_this.props.dragborder && !_this.props.draggable) return;
|
||
var _this$props2 = _this.props,
|
||
clsPrefix = _this$props2.clsPrefix,
|
||
dragborder = _this$props2.dragborder,
|
||
contentDomWidth = _this$props2.contentDomWidth,
|
||
scrollbarWidth = _this$props2.scrollbarWidth,
|
||
contentTable = _this$props2.contentTable,
|
||
headerScroll = _this$props2.headerScroll,
|
||
lastShowIndex = _this$props2.lastShowIndex,
|
||
onDraggingBorder = _this$props2.onDraggingBorder;
|
||
|
||
_utils.Event.stopPropagation(e);
|
||
var event = _utils.Event.getEvent(e);
|
||
if (_this.props.dragborder && _this.drag.option == "border") {
|
||
//移动改变宽度
|
||
var currentCols = _this.table.cols[_this.drag.currIndex];
|
||
var diff = event.x - _this.drag.oldLeft;
|
||
var newWidth = _this.drag.oldWidth + diff;
|
||
_this.drag.newWidth = newWidth > 0 ? newWidth : _this.minWidth;
|
||
// if(newWidth > this.drag.minWidth){
|
||
if (newWidth > _this.minWidth) {
|
||
currentCols.style.width = newWidth + 'px';
|
||
//hao 支持固定表头拖拽 修改表体的width
|
||
if (_this.fixedTable.cols) {
|
||
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
|
||
}
|
||
|
||
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
|
||
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
|
||
// if(this.table.innerTableBody){//TODO 后续需要处理此处
|
||
// this.table.innerTableBody.style.width = newTableWidth+'px';
|
||
|
||
// }
|
||
|
||
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
|
||
if (newDiff > 0) {
|
||
//缩小
|
||
var lastWidth = _this.lastColumWidth + newDiff;
|
||
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||
}
|
||
|
||
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
|
||
//表头滚动条处理
|
||
if (headerScroll) {
|
||
if (showScroll < 0) {
|
||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||
_this.table.contentTableHeader.style.overflowX = 'scroll';
|
||
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
|
||
_this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
|
||
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
|
||
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
||
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
|
||
} else {
|
||
_this.table.contentTableHeader.style.overflowX = 'hidden';
|
||
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
|
||
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
|
||
}
|
||
} else {
|
||
if (showScroll < 0) {
|
||
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
|
||
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
|
||
} else {
|
||
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
|
||
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
|
||
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
|
||
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
|
||
}
|
||
}
|
||
} else {
|
||
_this.drag.newWidth = _this.minWidth;
|
||
}
|
||
} else if (_this.props.draggable && _this.drag.option == "draggable") {
|
||
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
|
||
} else {}
|
||
// console.log("onTrMouseMove dragborder or draggable is all false !");
|
||
|
||
// 增加拖拽列宽动作的回调函数
|
||
_this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this.drag.newWidth);
|
||
};
|
||
|
||
_this.onTrMouseUp = function (e) {
|
||
var event = _utils.Event.getEvent(e);
|
||
var width = _this.drag.newWidth;
|
||
_this.mouseClear();
|
||
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
|
||
};
|
||
|
||
_this.clearThsDr = function () {
|
||
var ths = _this.table.ths;
|
||
for (var index = 0; index < ths.length; index++) {
|
||
ths[index].setAttribute('draggable', false); //去掉交换列效果
|
||
}
|
||
};
|
||
|
||
_this.bodyonLineMouseUp = function (events, type) {
|
||
if (!_this.drag || !_this.drag.option) return;
|
||
_this.mouseClear();
|
||
};
|
||
|
||
_this.optTableMargin = function (table, scrollbarWidth) {
|
||
if (table) {
|
||
table.style.marginBottom = scrollbarWidth + "px";
|
||
}
|
||
};
|
||
|
||
_this.optTableScroll = function (table) {
|
||
var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||
|
||
if (table) {
|
||
var innerTable = table.querySelector('.u-table-body-inner');
|
||
if (innerTable) {
|
||
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
|
||
// overflow.x && (innerTable.style.overflowX = overflow.x);
|
||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||
}
|
||
}
|
||
};
|
||
|
||
_this.onDragStart = function (e) {
|
||
if (!_this.props.draggable) return;
|
||
if (_this.drag && _this.drag.option != 'dragAble') {
|
||
return;
|
||
}
|
||
var event = _utils.Event.getEvent(e),
|
||
|
||
// target = Event.getTarget(event);
|
||
target = _this.getTargetToTh(_utils.Event.getTarget(event));
|
||
var currentIndex = parseInt(target.getAttribute("data-line-index"));
|
||
var currentKey = target.getAttribute('data-line-key');
|
||
|
||
if (event.dataTransfer.setDragImage) {
|
||
var crt = target.cloneNode(true);
|
||
crt.style.backgroundColor = "#ebecf0";
|
||
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||
crt.style.height = "40px";
|
||
// crt.style['line-height'] = "40px";
|
||
// document.body.appendChild(crt);
|
||
document.getElementById(_this._table_none_cont_id).appendChild(crt);
|
||
event.dataTransfer.setDragImage(crt, 0, 0);
|
||
}
|
||
|
||
event.dataTransfer.effectAllowed = "move";
|
||
event.dataTransfer.setData("Text", currentKey);
|
||
_this.currentObj = _this.props.rows[0][currentIndex];
|
||
};
|
||
|
||
_this.onDragOver = function (e) {
|
||
var event = _utils.Event.getEvent(e);
|
||
event.preventDefault();
|
||
};
|
||
|
||
_this.onDrop = function (e) {
|
||
if (!_this.props.draggable) return;
|
||
if (_this.drag && _this.drag.option != 'dragAble') {
|
||
return;
|
||
}
|
||
var event = _utils.Event.getEvent(e),
|
||
target = _utils.Event.getTarget(event);
|
||
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||
};
|
||
|
||
_this.onDragEnter = function (e) {
|
||
var event = _utils.Event.getEvent(e),
|
||
target = _utils.Event.getTarget(event);
|
||
_this._dragCurrent = target;
|
||
var currentIndex = target.getAttribute("data-line-index");
|
||
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
|
||
if (target.nodeName.toUpperCase() === "TH") {
|
||
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
|
||
// target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||
}
|
||
};
|
||
|
||
_this.onDragEnd = function (e) {
|
||
var event = _utils.Event.getEvent(e),
|
||
target = _utils.Event.getTarget(event);
|
||
_this._dragCurrent.setAttribute("style", "");
|
||
// this._dragCurrent.style = "";
|
||
document.getElementById(_this._table_none_cont_id).innerHTML = "";
|
||
|
||
var data = _this.getCurrentEventData(_this._dragCurrent);
|
||
if (!data) return;
|
||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||
if (!_this.props.onDrop) return;
|
||
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
|
||
};
|
||
|
||
_this.onDragLeave = function (e) {
|
||
var event = _utils.Event.getEvent(e),
|
||
target = _utils.Event.getTarget(event);
|
||
var currentIndex = target.getAttribute("data-line-index");
|
||
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
|
||
if (target.nodeName.toUpperCase() === "TH") {
|
||
target.setAttribute("style", "");
|
||
// this._dragCurrent.style = "";
|
||
}
|
||
};
|
||
|
||
_this.handlerFilterChange = function (key, value, condition) {
|
||
var onFilterChange = _this.props.onFilterChange;
|
||
|
||
if (onFilterChange) {
|
||
onFilterChange(key, value, condition);
|
||
}
|
||
};
|
||
|
||
_this.handlerFilterClear = function (field) {
|
||
var onFilterClear = _this.props.onFilterClear;
|
||
|
||
if (onFilterClear) {
|
||
onFilterClear(field);
|
||
}
|
||
};
|
||
|
||
_this.filterRenderType = function (type, dataIndex, index) {
|
||
var _this$props3 = _this.props,
|
||
clsPrefix = _this$props3.clsPrefix,
|
||
rows = _this$props3.rows,
|
||
filterDelay = _this$props3.filterDelay,
|
||
locale = _this$props3.locale;
|
||
|
||
switch (type) {
|
||
//文本输入
|
||
case "text":
|
||
return _react2["default"].createElement(_FilterType2["default"], {
|
||
locale: locale //多语
|
||
, rendertype: type //渲染类型
|
||
, clsPrefix: clsPrefix //css前缀
|
||
, className: clsPrefix + " filter-text",
|
||
dataIndex: dataIndex //字段
|
||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||
});
|
||
//数值输入
|
||
case "number":
|
||
return _react2["default"].createElement(_FilterType2["default"], {
|
||
locale: locale,
|
||
rendertype: type,
|
||
clsPrefix: clsPrefix,
|
||
className: clsPrefix + " filter-text",
|
||
dataIndex: dataIndex //字段
|
||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动
|
||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||
, filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性
|
||
});
|
||
//下拉框选择
|
||
case "dropdown":
|
||
var selectDataSource = [];
|
||
//处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
|
||
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
||
var hash = {};
|
||
//处理下拉重复对象组装dropdown
|
||
selectDataSource = Array.from(rows[1][0].datasource, function (x) {
|
||
return {
|
||
key: x[dataIndex],
|
||
value: x[dataIndex]
|
||
};
|
||
});
|
||
selectDataSource = selectDataSource.reduceRight(function (item, next) {
|
||
hash[next.key] ? "" : hash[next.key] = true && item.push(next);
|
||
return item;
|
||
}, []);
|
||
} else {
|
||
//从外部数据源加载系统数据
|
||
selectDataSource = rows[1][index]["filterdropdowndata"];
|
||
}
|
||
return _react2["default"].createElement(_FilterType2["default"], {
|
||
locale: locale,
|
||
rendertype: type,
|
||
className: clsPrefix + " filter-dropdown",
|
||
data: selectDataSource,
|
||
notFoundContent: "Loading" //没有数据显示的默认字
|
||
, dataIndex: dataIndex //字段
|
||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||
});
|
||
//日期
|
||
case "date":
|
||
return _react2["default"].createElement(_FilterType2["default"], {
|
||
locale: locale,
|
||
rendertype: type,
|
||
className: "filter-date",
|
||
onClick: function onClick() {},
|
||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||
dataIndex: dataIndex //字段
|
||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||
});
|
||
//日期范围
|
||
case "daterange":
|
||
return _react2["default"].createElement(_FilterType2["default"], {
|
||
locale: locale,
|
||
rendertype: type,
|
||
className: "filter-date",
|
||
onClick: function onClick() {},
|
||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||
dataIndex: dataIndex //字段
|
||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||
});
|
||
default:
|
||
//不匹配类型默认文本输入
|
||
return _react2["default"].createElement("div", null);
|
||
}
|
||
};
|
||
|
||
_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.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 <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 _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.textAlign) {
|
||
thClassName += " text-" + da.textAlign + " ";
|
||
}
|
||
delete da.textAlign;
|
||
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.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
|
||
};
|
||
|
||
|
||
TableHeader.propTypes = propTypes;
|
||
exports["default"] = TableHeader;
|
||
module.exports = exports["default"]; |