JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

v 2.0.13

This commit is contained in:
jonyshi 2019-04-23 18:47:27 +08:00
parent f8f983f12c b3cdf240af
commit f8044781b0
16 changed files with 46382 additions and 15224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/Table.css
View File

@ -37,6 +37,8 @@
color: #1565c0; }
.u-table thead tr:last-child {
border-bottom: 1px solid #C1C7D0; }
.u-table thead tr > th:last-child {
border-right: none; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
@ -329,6 +331,7 @@
color: #505F79; }
.u-table-filter-column-pop-cont-item {
margin-top: 8px;
font-size: 12px;
cursor: pointer; }
.u-table-filter-column-pop-cont-item .u-checkbox {
margin: 0px; }
@ -613,3 +616,7 @@
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.u-table-drag-hidden-cont {
position: absolute;
top: -1000px; }

465
build/TableHeader.js
View File

@ -42,6 +42,13 @@ var propTypes = {
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);
@ -50,44 +57,76 @@ var TableHeader = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.optTableMargin = function (table, scrollbarWidth) {
if (table) {
table.style.marginBottom = scrollbarWidth + "px";
_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.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) {
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
};
_this.onLineMouseMove = function (e) {
_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,
dragborder = _this$props.dragborder,
contentDomWidth = _this$props.contentDomWidth,
scrollbarWidth = _this$props.scrollbarWidth,
contentTable = _this$props.contentTable,
headerScroll = _this$props.headerScroll;
contentTable = _this$props.contentTable;
var currentElement = _this.getOnLineObject(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);
} else if (type != 'online' && _this.props.draggable) {
if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
targetEvent.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
var _currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
_this.drag.currIndex = _currentIndex;
} else {
// console.log("onTrMouseDown dragborder or draggable is all false !");
return;
}
};
_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;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.dragborder) return;
if (_this.drag.option != "border") {
return false;
}
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;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
@ -97,7 +136,10 @@ var TableHeader = function (_Component) {
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
if (_this.table.innerTableBody) {
//TODO 后续需要处理此处
_this.table.innerTableBody.style.width = newTableWidth;
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
@ -129,76 +171,75 @@ var TableHeader = function (_Component) {
}
}
}
} 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.onLineMouseDown = function (e) {
_utils.Event.stopPropagation(e);
_this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e);
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
contentTable = _this$props2.contentTable;
if (!_this.props.dragborder) return;
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
var defaultWidth = _utils.Event.getTarget(event).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);
};
_this.onLineMouseUp = function (event) {
var width = _this.drag.newWidth;
_this.clearDragBorder(event);
_this.mouseClear();
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
_this.bodyonLineMouseMove = function (event) {
_this.clearDragBorder(event);
_this.clearThsDr = function () {
var ths = _this.table.ths;
for (var index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable', false); //去掉交换列效果
}
};
_this.dragAbleMouseDown = function (e) {
// Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = event.target;
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th
_this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
_this.addDragAbleEvent(); //添加拖拽交换列的事件
_this.bodyonLineMouseUp = function (events, type) {
if (!_this.drag || !_this.drag.option) return;
_this.mouseClear();
};
_this.dragAbleMouseUp = function (e) {
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
_this.removeDragAbleEvent();
_this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th
//拖拽交换列事件
_this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上
_this.initEvent();
_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) {
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
};
_this.onDragStart = function (e) {
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var event = _utils.Event.getEvent(e),
target = _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);
}
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
_this.currentObj = _this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
_this.onDragOver = function (e) {
@ -207,17 +248,52 @@ var TableHeader = function (_Component) {
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
if (_this.drag && _this.drag.option != 'dragAble') {
return;
}
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e);
};
_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:2px dashed rgba(5,0,0,0.25)");
// 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;
@ -353,68 +429,18 @@ var TableHeader = function (_Component) {
return _this;
}
/**
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
ths = _table.ths,
cols = _table.cols;
for (var index = 0; index < ths.length; index++) {
var element = ths[index]; //.getAttribute('data-type');
if (!element.getAttribute('data-th-fixed')) {
var colLine = null;
if (element.children.length === 0) {
colLine = element;
} else if (element.children.length > 0) {
colLine = element.lastElementChild;
} else if (element.children.length === 1) {
colLine = element.children[0];
}
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
for (var i = 0; i < events.length; i++) {
var _event = events[i];
var _dataSource = eventSource ? element : colLine;
if (type === "remove") {
_utils.EventUtil.removeHandler(_dataSource, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(_dataSource, _event.key, _event.fun);
}
}
}
}
};
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type == "remove") {
_utils.EventUtil.removeHandler(document.body, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(document.body, _event.key, _event.fun);
}
}
};
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() {
if (!this.table) return;
if (this.props.draggable) {
@ -423,44 +449,7 @@ var TableHeader = function (_Component) {
if (this.props.dragborder) {
this.removeDragBorderEvent();
}
};
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initEvent = function initEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
if (this.props.dragborder) {
this.thEventListen(events, '', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]);
}
if (!this.props.draggable) return;
//拖拽交换列事件
this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到th元素上
};
/**
* 移除当前全局事件对象
* @memberof TableHeader
*/
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上
this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], 'remove', this.table.tr[0]);
};
/**
@ -474,13 +463,13 @@ var TableHeader = function (_Component) {
var contentTable = this.props.contentTable;
if (!this.props.dragborder && !this.props.draggable) return;
// let el = ReactDOM.findDOMNode(this);
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.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
@ -505,15 +494,59 @@ var TableHeader = function (_Component) {
}
}
};
/**
*相关滚动条联动操作
*
* @memberof TableHeader
* 事件初始化
*/
TableHeader.prototype.initEvent = function initEvent() {
this.dragBorderEventInit(); //列宽
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
};
/**
* 调整列宽的move事件
* 拖拽列宽事件的监听
*/
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;
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
*/
@ -525,17 +558,18 @@ var TableHeader = function (_Component) {
/**
* 调整列宽的up事件
* 调整列宽的move事件
* @memberof TableHeader
*/
/**
* 调整列宽到区域以外的up事件
* 调整列宽的up事件
* @memberof TableHeader
*/
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
TableHeader.prototype.mouseClear = function mouseClear() {
if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
@ -544,32 +578,36 @@ var TableHeader = function (_Component) {
this.drag = {
option: ""
};
if (this.props.draggable) {
this.removeDragAbleEvent();
}
this.clearThsDr();
};
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
/**
* 调整交换列up事件
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
/**
*相关滚动条联动操作
*
* @memberof TableHeader
*/
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
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 }];
this.thEventListen(events, '', true);
{ 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元素上
};
/**
@ -578,8 +616,8 @@ var TableHeader = function (_Component) {
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 }];
this.thEventListen(events, 'remove', true);
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]);
};
/**
@ -599,9 +637,7 @@ var TableHeader = function (_Component) {
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var th = this.getThDome(event.target);
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) {
if (!th) {
console.log(" event target is not th ! ");
return null;
@ -617,26 +653,6 @@ var TableHeader = function (_Component) {
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-----
/**
@ -675,9 +691,10 @@ var TableHeader = function (_Component) {
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' : '' },
{ key: index, style: rowStyle, aaaa: true, 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;
@ -719,22 +736,20 @@ var TableHeader = function (_Component) {
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 }),
_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 ? _react2["default"].createElement(
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", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width })
_react2["default"].createElement("div", { className: "online" })
) : ""
);
} else {

38
build/lib/dragColumn.js
View File

@ -4,10 +4,10 @@ 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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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; };
exports["default"] = dragColumn;
var _react = require('react');
@ -28,7 +28,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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 cloneDeep = require('lodash.clonedeep');
/**
* 参数: 列拖拽
* @param {*} Table
@ -66,23 +65,23 @@ function dragColumn(Table) {
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({
columns: cloneDeep(columns)
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
@ -106,14 +105,6 @@ function dragColumn(Table) {
}
};
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
return obj;
}
var resultData = {};
return this.recursion(obj, resultData);
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
@ -150,7 +141,6 @@ function dragColumn(Table) {
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
var key = new Date().getTime();
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
@ -161,8 +151,6 @@ function dragColumn(Table) {
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
// dragborder={false}
, dragborderKey: key
}));
};

5
build/lib/filterColumn.js
View File

@ -236,12 +236,15 @@ function filterColumn(Table, Popover) {
key: da.key + "_" + i,
className: prefixCls + "-pop-cont-item"
},
_react2["default"].createElement(_beeCheckbox2["default"], paramObj),
_react2["default"].createElement(
_beeCheckbox2["default"],
paramObj,
_react2["default"].createElement(
"span",
null,
da.title
)
)
);
});
};

184
build/lib/newMultiSelect.js
View File

@ -1,191 +1,17 @@
"use strict";
'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; };
exports["default"] = newMultiSelect;
var _react = require("react");
var _multiSelect = require('./multiSelect');
var _react2 = _interopRequireDefault(_react);
var _util = require("./util");
var _multiSelect2 = _interopRequireDefault(_multiSelect);
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); }
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
function newMultiSelect(Table, Checkbox) {
var _class, _temp, _initialiseProps;
return _temp = _class = function (_Component) {
_inherits(NewMultiSelect, _Component);
function NewMultiSelect(props) {
_classCallCheck(this, NewMultiSelect);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_initialiseProps.call(_this);
var checkedAll = _this.setChecked(props.data);
_this.state = {
checkedAll: checkedAll,
data: (0, _util.ObjectAssign)(props.data)
};
return _this;
}
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.data != nextProps.data) {
this.setState({
data: (0, _util.ObjectAssign)(nextProps.data),
checkedAll: this.setChecked(nextProps.data)
});
}
};
NewMultiSelect.prototype.setChecked = function setChecked(data) {
var allCheck = true;
if (data) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var da = _step.value;
if (!da._checked) {
allCheck = false;
break;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"]) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return allCheck;
};
NewMultiSelect.prototype.render = function render() {
var columns = this.props.columns;
var data = this.state.data;
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
};
return NewMultiSelect;
}(_react.Component), _class.defaultProps = {
prefixCls: "u-table-mult-select"
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onAllCheckChange = function () {
var _state = _this2.state,
data = _state.data,
checkedAll = _state.checkedAll;
var selectList = [];
var check = checkedAll ? false : true;
data.forEach(function (item) {
item._checked = check;
if (item._checked) {
selectList.push(item);
}
});
_this2.setState({
checkedAll: check
});
_this2.props.getSelectedDataFunc(selectList);
};
this.handleClick = function () {};
this.onCheckboxChange = function (text, record, index) {
return function () {
var data = _this2.state.data;
var selectList = [];
record._checked = record._checked ? false : true;
var checkedAll = true;
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (!item._checked || item._checked == false) {
checkedAll = false;
break;
}
}
_this2.setState(_extends({}, _this2.state, {
checkedAll: checkedAll
}));
data.forEach(function (da) {
if (da._checked) {
selectList.push(da);
}
});
_this2.props.getSelectedDataFunc(selectList, record, index);
};
};
this.getDefaultColumns = function (columns) {
// let checkedAll = init?false:this.state.checkedAll;
var checkedAll = _this2.state.checkedAll;
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, {
className: "table-checkbox",
checked: checkedAll
// indeterminate={indeterminate_bool && !this.state.checkedAll}
, onChange: _this2.onAllCheckChange
}),
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";
return _react2["default"].createElement(Checkbox, _extends({
key: index,
className: "table-checkbox"
}, attr, {
checked: record._checked,
onClick: _this2.handleClick,
onChange: _this2.onCheckboxChange(text, record, index)
}));
}
}];
return _defaultColumns.concat(columns);
};
}, _temp;
return (0, _multiSelect2["default"])(Table, Checkbox);
}
module.exports = exports["default"];
module.exports = exports['default'];

2
demo/demolist/Demo0404.js
View File

@ -8,7 +8,7 @@
import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect";
import multiSelect from "../../src/lib/newMultiSelect";
import sort from "../../src/lib/sort";
const { Item } = Menu;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

19
dist/demo.css vendored
View File

@ -6917,10 +6917,10 @@ input.u-button[type="submit"] {
.u-checkbox {
display: inline-block;
position: relative;
margin: 0 8px;
margin-right: 24px;
height: 16px;
line-height: 16px;
font-size: 14px;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
outline: none;
@ -7410,11 +7410,12 @@ ul {
.u-select-disabled {
color: #909090; }
.u-select-disabled .u-select-selection {
background: #f7f7f7;
.u-select-disabled.u-select .u-select-selection {
background: #F7F9FB;
border-color: #DFE1E6;
cursor: not-allowed; }
.u-select-disabled .u-select-selection:hover, .u-select-disabled .u-select-selection:focus, .u-select-disabled .u-select-selection:active {
border-color: #d9d9d9;
border-color: #DFE1E6;
box-shadow: none; }
.u-select-disabled .u-select-selection-clear {
display: none;
@ -7748,7 +7749,7 @@ ul {
display: none; }
.u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:after, .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:hover:after {
color: #108ee9;
color: rgb(245, 60, 50);
display: inline-block; }
:root .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after {
@ -8295,6 +8296,8 @@ ul {
color: #1565c0; }
.u-table thead tr:last-child {
border-bottom: 1px solid #C1C7D0; }
.u-table thead tr > th:last-child {
border-right: none; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
@ -8877,6 +8880,10 @@ ul {
vertical-align: middle;
overflow: hidden; }
.u-table-drag-hidden-cont {
position: absolute;
top: -1000px; }
.selected {
background: #FFF7E7; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

59544
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.0.13-beta.2",
"version": "2.0.13",
"description": "Table ui component for react",
"keywords": [
"react",

8
src/Table.scss
View File

@ -79,7 +79,9 @@ $icon-color:#505F79;
tr:last-child{
border-bottom: 1px solid $table-th-bottom-border;
}
tr>th:last-child{
border-right: none;
}
}
tr {
// transition: all 0.3s ease;
@ -952,3 +954,7 @@ $icon-color:#505F79;
overflow: hidden;
}
}
.u-table-drag-hidden-cont{
position: absolute;
top:-1000px;
}

462
src/TableHeader.js
View File

@ -11,6 +11,14 @@ const propTypes = {
rows: PropTypes.array
};
function getDiv(id){
let div = document.createElement("div");
div.className = "u-table-drag-hidden-cont";
div.id = id;
return div;
}
class TableHeader extends Component {
constructor(props) {
super(props);
@ -28,64 +36,17 @@ class TableHeader extends Component {
contentWidthDiff: 0
};
/**
*
* 动态绑定th line 事件方法
* @param {*} events
* @param {*} type type 为false 为增加事件
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
thEventListen(events,type,eventSource){
let {ths,cols} = this.table;
for (let index = 0; index < ths.length; index++) {
const element = ths[index];//.getAttribute('data-type');
if(!element.getAttribute('data-th-fixed')){
let colLine = null;
if(element.children.length === 0){
colLine = element;
}else if(element.children.length > 0){
colLine = element.lastElementChild;
}else if(element.children.length === 1){
colLine = element.children[0];
}
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
for (let i = 0; i < events.length; i++) {
const _event = events[i];
let _dataSource = eventSource?element:colLine;
if(type === "remove"){
EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
}else{
EventUtil.addHandler(_dataSource,_event.key,_event.fun);
}
}
}
}
}
/**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
bodyEventListen(events,type){
for (let i = 0; i < events.length; i++) {
const _event = events[i];
if(type == "remove"){
EventUtil.removeHandler(document.body,_event.key,_event.fun);
}else{
EventUtil.addHandler(document.body,_event.key,_event.fun);
}
}
}
componentDidUpdate(){
this.initTable();
this.initEvent();
}
componentDidMount(){
let uid = "_table_uid_"+new Date().getTime();
this._table_none_cont_id = uid;
let div = getDiv(uid);
document.querySelector("body").appendChild(div);
}
componentWillUnmount(){
if(!this.table)return;
@ -95,46 +56,7 @@ class TableHeader extends Component {
if(this.props.dragborder){
this.removeDragBorderEvent();
}
}
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 初始化拖拽列宽的事件处理
* @returns
* @memberof TableHeader
*/
initEvent(){
let events = [
{key:'mouseup', fun:this.onLineMouseUp},
{key:'mousemove', fun:this.onLineMouseMove}
];
if(this.props.dragborder){
this.thEventListen(events,'',true);//表示把事件添加到th元素上
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
}
if(!this.props.draggable)return;
//拖拽交换列事件
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
}
/**
* 移除当前全局事件对象
* @memberof TableHeader
*/
removeDragBorderEvent(){
let events = [
{key:'mouseup', fun:this.onLineMouseUp},
{key:'mousemove', fun:this.onLineMouseMove}
];
this.thEventListen(events,'remove',true);//表示把事件添加到th元素上
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}],'remove');//表示把事件添加到竖线
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}],'remove');
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
}
/**
@ -145,13 +67,13 @@ class TableHeader extends Component {
initTable(){
const {contentTable} = this.props;
if(!this.props.dragborder && !this.props.draggable)return;
// let el = ReactDOM.findDOMNode(this);
let tableDome = this._thead.parentNode;
let 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.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@ -161,7 +83,6 @@ class TableHeader extends Component {
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;
@ -177,48 +98,130 @@ class TableHeader extends Component {
}
}
}
/**
* 事件初始化
*/
initEvent(){
this.dragBorderEventInit();//列宽
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
}
/**
* 拖拽列宽事件的监听
*/
dragBorderEventInit (){
if(!this.props.dragborder )return;
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
// {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
];
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}
/**
* 删除拖动改变列宽的事件监听
*/
removeDragBorderEvent(){
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
];
this.eventListen(events,'remove',this.table.tr[0]);
}
eventListen(events,type,eventSource){
if(!this.table)return;
let {tr} = this.table;
for (let i = 0; i < events.length; i++) {
const _event = events[i];
if(type === "remove"){
EventUtil.removeHandler(eventSource,_event.key,_event.fun);
}else{
EventUtil.addHandler(eventSource,_event.key,_event.fun);
}
}
}
/**
*相关滚动条联动操作
*
*根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
* @memberof TableHeader
*/
optTableMargin =(table,scrollbarWidth)=>{
if(table){
table.style.marginBottom = scrollbarWidth + "px"
getOnLineObject = (_element) =>{
let type = _element.getAttribute('data-type'),elementObj = null;
if(!type){
let element = _element.parentElement||parentNode;//兼容写法。
if(element.getAttribute('data-type')){
elementObj = element;
}
}else{
elementObj = _element;
}
return elementObj;
}
optTableScroll = (table,overflow ={})=>{
if(table){
const innerTable = table.querySelector('.u-table-body-inner');
if(innerTable){
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
onTrMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable } = this.props;
let currentElement = this.getOnLineObject(targetEvent);
if(!currentElement)return;
let 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);//添加交换列效果
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
let defaultWidth = currentElement.getAttribute("data-th-width");
let 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);
}else if(type != 'online' && this.props.draggable){
if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
targetEvent.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
this.drag.currIndex = currentIndex;
}else{
// console.log("onTrMouseDown dragborder or draggable is all false !");
return ;
}
}
}
};
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
onLineMouseMove = (e) => {
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.dragborder) return;
if(this.drag.option != "border"){
return false;
}
if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
@ -228,7 +231,9 @@ class TableHeader extends Component {
}
const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width
if(this.table.innerTableBody){//TODO 后续需要处理此处
this.table.innerTableBody.style.width = newTableWidth ;
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
@ -259,48 +264,27 @@ class TableHeader extends Component {
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
}
}
}
};
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
onLineMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
const { clsPrefix, contentTable } = this.props;
if (!this.props.dragborder) return;
let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
let defaultWidth = Event.getTarget(event).getAttribute("data-th-width");
let 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);
};
}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 !");
}
}
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
onLineMouseUp = (event) => {
onTrMouseUp = (e) => {
let event = Event.getEvent(e);
let width = this.drag.newWidth;
this.clearDragBorder(event);
this.mouseClear();
this.props.onDropBorder && this.props.onDropBorder(event,width);
};
/**
* 调整列宽到区域以外的up事件
*/
bodyonLineMouseMove = (event) => {
this.clearDragBorder(event);
};
clearDragBorder(){
mouseClear(){
if(!this.drag || !this.drag.option)return;
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
@ -308,54 +292,66 @@ class TableHeader extends Component {
this.drag = {
option:""
};
if (this.props.draggable){
this.removeDragAbleEvent();
}
this.clearThsDr();
}
//---拖拽列宽代码逻辑----start-----
clearThsDr =()=>{
let ths = this.table.ths;
for (let index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable',false);//去掉交换列效果
}
}
/**
* 调整交换列down事件
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
* @param {*} events
* @param {*} type
* @memberof TableHeader
*/
dragAbleMouseDown = (e) => {
// Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.draggable) return;
let th = this.getThDome(event.target);
if(!th)return;
event.target.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'',true);//th
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
this.addDragAbleEvent(); //添加拖拽交换列的事件
bodyonLineMouseUp = (events,type) =>{
if(!this.drag || !this.drag.option)return;
this.mouseClear();
}
/**
* 调整交换列up事件
*相关滚动条联动操作
*
* @memberof TableHeader
*/
dragAbleMouseUp = (e) => {
this.currentDome.setAttribute('draggable',false);//添加交换列效果
this.removeDragAbleEvent();
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'remove',true);//th
//拖拽交换列事件
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
this.initEvent();
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){
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
}
//---拖拽交换列代码----start-----
/**
* 添加换列的事件监听
*/
addDragAbleEvent (){
dragAbleEventInit (){
if (!this.props.draggable) return;
let 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.thEventListen(events,'',true);
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}
/**
@ -366,27 +362,39 @@ class TableHeader extends Component {
{key:'dragstart',fun:this.onDragStart},
{key:'dragover', fun:this.onDragOver},
{key:'drop', fun:this.onDrop},
{key:'dragenter', fun:this.onDragEnter}
{key:'dragenter', fun:this.onDragEnter},
{key:'dragend', fun:this.onDragEnd},
{key:'dragleave', fun:this.onDragLeave},
];
this.thEventListen(events,'remove',true);
this.eventListen(events,'remove',this.table.tr[0]);
}
/**
* 开始调整交换列的事件
*/
onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let th = this.getThDome(event.target);
if(!th)return;
let currentIndex = parseInt(th.getAttribute("data-line-index"));
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
let currentIndex = parseInt(target.getAttribute("data-line-index"));
let 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);
}
let currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey);
this.currentObj = this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
};
onDragOver = (e) => {
@ -399,14 +407,53 @@ class TableHeader extends Component {
*/
onDrop = (e) => {
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(e);
};
onDragEnter = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent = target;
let 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:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
}
onDragEnd = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent.setAttribute("style","");
// this._dragCurrent.style = "";
document.getElementById(this._table_none_cont_id).innerHTML = "";
let 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});
};
}
onDragLeave = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
let 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 = "";
}
}
/**
* 获取当前th上的对象数据
@ -414,9 +461,7 @@ class TableHeader extends Component {
* @returns
* @memberof TableHeader
*/
getCurrentEventData(e){
let event = Event.getEvent(e);
let th = this.getThDome(event.target)
getCurrentEventData(th){
if(!th){
console.log(" event target is not th ! ");
return null;
@ -430,24 +475,6 @@ class TableHeader extends Component {
return null;
}
}
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
getThDome(element){
let _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-----
/**
@ -593,8 +620,9 @@ class TableHeader extends Component {
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{rows.map((row, index) => {
let _rowLeng = (row.length-1);
return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, columIndex, arr) => {
let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover`
@ -642,17 +670,15 @@ class TableHeader extends Component {
thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += ` ${fixedStyle}`;
if(!da.fixed){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
if(!da.fixed ){
return (<th {...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 ? <div ref={el => (this.gap = el)} data-line-key={da.key}
dragborder && columIndex != _rowLeng? <div ref={el => (this.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`}>
<div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
<div className='online' /></div>:""
}
</th>)
}else{
@ -665,7 +691,7 @@ class TableHeader extends Component {
}
})}
</tr>
))}
)})}
</thead>
);
}

34
src/lib/dragColumn.js
View File

@ -1,6 +1,5 @@
import React, { Component } from "react";
import {compare,ObjectAssign} from './util';
let cloneDeep = require('lodash.clonedeep');
/**
* 参数: 列拖拽
* @param {*} Table
@ -33,14 +32,6 @@ export default function dragColumn(Table) {
return _column;
}
cloneDeep(obj){
if( typeof obj !== 'object' || Object.keys(obj).length === 0 ){
return obj
}
let resultData = {}
return this.recursion(obj, resultData)
}
recursion(obj, data={}){
for(key in obj){
if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
@ -59,15 +50,6 @@ export default function dragColumn(Table) {
sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if(targetIndex < sourceIndex){
targetIndex = targetIndex + 1;
@ -77,9 +59,18 @@ export default function dragColumn(Table) {
0,
columns.splice(sourceIndex, 1)[0]
);
this.setState({
columns:cloneDeep(columns)
let _newColumns = [];
columns.forEach((da,i)=>{
let newDate = Object.assign(da,{});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
this.setState({
columns:_newColumns//cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if(this.props.onDrop){
this.props.onDrop(event,data,columns);
}
@ -102,7 +93,6 @@ export default function dragColumn(Table) {
onDrop,
...others
} = this.props;
let key = new Date().getTime();
return (
<Table
{...others}
@ -115,8 +105,6 @@ export default function dragColumn(Table) {
onDragEnter={this.onDragEnter}
draggable={draggable}
dragborder={dragborder}
// dragborder={false}
dragborderKey={key}
/>)
}
};

132
src/lib/newMultiSelect.js
View File

@ -1,133 +1,5 @@
import React, { Component } from "react";
import {ObjectAssign} from './util';
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
import multiSelect from './multiSelect';
export default function newMultiSelect(Table, Checkbox) {
return class NewMultiSelect extends Component {
static defaultProps = {
prefixCls: "u-table-mult-select"
}
constructor(props) {
super(props);
let checkedAll = this.setChecked(props.data);
this.state = {
checkedAll,
data:ObjectAssign(props.data),
}
}
componentWillReceiveProps(nextProps){
if(this.props.data != nextProps.data){
this.setState({
data:ObjectAssign(nextProps.data),
checkedAll:this.setChecked(nextProps.data),
})
}
}
setChecked(data){
let allCheck = true;
if(data){
for (const da of data) {
if(!da._checked){
allCheck = false;
break;
}
}
}
return allCheck;
}
onAllCheckChange=()=>{
let {data,checkedAll} = this.state;
let selectList = [];
let check = checkedAll?false:true;
data.forEach(item => {
item._checked = check;
if(item._checked){
selectList.push(item);
}
});
this.setState({
checkedAll:check
});
this.props.getSelectedDataFunc(selectList);
}
handleClick=()=>{
}
onCheckboxChange = (text, record, index) => () => {
let {data} = this.state;
let selectList = [];
record._checked = record._checked?false:true;
let checkedAll = true;
for(let i=0;i<data.length;i++){
let item = data[i];
if(!item._checked || item._checked == false){
checkedAll = false;
break;
}
}
this.setState({
...this.state,
checkedAll
})
data.forEach((da)=>{
if(da._checked){
selectList.push(da);
}
})
this.props.getSelectedDataFunc(selectList,record,index);
};
getDefaultColumns=(columns)=>{
// let checkedAll = init?false:this.state.checkedAll;
let {checkedAll} = this.state;
let _defaultColumns =[{
title: (
<Checkbox
className="table-checkbox"
checked={checkedAll}
// indeterminate={indeterminate_bool && !this.state.checkedAll}
onChange={this.onAllCheckChange}
/>
),
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 50,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";
return <Checkbox
key={index}
className="table-checkbox"
{...attr}
checked={record._checked}
onClick={this.handleClick}
onChange={this.onCheckboxChange(text, record, index)}
></Checkbox>
}
}]
return _defaultColumns.concat(columns);
}
render() {
const {columns} = this.props;
const {data} = this.state;
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
}
};
return multiSelect(Table, Checkbox);
}