p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tableHeader 功能重构,主要是交换列和拖拽宽度

This commit is contained in:
“jonyshi” 2018-12-03 10:02:57 +08:00
parent df0b7b2b45 d7cb80658f
commit 3d8ef5860c
15 changed files with 17682 additions and 21673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/Table.css
View File

@ -393,14 +393,10 @@
margin: 0 auto; }
.u-table-thead-th-drag-gap .online-hover {
background: #000000; }
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
.u-table-thead-th-drag-gap:hover {
cursor: col-resize; }
.u-table-thead-th .th-drag-gap > div {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover > div {
background: #000000; }
.u-table-thead-th-drag-gap:hover .online {
background: #000000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {

664
build/TableHeader.js
View File

@ -10,6 +10,10 @@ 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);
@ -52,247 +56,127 @@ var TableHeader = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onDragStart = function (event, data) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", data.key);
_this.currentObj = data;
event.dataTransfer.setDragImage(event.target, 0, 0);
_this.props.onDragStart(event, data);
};
_this.onDragOver = function (event, data) {
var dragAbleOrBordStart = _this.state.dragAbleOrBordStart;
_this.setState({
dragAbleOrBordStart: ""
});
if (!_this.currentObj || _this.currentObj.key == data.key) return;
event.preventDefault();
_this.props.onDragOver(event, data);
};
_this.onDragEnter = function (event, data) {
if (!_this.currentObj || _this.currentObj.key == data.key) return;
_this.props.onDragEnter(event, data);
};
_this.onDrop = function (event, data) {
if (!_this.currentObj || _this.currentObj.key == data.key) return;
_this.props.onDrop(event, data);
};
_this.onMouseOver = function (event, data) {
//如果是固定列没有拖拽功能
if (_this.border || data.fixed) return;
var clsPrefix = _this.props.clsPrefix;
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
}
};
_this.ableOnMouseMove = function (event, data) {
var dragAbleOrBord = _this.state.dragAbleOrBord;
if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
if (dragAbleOrBord === "able") return;
_this.setState({
dragAbleOrBord: "able"
});
};
_this.onMouseMove = function (event, data) {
var dragAbleOrBord = _this.state.dragAbleOrBord;
if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
if (dragAbleOrBord != "border") {
_this.setState({
dragAbleOrBord: "border"
});
}
//如果是固定列没有拖拽功能
if (_this.border || data.fixed) return;
// const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
};
_this.onMouseOut = function (event, data) {
if (_this.border) return;
var clsPrefix = _this.props.clsPrefix;
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
}
};
_this.onMouseDown = function (event, data) {
var _this$state = _this.state,
dragAbleOrBord = _this$state.dragAbleOrBord,
dragAbleOrBordStart = _this$state.dragAbleOrBordStart;
_this.setState({
dragAbleOrBordStart: dragAbleOrBord === "border" ? "borderStart" : ""
});
// console.log("-改变宽-----度--",dragAbleOrBordStart);
_this.border = true;
_this.onLineMouseMove = function (e) {
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
dragborder = _this$props.dragborder,
contentDomWidth = _this$props.contentDomWidth,
scrollbarWidth = _this$props.scrollbarWidth,
contentTable = _this$props.contentTable,
headerScroll = _this$props.headerScroll;
_this.drag.initPageLeftX = event.pageX;
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
_this.drag.x = _this.drag.initLeft;
_this.drag.currIndex = _this.props.rows[0].findIndex(function (da) {
return da.key == data.key;
});
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
var styleWidth = contentTableDom.style.width;
if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
_this.contentTableWidth = parseInt(styleWidth);
} else {
_this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.dragborder) return;
if (_this.drag.option != "border") {
return false;
}
var dragColWidth = _this.drag.data[_this.drag.currIndex].width;
if (typeof dragColWidth == "string" && dragColWidth.indexOf("%") > -1) {
_this.drag.width = _this.contentTableWidth * parseInt(dragColWidth) / 100;
} else {
_this.drag.width = parseInt(_this.drag.data[_this.drag.currIndex].width);
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
if (newWidth > _this.drag.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
//表头滚动条处理
if (headerScroll) {
var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
var newTableWidth = oldTableWidth + diff;
_this.table.table.style.width = newTableWidth; //改变table的width
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
// if(bordered){
// showScroll = showScroll -1;
// }
var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
} else {
contentTableHeader.style.overflowX = 'hidden';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
}
}
}
};
_this.onMouseUp = function (event, data) {
_this.setState({
dragAbleOrBordStart: ""
});
_this.border = false;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
};
_this.onThMouseUp = function (event, data) {
_this.border = false;
_this.onLineMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
rows = _this$props2.rows,
columns = _this$props2.columns;
contentTable = _this$props2.contentTable;
var eventDom = event.target;
var optDom = void 0;
if (eventDom.classList.contains(".th-drag-gap-hover")) {
optDom = eventDom;
} else {
optDom = eventDom.querySelector("." + clsPrefix + "-thead-th-drag-gap");
}
if (optDom) {
optDom.classList.remove("th-drag-gap-hover");
optDom.classList.add("th-drag-gap");
}
// columns[this.drag.currIndex].width = data.width;
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) {
_this.props.afterDragColWidth(rows[0], _this.drag.currIndex);
}
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.onThMouseMove = function (event, data) {
if (!_this.border) return;
//固定表头拖拽
_this.onLineMouseUp = function (event) {
var rows = _this.props.rows;
var _this$props3 = _this.props,
dragborderKey = _this$props3.dragborderKey,
contentTable = _this$props3.contentTable,
headerScroll = _this$props3.headerScroll,
contentDomWidth = _this$props3.contentDomWidth,
scrollbarWidth = _this$props3.scrollbarWidth,
bordered = _this$props3.bordered,
rows = _this$props3.rows;
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
_this.clearDragBorder(event);
};
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
_this.bodyonLineMouseMove = function (event) {
_this.clearDragBorder(event);
};
if (!_this.contentTableWidth) {
var styleWidth = contentTableDom.style.width;
if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
_this.contentTableWidth = parseInt(styleWidth);
} else {
_this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
}
var newTableWidth = _this.contentTableWidth + x;
var newWidth = _this.drag.width + x;
if (newWidth < _this.props.minColumnWidth) {
//清楚样式
var moveDom = event.target.querySelector(".th-drag-gap-hover");
moveDom && moveDom.classList.remove("th-drag-gap-hover");
// event.target.classList.remove('th-drag-gap-hover');
_this.dragAbleMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
_this.addDragAbleEvent(); //添加拖拽交换列的事件
};
_this.onDragStart = function (e) {
var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
return;
}
//设置hiden的left
//"u-table-drag-hide-table"
var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
currentHideDom.style.left = _this.drag.initPageLeftX + x - grap + "px";
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
//获取最小宽度，不让拖动
// let minWidth = 0;
// for(let i=0;i<=this.drag.currIndex;i++){
// minWidth += this.drag.data[i].width;
// }
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);
};
// //判断最小值后在赋值 todo
// let currLeft = this.drag.initPageLeftX+x-grap;
// console.log("currLeft minWidth ",currLeft + " "+minWidth);
// if(currLeft <= minWidth){
// return;
// }
// currentHideDom.style.left = currLeft+"px";
_this.onDragOver = function (e) {
event.preventDefault();
};
//设置当前的宽度
var currentData = _this.drag.data[_this.drag.currIndex];
currentData.width = newWidth;
var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
// data.width = newWidth;
rows[0][_this.drag.currIndex].width = newWidth;
_this.drag.x = x;
var contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
//固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
var siblingDom = contentTableDom.parentNode.nextElementSibling;
if (siblingDom) {
var bodyTableDom = siblingDom.querySelector("table");
//2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
bodyTableDom.style.width = newTableWidth + "px";
//3、对应的col也要跟这变
var colDomArr = bodyTableDom.querySelectorAll("colgroup col");
colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
//4、设置overflow属性
}
//表头需要显示滚动条时，需兼容含有固定列
if (headerScroll) {
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
if (bordered) {
showScroll = showScroll - 1;
}
var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
} else {
contentTableHeader.style.overflowX = 'hidden';
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
}
_this.onDrop = function (e) {
if (!_this.props.draggable) return;
if (_this.drag.option === 'border') {
return;
}
var data = _this.getCurrentEventData(e);
if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
};
_this.handlerFilterChange = function (key, value, condition) {
@ -312,11 +196,11 @@ var TableHeader = function (_Component) {
};
_this.filterRenderType = function (type, dataIndex, index) {
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
rows = _this$props4.rows,
filterDelay = _this$props4.filterDelay,
locale = _this$props4.locale;
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
rows = _this$props3.rows,
filterDelay = _this$props3.filterDelay,
locale = _this$props3.locale;
switch (type) {
//文本输入
@ -413,13 +297,6 @@ var TableHeader = function (_Component) {
};
_this.currentObj = null;
_this.state = {
border: false,
dragAbleOrBord: props.draggable ? "able" : "", //border 拖拽列宽，able 交换列,
dragAbleOrBordStart: "" // borderStart 开始拖拽宽度 ableStart 开始交换列
// draggable:props.draggable?props.draggable:false,
};
//拖拽宽度处理
if (!props.dragborder) return _possibleConstructorReturn(_this);
_this.border = false;
@ -428,13 +305,10 @@ var TableHeader = function (_Component) {
initPageLeftX: 0,
initLeft: 0,
x: 0,
width: 0
width: 0,
option: ''
};
// let _da = {};
// Object.assign(_da,this.props.rows[0]);
// this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
// let a = this.props.rows[0];
_this.table = null;
var _row = [];
_this.props.rows[0] && _this.props.rows[0].forEach(function (item) {
var newItem = item.key != "checkbox" ? (0, _utils.ObjectAssign)(item) : item;
@ -444,25 +318,180 @@ var TableHeader = function (_Component) {
return _this;
}
TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.draggable != nextProps.draggable) {
this.setState({
dragAbleOrBord: nextProps.draggable ? "able" : "" //border 拖拽列宽，able 交换列
// draggable:nextProps.draggable,
});
}
/**
* 动态绑定th line 事件
* type 为false 为增加事件
* eventSource 为false 给 th 内部的div增加事件
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
ths = _table.ths,
cols = _table.cols;
if (this.props.dragborder != nextProps.dragborder) {
this.setState({
dragAbleOrBord: nextProps.dragborder ? "border" : "" //border 拖拽列宽，able 交换列
});
for (var index = 0; index < ths.length; index++) {
var element = ths[index]; //.getAttribute('data-type');
if (!element.getAttribute('data-th-fixed')) {
var colLine = element.children.length > 1 ? element.lastElementChild : element.children[0];
// const colLine = element.children[0];
for (var i = 0; i < events.length; i++) {
var _event = events[i];
var _dataSource = eventSource ? element : colLine;
if (type === "remove") {
_dataSource.removeEventListener(_event.key, _event.fun);
} else {
_dataSource.addEventListener(_event.key, _event.fun);
}
}
}
}
};
// shouldComponentUpdate(nextProps) {
// return !shallowequal(nextProps, this.props);
// }
TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type == "remove") {
document.removeEventListener(_event.key, _event.fun);
} else {
document.addEventListener(_event.key, _event.fun);
}
}
};
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable();
this.initEvent();
};
TableHeader.prototype.componentDidMount = function componentDidMount() {
this.initTable();
this.initEvent();
};
/**
* 拖拽列宽的事件处理
*/
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); //表示把事件添加到竖线
};
/**
* 移除拖拽宽度的事件
*/
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');
};
/**
* 获取table的属性存放在this.table 中。(公用方法)
*/
TableHeader.prototype.initTable = function initTable() {
if (!this.props.dragborder && !this.props.draggable) return;
var el = _reactDom2["default"].findDOMNode(this);
var tableDome = el.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
}
this.table = table;
if (!this.props.dragborder) return;
if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
//hao 固定列table
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");
}
}
};
//---拖拽列宽代码逻辑----start-----
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
// if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag) return;
this.drag = {
option: ""
};
if (!this.props.draggable) {
this.removeDragAbleEvent();
}
};
//---拖拽列宽代码逻辑----start-----
/**
* 拖拽交换列的事件处理
*/
TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }];
this.thEventListen(events, '', true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
};
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);
};
/**
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
* @memberof TableHeader
*/
// onDragEnter = (e) => {
// if (!this.props.draggable) return;
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var key = event.target.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;
}
};
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
*/
@ -481,9 +510,6 @@ var TableHeader = function (_Component) {
TableHeader.prototype.render = function render() {
var _this2 = this;
var _state = this.state,
dragAbleOrBord = _state.dragAbleOrBord,
dragAbleOrBordStart = _state.dragAbleOrBordStart;
var _props = this.props,
clsPrefix = _props.clsPrefix,
rowStyle = _props.rowStyle,
@ -508,12 +534,12 @@ var TableHeader = function (_Component) {
return _react2["default"].createElement(
"thead",
_extends({ className: clsPrefix + "-thead" }, attr),
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
rows.map(function (row, index) {
return _react2["default"].createElement(
"tr",
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
row.map(function (da, i, arr) {
row.map(function (da, columIndex, arr) {
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
delete da.drgHover;
var fixedStyle = "";
@ -522,128 +548,48 @@ var TableHeader = function (_Component) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
}
if (lastShowIndex == i) {
if (lastShowIndex == columIndex) {
canDotDrag = "th-can-not-drag";
}
if (filterable && index == rows.length - 1) {
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, i);
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
delete da.filterdropdownfocus;
}
var thAbleObj = {},
thBorObj = {},
thDefaultObj = {},
thLineObj = {};
var thDefaultObj = {};
var thClassName = "" + da.className;
if (draggable || dragborder) {
if (draggable && dragAbleOrBordStart != "borderStart") {
thAbleObj = _extends({}, da, {
onDragStart: function onDragStart(e) {
_this2.onDragStart(e, da);
},
onDragOver: function onDragOver(e) {
_this2.onDragOver(e, da);
},
onDrop: function onDrop(e) {
_this2.onDrop(e, da);
},
onDragEnter: function onDragEnter(e) {
_this2.onDragEnter(e, da);
},
onMouseMove: function onMouseMove(e) {
_this2.ableOnMouseMove(e, da);
},
onMouseDown: function onMouseDown(e) {
//避免表头其他元素对其影响
var filterDom = contentTable.querySelector('.filterable');
//是否是过滤行元素，是的话不触发
var isFilterDom = filterDom ? filterDom.contains(e.target) : false;
if (e.target.classList.contains('uf') || isFilterDom) {
return;
}
if (e.target.classList.contains('uf')) {
return;
}
var _state2 = _this2.state,
dragAbleOrBord = _state2.dragAbleOrBord,
dragAbleOrBordStart = _state2.dragAbleOrBordStart;
_this2.setState({
dragAbleOrBordStart: dragAbleOrBord === "able" ? "ableStart" : ""
});
},
draggable: draggable,
// className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
key: da.key
});
thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
}
// if (dragborder && dragAbleOrBord === "border") {
if (dragborder && dragAbleOrBordStart != "ableStart") {
thBorObj.style = { 'width': da.width
// thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
};thBorObj.onMouseMove = function (e) {
if (draggable) {
_this2.ableOnMouseMove(e, da);
}
_this2.onThMouseMove(e, da);
};
thBorObj.onMouseUp = function (e) {
_this2.onThMouseUp(e, da);
};
thClassName += clsPrefix + "-thead-th " + canDotDrag;
thBorObj.style = { width: da.width
// key:i
};
}
// thObj.className = thObj.className+`${fixedStyle}`;
thClassName += "" + fixedStyle;
if (!da.fixed) {
thLineObj = {
onMouseMove: function onMouseMove(e) {
e.stopPropagation();_this2.onMouseMove(e, da);
},
onMouseOut: function onMouseOut(e) {
_this2.onMouseOut(e, da);
},
onMouseDown: function onMouseDown(e) {
e.stopPropagation();_this2.onMouseDown(e, da);
},
onMouseUp: function onMouseUp(e) {
_this2.onMouseUp(e, da);
},
onMouseOver: function onMouseOver(e) {
_this2.onMouseOver(e, da);
}
// className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
};
if (dragAbleOrBordStart !== 'ableStart') {
thLineObj.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
}
}
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({ key: Math.random() + new Date().getTime() }, thAbleObj, thBorObj, { className: thClassName }),
{ key: Math.random() + new Date().getTime(), className: thClassName, "data-th-fixed": da.fixed,
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width },
da.children,
da.fixed ? "" : _react2["default"].createElement(
dragborder ? _react2["default"].createElement(
"div",
_extends({ ref: function ref(el) {
{ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj),
_react2["default"].createElement("div", { id: "th-online", className: "online" })
)
}, "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 })
) : ""
);
} else {
thDefaultObj = _extends({}, da, {
className: da.className + " " + fixedStyle,
key: i
key: columIndex
});
da.onClick ? thDefaultObj.onClick = function (e) {
da.onClick(da, e);
} : "";
return _react2["default"].createElement("th", thDefaultObj);
return _react2["default"].createElement("th", _extends({}, thDefaultObj, { "data-th-fixed": da.fixed }));
}
})
);

134
build/lib/dragColumn.js
View File

@ -1,4 +1,4 @@
"use strict";
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
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; };
exports["default"] = dragColumn;
var _react = require("react");
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _util = require("./util");
var _util = require('./util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@ -49,71 +51,46 @@ function dragColumn(Table) {
return _column;
};
_this.onDragStart = function (event, data) {
if (_this.props.onDragStart) {
_this.props.onDragStart(event, data);
}
};
_this.onDragOver = function (event, data) {
if (_this.props.onDragOver) {
_this.props.onDragOver(event, data);
}
};
_this.onDragEnter = function (event, data) {
if (data.key == "checkbox") return;
var _columns = _this.state.columns;
var columns = [];
_extends(columns, _columns);
columns.forEach(function (da) {
return da.drgHover = false;
});
var current = columns.find(function (da) {
return da.key == data.key;
});
if (current.fixed) return;
current.drgHover = true;
_this.setState({
columns: columns
});
if (_this.props.onDragEnter) {
_this.props.onDragEnter(event, data);
}
};
_this.onDrop = function (event, data) {
if (data.key == "checkbox") return;
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
var id = event.dataTransfer.getData("Text");
var objIndex = columns.findIndex(function (_da, i) {
return _da.key == id;
var dragSourceColum = columns.find(function (da, i) {
return da.key == dragSource.key;
});
var targetIndex = columns.findIndex(function (_da, i) {
return _da.key == data.key;
var dragTargColum = columns.find(function (da, i) {
return da.key == dragTarg.key;
});
if (columns[objIndex].fixed) return; //固定列不让拖拽
if (columns[targetIndex].fixed) return; //固定列不让拖拽
columns.forEach(function (da, i) {
da.drgHover = false;
if (da.key == id) {
//obj
da.dragIndex = targetIndex;
for (var index = 0; index < columns.length; index++) {
var da = columns[index];
if (da.key === dragSource.key) {
columns[index] = dragTargColum;
}
if (da.key == data.key) {
//targetObj
da.dragIndex = objIndex;
if (da.key === dragTarg.key) {
columns[index] = dragSourceColum;
}
});
var _columns = columns.sort((0, _util.compare)('dragIndex'));
_this.setState({
columns: _columns.slice()
});
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
var titles = [];
columns.forEach(function (da) {
if (typeof da.title != "string") {
titles.push(da.title);
delete da.title;
}
});
var newColumns = null;
if (titles.length != 0) {
newColumns = JSON.parse(JSON.stringify(columns));
for (var _index = 0; _index < newColumns.length; _index++) {
newColumns[_index].title = titles[_index];
}
console.log("----columns----", newColumns);
} else {
newColumns = JSON.parse(JSON.stringify(columns));
}
_this.setState({
columns: newColumns
});
};
_this.getTarget = function (evt) {
@ -134,6 +111,37 @@ 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);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
for (key in obj) {
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
data[key] = recursion(obj[key]);
} else {
data[key] = obj[key];
}
}
return data;
});
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
@ -145,13 +153,13 @@ function dragColumn(Table) {
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ["data", "dragborder", "draggable", "className", "columns", "onDragStart", "onDragEnter", "onDragOver", "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,
className: className + " u-table-drag-border",
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
@ -166,4 +174,4 @@ function dragColumn(Table) {
return DragColumn;
}(_react.Component);
}
module.exports = exports["default"];
module.exports = exports['default'];

63
build/utils.js
View File

@ -3,7 +3,7 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.tryParseInt = undefined;
exports.Event = exports.tryParseInt = undefined;
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; };
@ -192,4 +192,63 @@ function getColChildrenLength(columns, chilrenLen) {
}
});
return chilrenLen;
}
}
function addHandler(element, type, handler) {
if (element.addEventListener) {
//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
//检测是否为IE级方法
element.attachEvent("on" + type, handler);
} else {
//检测是否为DOM0级方法
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
//获取事件对象的兼容性写法
function getEvent(event) {
return event ? event : window.event;
}
//获取事件对象目标的兼容性写法
function getTarget(event) {
return event.target || event.srcElement;
}
function preventDefault(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
var Event = exports.Event = {
addHandler: addHandler,
removeHandler: removeHandler,
getEvent: getEvent,
getTarget: getTarget,
preventDefault: preventDefault,
stopPropagation: stopPropagation
};

163
demo/demolist/js-export-excel.js Normal file
View File

@ -0,0 +1,163 @@
require("script-loader!file-saver");
require("script-loader!xlsx/dist/xlsx.core.min");
require("script-loader!blob.js/Blob");
/**
* Created by kin on 2017/5/18.
*
* josn导出excel
* mail：cuikangjie_90h@126.com
*/
const changeData = function(data, filter) {
let sj = data,
f = filter,
re = [];
Array.isArray(data)
? (function() {
//对象
f
? (function() {
//存在过滤
sj.forEach(function(obj) {
let one = [];
filter.forEach(function(no) {
one.push(obj[no]);
});
re.push(one);
});
})()
: (function() {
//不存在过滤
sj.forEach(function(obj) {
let col = Object.keys(obj);
let one = [];
col.forEach(function(no) {
one.push(obj[no]);
});
re.push(one);
});
})();
})()
: (function() {
re = sj;
})();
return re;
};
// 转换数据
const sheetChangeData = function(data) {
let ws = {};
let range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (let R = 0; R != data.length; ++R) {
for (let C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
let cell = {
v: data[R][C]
};
if (cell.v == null) continue;
let cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === "number") cell.t = "n";
else if (typeof cell.v === "boolean") cell.t = "b";
else if (cell.v instanceof Date) {
cell.t = "n";
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = "s";
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
return ws;
};
const s2ab = function(s) {
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
};
const datenum = function(v, date1904) {
if (date1904) v += 1462;
let epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
};
const columnwidths = function(columnWidths) {
let out = [];
out = columnWidths.map(function(item) {
return { width: item ? parseInt(256 * (Number(item) / 100)) : 20 };
});
return out;
};
const exportExcel = function(options) {
let _options = {
fileName: options.fileName || "download",
datas: options.datas,
workbook: {
SheetNames: [],
Sheets: {}
}
};
const instance = {
saveExcel: function() {
let wb = _options.workbook;
_options.datas.forEach(function(data, index) {
let sheetHeader = data.sheetHeader || null;
let sheetData = data.sheetData;
let sheetName = data.sheetName || "sheet" + (index + 1);
let sheetFilter = data.sheetFilter || null;
let columnWidths = data.columnWidths || [];
sheetData = changeData(sheetData, sheetFilter);
if (sheetHeader) {
sheetData.unshift(sheetHeader);
}
let ws = sheetChangeData(sheetData);
ws["!merges"] = [];
ws["!cols"] = columnwidths(columnWidths);
wb.SheetNames.push(sheetName);
wb.Sheets[sheetName] = ws;
});
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: false,
type: "binary"
});
saveAs(
new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}),
_options.fileName + ".xlsx"
);
}
};
return instance;
};
module.exports = exportExcel;

214
demo/demolist/js-export-excel_bak.js Normal file
View File

@ -0,0 +1,214 @@
require("script-loader!file-saver");
require("script-loader!xlsx/dist/xlsx.core.min");
require("script-loader!blob.js/Blob");
/**
* Created by kin on 2017/5/18.
*
* josn导出excel
* mail：cuikangjie_90h@126.com
*/
const changeData = function(data, filter) {
let sj = data,
f = filter,
re = [];
Array.isArray(data)
? (function() {
//对象
f
? (function() {
//存在过滤
sj.forEach(function(obj) {
let one = [];
filter.forEach(function(no) {
one.push(obj[no]);
});
re.push(one);
});
})()
: (function() {
//不存在过滤
sj.forEach(function(obj) {
let col = Object.keys(obj);
let one = [];
col.forEach(function(no) {
one.push(obj[no]);
});
re.push(one);
});
})();
})()
: (function() {
re = sj;
})();
return re;
};
// 转换数据
const sheetChangeData = function(data) {
let ws = {};
let range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (let R = 0; R != data.length; ++R) {
for (let C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
let cell = {
v: data[R][C]
};
if (cell.v == null) continue;
let cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === "number") cell.t = "n";
else if (typeof cell.v === "boolean") cell.t = "b";
else if (cell.v instanceof Date) {
cell.t = "n";
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = "s";
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
return ws;
};
const s2ab = function(s) {
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
};
const datenum = function(v, date1904) {
if (date1904) v += 1462;
let epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
};
const columnwidths = function(columnWidths) {
let out = [];
out = columnWidths.map(function(item) {
return { width: item ? parseInt(256 * (Number(item) / 100)) : 20 };
});
return out;
};
const exportExcel = function(options) {
let _options = {
fileName: options.fileName || "download",
datas: options.datas,
workbook: {
SheetNames: [],
Sheets: {}
}
};
const instance = {
saveExcel: function() {
let wb = _options.workbook;
debugger;
_options.datas.forEach(function(data, index) {
let sheetHeader = data.sheetHeader || null;
let sheetData = data.sheetData;
let sheetName = data.sheetName || "sheet" + (index + 1);
let sheetFilter = data.sheetFilter || null;
let columnWidths = data.columnWidths || [];
sheetData = changeData(sheetData, sheetFilter);
if (sheetHeader) {
sheetData.unshift(sheetHeader);
}
let ws = sheetChangeData(sheetData);
ws["!merges"] = [{ s: {r:2, c:0}, e: {r:2, c:1} }];
ws["!cols"] = columnwidths(columnWidths);
ws["!margins"]={left:0.7, right:0.7, top:0.75,bottom:0.75,header:0.3,footer:0.3};
ws["!ref"] = "A1:B4";
ws["A4"] = {"t":"n","f":'SUM(A2+B2)'};
/* merge cells A1:B1 */
// let merge = { s: {r:0, c:0}, e: {r:0, c:1} };
// ws['!merges'].push(merge);
ws["A3"] = {
"t": "n",
"v": 5,
"s": {
"numFmt": "General",
"fill": {
"patternType": "lightDown",
"fgColor": {
"theme": 4,
"tint": -0.249977111117893
},
"bgColor": {
"theme": 7,
"tint": -0.249977111117893
}
},
"font": {
"sz": "12",
"color": {
"theme": "1"
},
"name": "Calibri"
},
"border": {}
},
"w": "5",
"z": "General"
};
// ws.A1.s = { fill: {patternType: "none",fgColor: {rgb: "#5fb3dd"},bgColor: {rgb: "5fb3dd"}} };
// ws.B2 = { t: 'n', v: 1, w: '1', s: { patternType: 'solid', fgColor: { rgb: 'FFFF00' }, bgColor: { indexed: 64 } } };
// ws["B1"] = {v: "第二22222列", t: "s"};
// ws["A4"]["t"] = "n";
// ws["A4"]["f"] = 'SUM(A2+B2)';
console.log("ws: " , ws);
wb.SheetNames.push(sheetName);
wb.Sheets[sheetName] = ws;
});
let defaultCellStyle = { font: { name: "Verdana", sz: 11, color: "FF00FF88"}, fill: {fgColor: {rgb: "FFFFAA00"}}};
let wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "binary",
bookSST: true,
cellStyles: true,
defaultCellStyle:defaultCellStyle
});
saveAs(
new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}),
_options.fileName + ".xlsx"
);
}
};
return instance;
};
module.exports = exportExcel;

67
dist/demo.css vendored
View File

@ -2421,6 +2421,9 @@ i.uf {
/*
* 选择时删除文本阴影，及设置默认选中颜色
*/
::-moz-selection {
background: rgb(187,222,251);
text-shadow: none; }
::selection {
background: rgb(187,222,251);
text-shadow: none; }
@ -5284,7 +5287,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-panel .u-panel-body {
padding: 15px 15px;
position: relative; }
.u-panel .u-panel-body .u-panel-copy {
.u-panel .u-panel-body .uf {
position: absolute;
right: 25px;
top: 30px;
@ -5294,7 +5297,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
margin: 8px;
border-radius: 4px;
cursor: pointer; }
.u-panel .u-panel-body .u-panel-copy:hover {
.u-panel .u-panel-body .uf:hover {
color: #a8a7a7; }
.u-panel-default {
@ -6670,8 +6673,7 @@ input.u-button[type="submit"] {
border-radius: 0 500px 500px 0; }
.u-pagination {
font-size: 14px;
position: relative; }
font-size: 14px; }
.u-pagination-list {
float: left;
margin: 5px; }
@ -6809,15 +6811,6 @@ input.u-button[type="submit"] {
margin: 5px; }
.u-pagination-total span {
padding: 0 5px; }
.u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
background: rgba(255, 255, 255, 0.6);
z-index: 2;
cursor: not-allowed; }
.pagination-state {
float: left;
@ -6924,29 +6917,15 @@ input.u-button[type="submit"] {
margin: 0 5px;
height: 18px;
line-height: 18px;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
line-height: 1;
vertical-align: middle; }
font-size: 14px; }
.u-checkbox.disabled .u-checkbox-label {
cursor: not-allowed;
opacity: 0.5; }
.u-checkbox input[type='checkbox'] {
position: absolute;
z-index: 3;
cursor: pointer;
opacity: 0;
box-sizing: border-box;
padding: 0;
width: 100%;
height: 100%; }
display: none;
cursor: pointer; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: #1e88e5; }
.u-checkbox.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); }
@ -6998,37 +6977,22 @@ input.u-button[type="submit"] {
box-shadow: inset 0 0 0 10px rgb(76,175,80);
border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(255,152,0);
border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(244,67,54);
border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(97,97,97);
border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(0,188,212);
border-color: rgb(0,188,212); }
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(0,188,212); }
/* FormGroup */
/* Navlayout */
/* keyframes 定义 */
@ -7566,8 +7530,7 @@ ul {
zoom: 1;
position: absolute;
right: 4px;
padding: 0 0 0 8px;
top: -3px; }
padding: 0 0 0 8px; }
.u-select-selection--multiple .u-select-selection-choice-remove:before {
display: block;
font-family: "uf"; }
@ -8692,14 +8655,10 @@ ul {
margin: 0 auto; }
.u-table-thead-th-drag-gap .online-hover {
background: #000000; }
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
.u-table-thead-th-drag-gap:hover {
cursor: col-resize; }
.u-table-thead-th .th-drag-gap > div {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover > div {
background: #000000; }
.u-table-thead-th-drag-gap:hover .online {
background: #000000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

37039
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

186
package.json
View File

@ -1,96 +1,96 @@
{
"name": "bee-table",
"version": "1.5.19",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
"name": "bee-table",
"version": "1.6.0",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"transform": {
"^.+\\.js$": "babel-jest"
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"bee-button": "^1.0.6",
"bee-datepicker": "latest",
"bee-dnd": "^1.0.2",
"bee-dropdown": "^1.0.1",
"bee-form-control": "latest",
"bee-icon": "^1.0.5",
"bee-input-number": "^1.1.15",
"bee-loading": "^1.0.3",
"bee-locale": "0.0.11",
"bee-menus": "^1.0.7",
"bee-popover": "^1.0.2",
"bee-select": "^1.0.21",
"classnames": "^2.2.5",
"lodash.clonedeep": "^4.5.0",
"object-path": "^0.11.3",
"shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "^15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-checkbox": "^1.1.1",
"bee-form": "1.1.10",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "^1.2.12",
"bee-popconfirm": "^1.0.2",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"bee-button": "^1.0.6",
"bee-datepicker": "latest",
"bee-dnd": "^1.0.2",
"bee-dropdown": "^1.0.1",
"bee-form-control": "latest",
"bee-icon": "^1.0.5",
"bee-input-number": "^1.1.15",
"bee-loading": "^1.0.3",
"bee-locale": "0.0.11",
"bee-menus": "^1.0.7",
"bee-popover": "^1.0.2",
"bee-select": "^1.0.21",
"classnames": "^2.2.5",
"lodash.clonedeep": "^4.5.0",
"object-path": "^0.11.3",
"shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "^15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-checkbox": "^1.1.1",
"bee-form": "1.1.10",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "^1.2.12",
"bee-popconfirm": "^1.0.2",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
}

22
src/Table.scss
View File

@ -388,26 +388,14 @@ $table-move-in-color: $bg-color-base;
.online-hover{
background:#000000;
}
}
.th-drag-gap{
background:transparent;
}
.th-drag-gap-hover{
// background: #ccc;
&-drag-gap:hover{
cursor: col-resize;
.online{
background: #000000
}
}
.th-drag-gap>div{
background:transparent;
}
.th-drag-gap-hover>div{
background: #000000
}
// &.th-can-not-drag{
// .th-drag-gap-hover{
// cursor: none;
// width: 0px;
// }
// }
}
&-th:last-child {
&-drag-gap{

641
src/TableHeader.js
View File

@ -1,8 +1,9 @@
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import PropTypes from "prop-types";
import shallowequal from "shallowequal";
import { throttle, debounce } from "throttle-debounce";
import { tryParseInt, ObjectAssign } from "./utils";
import { tryParseInt, ObjectAssign ,Event} from "./utils";
import FilterType from "./FilterType";
const propTypes = {
@ -17,13 +18,6 @@ class TableHeader extends Component {
constructor(props) {
super(props);
this.currentObj = null;
this.state = {
border: false,
dragAbleOrBord:props.draggable?"able":"", //border 拖拽列宽，able 交换列,
dragAbleOrBordStart:"", // borderStart 开始拖拽宽度 ableStart 开始交换列
// draggable:props.draggable?props.draggable:false,
};
//拖拽宽度处理
if (!props.dragborder) return;
this.border = false;
@ -32,13 +26,10 @@ class TableHeader extends Component {
initPageLeftX: 0,
initLeft: 0,
x: 0,
width: 0
width: 0,
option:''
};
// let _da = {};
// Object.assign(_da,this.props.rows[0]);
// this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
// let a = this.props.rows[0];
this.table = null;
let _row = [];
this.props.rows[0] &&
this.props.rows[0].forEach(item => {
@ -50,261 +41,291 @@ class TableHeader extends Component {
static defaultProps = {
contentWidthDiff: 0
};
componentWillReceiveProps(nextProps){
if(this.props.draggable != nextProps.draggable){
this.setState({
dragAbleOrBord:nextProps.draggable?"able":"", //border 拖拽列宽，able 交换列
// draggable:nextProps.draggable,
})
}
if(this.props.dragborder != nextProps.dragborder){
this.setState({
dragAbleOrBord:nextProps.dragborder?"border":"", //border 拖拽列宽，able 交换列
})
/**
* 动态绑定th line 事件
* type 为false 为增加事件
* eventSource 为false 给 th 内部的div增加事件
*/
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')){
const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
// const colLine = element.children[0];
for (let i = 0; i < events.length; i++) {
const _event = events[i];
let _dataSource = eventSource?element:colLine;
if(type === "remove"){
_dataSource.removeEventListener(_event.key,_event.fun);
}else{
_dataSource.addEventListener(_event.key,_event.fun);
}
}
}
}
}
// shouldComponentUpdate(nextProps) {
// return !shallowequal(nextProps, this.props);
// }
onDragStart = (event, data) => {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", data.key);
this.currentObj = data;
event.dataTransfer.setDragImage(event.target, 0, 0);
this.props.onDragStart(event, data);
};
onDragOver = (event, data) => {
const {dragAbleOrBordStart} = this.state;
this.setState({
dragAbleOrBordStart:""
})
if (!this.currentObj || this.currentObj.key == data.key) return;
event.preventDefault();
this.props.onDragOver(event, data);
};
onDragEnter = (event, data) => {
if (!this.currentObj || this.currentObj.key == data.key) return;
this.props.onDragEnter(event, data);
};
onDrop = (event, data) => {
if (!this.currentObj || this.currentObj.key == data.key) return;
this.props.onDrop(event, data);
};
onMouseOver = (event, data) => {
//如果是固定列没有拖拽功能
if (this.border || data.fixed) return;
const { clsPrefix } = this.props;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}
};
ableOnMouseMove = (event, data) => {
let {dragAbleOrBord} = this.state;
if(dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart")return;
if(dragAbleOrBord === "able")return;
this.setState({
dragAbleOrBord:"able"
})
};
onMouseMove = (event, data) => {
let {dragAbleOrBord} = this.state;
if(dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart")return;
if(dragAbleOrBord != "border"){
this.setState({
dragAbleOrBord:"border"
})
}
//如果是固定列没有拖拽功能
if (this.border || data.fixed) return;
// const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
};
onMouseOut = (event, data) => {
if (this.border) return;
const { clsPrefix } = this.props;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
};
onMouseDown = (event, data) => {
let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
this.setState({
dragAbleOrBordStart:dragAbleOrBord==="border"?"borderStart":"",
})
// console.log("-改变宽-----度--",dragAbleOrBordStart);
this.border = true;
const { clsPrefix, contentTable } = this.props;
this.drag.initPageLeftX = event.pageX;
this.drag.initLeft = tryParseInt(event.target.style.left);
this.drag.x = this.drag.initLeft;
this.drag.currIndex = this.props.rows[0].findIndex(
da => da.key == data.key
);
let contentTableDom = document.getElementById(
"u-table-drag-thead-" + this.theadKey
).parentNode;
const styleWidth = contentTableDom.style.width;
if (
styleWidth &&
(typeof styleWidth == "number" || styleWidth.includes("px"))
) {
this.contentTableWidth = parseInt(styleWidth);
} else {
this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
const dragColWidth = this.drag.data[this.drag.currIndex].width;
if (typeof dragColWidth == "string" && dragColWidth.indexOf("%") > -1) {
this.drag.width = (this.contentTableWidth * parseInt(dragColWidth)) / 100;
} else {
this.drag.width = parseInt(this.drag.data[this.drag.currIndex].width);
}
};
onMouseUp = (event, data) => {
this.setState({
dragAbleOrBordStart:""
})
this.border = false;
const { clsPrefix } = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
};
onThMouseUp = (event, data) => {
this.border = false;
const { clsPrefix, rows,columns } = this.props;
let eventDom = event.target;
let optDom;
if (eventDom.classList.contains(".th-drag-gap-hover")) {
optDom = eventDom;
} else {
optDom = eventDom.querySelector(`.${clsPrefix}-thead-th-drag-gap`);
}
if (optDom) {
optDom.classList.remove("th-drag-gap-hover");
optDom.classList.add("th-drag-gap");
}
// columns[this.drag.currIndex].width = data.width;
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (
typeof this.props.afterDragColWidth == "function" &&
rows &&
rows[0] &&
this.drag.currIndex
) {
this.props.afterDragColWidth(rows[0],this.drag.currIndex);
}
};
onThMouseMove = (event, data) => {
if (!this.border) return;
//固定表头拖拽
const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered,rows} = this.props;
let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
let contentTableDom = document.getElementById(
"u-table-drag-thead-" + this.theadKey
).parentNode;
if (!this.contentTableWidth) {
const styleWidth = contentTableDom.style.width;
if (
styleWidth &&
(typeof styleWidth == "number" || styleWidth.includes("px"))
) {
this.contentTableWidth = parseInt(styleWidth);
} else {
this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
}
const newTableWidth = this.contentTableWidth + x;
const newWidth = this.drag.width + x;
if (newWidth < this.props.minColumnWidth) {
//清楚样式
let moveDom = event.target.querySelector(".th-drag-gap-hover");
moveDom && moveDom.classList.remove("th-drag-gap-hover");
// event.target.classList.remove('th-drag-gap-hover');
return;
}
//设置hiden的left
//"u-table-drag-hide-table"
let currentHideDom = document
.getElementById("u-table-drag-hide-table-" + dragborderKey)
.getElementsByTagName("div")[this.drag.currIndex];
currentHideDom.style.left = this.drag.initPageLeftX + x - grap + "px";
//获取最小宽度，不让拖动
// let minWidth = 0;
// for(let i=0;i<=this.drag.currIndex;i++){
// minWidth += this.drag.data[i].width;
// }
// //判断最小值后在赋值 todo
// let currLeft = this.drag.initPageLeftX+x-grap;
// console.log("currLeft minWidth ",currLeft + " "+minWidth);
// if(currLeft <= minWidth){
// return;
// }
// currentHideDom.style.left = currLeft+"px";
//设置当前的宽度
let currentData = this.drag.data[this.drag.currIndex];
currentData.width = newWidth;
let currentDom = document
.getElementById("u-table-drag-thead-" + this.theadKey)
.getElementsByTagName("th")[this.drag.currIndex];
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
// data.width = newWidth;
rows[0][this.drag.currIndex].width = newWidth;
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
//固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
const siblingDom = contentTableDom.parentNode.nextElementSibling;
if (siblingDom) {
const bodyTableDom = siblingDom.querySelector("table");
//2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
bodyTableDom.style.width = newTableWidth + "px";
//3、对应的col也要跟这变
let colDomArr = bodyTableDom.querySelectorAll("colgroup col");
colDomArr[this.drag.currIndex].style.width = newWidth + "px";
//4、设置overflow属性
}
//表头需要显示滚动条时，需兼容含有固定列
if(headerScroll){
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
if(bordered){
showScroll = showScroll -1;
}
const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
bodyEventListen(events,type){
for (let i = 0; i < events.length; i++) {
const _event = events[i];
if(type == "remove"){
document.removeEventListener(_event.key,_event.fun);
}else{
contentTableHeader.style.overflowX = 'hidden';
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
document.addEventListener(_event.key,_event.fun);
}
}
}
componentDidUpdate(){
this.initTable();
this.initEvent();
}
componentDidMount(){
this.initTable();
this.initEvent();
}
/**
* 拖拽列宽的事件处理
*/
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);//表示把事件添加到竖线
}
/**
* 移除拖拽宽度的事件
*/
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');
}
/**
* 获取table的属性存放在this.table 中。(公用方法)
*/
initTable(){
if(!this.props.dragborder && !this.props.draggable)return;
let el = ReactDOM.findDOMNode(this);
let tableDome = el.parentNode;
let table = {};
if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
}
this.table = table;
if(!this.props.dragborder)return;
if(document.getElementById("u-table-drag-thead-" + this.theadKey)){
//hao 固定列table
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.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
}
}
}
//---拖拽列宽代码逻辑----start-----
onLineMouseMove = (e) => {
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;
}
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
if(newWidth > this.drag.minWidth){
currentCols.style.width = newWidth +'px';
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
//表头滚动条处理
if(headerScroll){
let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
const newTableWidth = oldTableWidth + diff ;
this.table.table.style.width = newTableWidth;//改变table的width
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
// if(bordered){
// showScroll = showScroll -1;
// }
const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
}else{
contentTableHeader.style.overflowX = 'hidden';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
}
}
}
};
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;
};
onLineMouseUp = (event) => {
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.clearDragBorder(event);
};
bodyonLineMouseMove = (event) => {
this.clearDragBorder(event);
};
clearDragBorder(){
// if (!this.props.dragborder || !this.props.draggable) return;
if(!this.drag)return;
this.drag = {
option:""
};
if (!this.props.draggable){
this.removeDragAbleEvent();
}
}
//---拖拽列宽代码逻辑----start-----
dragAbleMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.draggable) return;
event.target.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
this.addDragAbleEvent(); //添加拖拽交换列的事件
}
/**
* 拖拽交换列的事件处理
*/
addDragAbleEvent (){
let events = [
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
// {key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件
];
this.thEventListen(events,'',true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
}
removeDragAbleEvent(){
let 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);
}
onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
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) => {
event.preventDefault();
};
/**
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
* @memberof TableHeader
*/
// onDragEnter = (e) => {
// if (!this.props.draggable) return;
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
*/
onDrop = (e) => {
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let data = this.getCurrentEventData(e);
if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
};
getCurrentEventData(e){
let event = Event.getEvent(e);
let key = event.target.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;
}
}
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
*/
@ -433,8 +454,7 @@ class TableHeader extends Component {
};
render() {
const {dragAbleOrBord,dragAbleOrBordStart} = this.state;
render() {
const {
clsPrefix,
rowStyle,
@ -458,10 +478,10 @@ class TableHeader extends Component {
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return (
<thead className={`${clsPrefix}-thead`} {...attr}>
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, i, arr) => {
{row.map((da, columIndex, arr) => {
let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover`
: "";
@ -472,97 +492,46 @@ class TableHeader extends Component {
fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
}
if (lastShowIndex == i) {
if (lastShowIndex == columIndex) {
canDotDrag = "th-can-not-drag";
}
if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType(
da["filtertype"],
da.dataindex,
i
columIndex
);
delete da.filterdropdownfocus;
}
let thAbleObj = {},thBorObj = {},thDefaultObj = {},thLineObj = {};
let thDefaultObj = {};
let thClassName = `${da.className}`;
if (draggable || dragborder) {
if (draggable && dragAbleOrBordStart != "borderStart") {
thAbleObj = {
...da,
onDragStart:(e)=>{this.onDragStart(e, da)},
onDragOver:(e)=>{this.onDragOver(e, da)},
onDrop:(e)=>{this.onDrop(e, da)},
onDragEnter:(e)=>{this.onDragEnter(e, da)},
onMouseMove:(e)=>{this.ableOnMouseMove(e, da)},
onMouseDown:(e)=>{
//避免表头其他元素对其影响
const filterDom = contentTable.querySelector('.filterable');
//是否是过滤行元素，是的话不触发
const isFilterDom =filterDom ?filterDom.contains(e.target):false;
if(e.target.classList.contains('uf') ||isFilterDom){
return;
}
if(e.target.classList.contains('uf')){
return;
}
let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
this.setState({
dragAbleOrBordStart:dragAbleOrBord==="able"?"ableStart":""
})
},
draggable:draggable,
// className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
key:da.key
};
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
}
// if (dragborder && dragAbleOrBord === "border") {
if (dragborder && dragAbleOrBordStart != "ableStart") {
thBorObj.style={'width': da.width }
// thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
thBorObj.onMouseMove = (e)=>{
if(draggable){
this.ableOnMouseMove(e, da)
}
this.onThMouseMove(e, da)
if(draggable){
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
}
thBorObj.onMouseUp = (e)=>{this.onThMouseUp(e, da)}
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
thBorObj.style= { width: da.width }
// key:i
}
// thObj.className = thObj.className+`${fixedStyle}`;
thClassName += `${fixedStyle}`;
if(dragborder){
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += `${fixedStyle}`;
if(!da.fixed){
thLineObj = {
onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
onMouseOut:(e)=>{this.onMouseOut(e, da)},
onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
onMouseUp:(e)=>{this.onMouseUp(e, da)},
onMouseOver:(e)=>{this.onMouseOver(e, da)},
// className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
};
if(dragAbleOrBordStart !== 'ableStart'){
thLineObj.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
}
return (<th key={Math.random()+new Date().getTime()} {...thAbleObj} {...thBorObj} className={thClassName} >
{da.children}
{
da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} ><div id='th-online' className='online' /></div>
}
</th>)
return (<th key={Math.random()+new Date().getTime()} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
{da.children}
{
dragborder ? <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>:""
}
</th>)
}else{
thDefaultObj = {
...da,
className:`${da.className} ${fixedStyle}`,
key:i
key:columIndex
};
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
return (<th {...thDefaultObj} />)
return (<th {...thDefaultObj} data-th-fixed={da.fixed} />)
}
})}
</tr>

91
src/lib/dragColumn.js
View File

@ -32,60 +32,59 @@ export default function dragColumn(Table) {
return _column;
}
onDragStart=(event,data)=>{
if(this.props.onDragStart){
this.props.onDragStart(event,data)
}
cloneDeep(obj){
if( typeof obj !== 'object' || Object.keys(obj).length === 0 ){
return obj
}
let resultData = {}
return this.recursion(obj, resultData)
}
onDragOver=(event,data)=>{
if(this.props.onDragOver){
this.props.onDragOver(event,data)
}
}
onDragEnter=(event,data)=>{
if(data.key == "checkbox")return;
const {columns:_columns} = this.state;
let columns = [];
Object.assign(columns,_columns);
columns.forEach((da)=>da.drgHover = false)
let current = columns.find((da)=>da.key == data.key);
if(current.fixed)return;
current.drgHover = true;
this.setState({
columns
});
if(this.props.onDragEnter){
this.props.onDragEnter(event,data);
}
recursion(obj, data={}){
for(key in obj){
if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
data[key] = recursion(obj[key])
}else{
data[key] = obj[key]
}
}
return data
}
onDrop=(event,data)=>{
if(data.key == "checkbox")return;
let {columns} = this.state;
const id = event.dataTransfer.getData("Text");
let objIndex = columns.findIndex((_da,i)=>_da.key == id);
let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
if(columns[objIndex].fixed)return;//固定列不让拖拽
if(columns[targetIndex].fixed)return;//固定列不让拖拽
columns.forEach((da,i)=>{
da.drgHover = false;
if(da.key == id){//obj
da.dragIndex = targetIndex
let {dragSource,dragTarg} = data;
let {columns} = this.state;
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key);
let dragTargColum = columns.find((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 == data.key){//targetObj
da.dragIndex = objIndex;
if(da.key === dragTarg.key){
columns[index] = dragSourceColum;
}
});
let _columns = columns.sort(compare('dragIndex'));
this.setState({
columns:_columns.slice()
});
if(this.props.onDrop){
this.props.onDrop(event,data,columns);
}
let titles = [];
columns.forEach(da=>{
if(typeof da.title != "string"){
titles.push(da.title);
delete da.title;
}
});
let newColumns = null;
if(titles.length != 0){
newColumns = JSON.parse(JSON.stringify(columns));
for (let index = 0; index < newColumns.length; index++) {
newColumns[index].title = titles[index];
}
console.log("----columns----",newColumns);
}else{
newColumns = JSON.parse(JSON.stringify(columns));
}
this.setState({
columns:newColumns
});
}
getTarget=(evt)=>{

57
src/utils.js
View File

@ -170,4 +170,61 @@ export function getColChildrenLength(columns,chilrenLen){
}
})
return chilrenLen;
}
function addHandler(element,type,handler){
if(element.addEventListener){//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
}else if (element.attachEvent){//检测是否为IE级方法
element.attachEvent("on" + type, handler);
} else {//检测是否为DOM0级方法
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
//获取事件对象的兼容性写法
function getEvent(event){
return event ? event : window.event;
}
//获取事件对象目标的兼容性写法
function getTarget(event){
return event.target || event.srcElement;
}
function preventDefault(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
function stopPropagation(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
export const Event = {
addHandler,
removeHandler,
getEvent,
getTarget,
preventDefault,
stopPropagation
}