merge
This commit is contained in:
izbz wh
commit
e85e352698
117
CHANGELOG.md
117
CHANGELOG.md
|
|
@ -1,5 +1,49 @@
|
|||
<a name="2.0.14"></a>
|
||||
## [2.0.14](https://github.com/tinper-bee/bee-table/compare/v2.0.13...v2.0.14) (2019-04-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* filterColumn内容超出8个字显示省略号 ([2878e39](https://github.com/tinper-bee/bee-table/commit/2878e39))
|
||||
* 过滤列遮挡行线 ([bc07ab3](https://github.com/tinper-bee/bee-table/commit/bc07ab3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 在固定列中使用图片时增加注意事项 ([6ac9f76](https://github.com/tinper-bee/bee-table/commit/6ac9f76))
|
||||
* **drag row:** drag row ([81bd1cc](https://github.com/tinper-bee/bee-table/commit/81bd1cc))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **drag row:** drag row
|
||||
|
||||
|
||||
|
||||
<a name="2.0.13"></a>
|
||||
## [2.0.13](https://github.com/tinper-bee/bee-table/compare/v2.0.12...v2.0.13) (2019-04-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 全选表格含有disabled状态并且是勾选状态bug ([162dec5](https://github.com/tinper-bee/bee-table/commit/162dec5))
|
||||
* 页面尺寸改变时，重新计算表格宽度 ([7e997b7](https://github.com/tinper-bee/bee-table/commit/7e997b7))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* filterColumn 中item字体为12px，点击文字checkbox也可以选中 ([f8f983f](https://github.com/tinper-bee/bee-table/commit/f8f983f))
|
||||
* 增加表格内容是否显示在一行 ([df755b9](https://github.com/tinper-bee/bee-table/commit/df755b9))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.12"></a>
|
||||
## [2.0.12](https://github.com/tinper-bee/bee-table/compare/v2.0.9...v2.0.12) (2019-04-11)
|
||||
## [2.0.12](https://github.com/tinper-bee/bee-table/compare/v2.0.11...v2.0.12) (2019-04-11)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.11"></a>
|
||||
## [2.0.11](https://github.com/tinper-bee/bee-table/compare/v2.0.10...v2.0.11) (2019-04-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -10,23 +54,75 @@
|
|||
|
||||
|
||||
|
||||
<a name="2.0.10"></a>
|
||||
## [2.0.10](https://github.com/tinper-bee/bee-table/compare/v2.0.9...v2.0.10) (2019-03-29)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.9"></a>
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.9) (2019-03-27)
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.8...v2.0.9) (2019-03-27)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.8"></a>
|
||||
## [2.0.8](https://github.com/tinper-bee/bee-table/compare/v2.0.7...v2.0.8) (2019-03-25)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.7"></a>
|
||||
## [2.0.7](https://github.com/tinper-bee/bee-table/compare/v2.0.6...v2.0.7) (2019-03-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
* Table 拖拽后同步表格整体宽度 ([ee40deb](https://github.com/tinper-bee/bee-table/commit/ee40deb))
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
* 表格key警告问题 ([6977e2f](https://github.com/tinper-bee/bee-table/commit/6977e2f))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.6"></a>
|
||||
## [2.0.6](https://github.com/tinper-bee/bee-table/compare/v2.0.5...v2.0.6) (2019-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.5"></a>
|
||||
## [2.0.5](https://github.com/tinper-bee/bee-table/compare/v2.0.4...v2.0.5) (2019-03-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## [2.0.4](https://github.com/tinper-bee/bee-table/compare/v2.0.3...v2.0.4) (2019-03-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## [2.0.3](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.3) (2019-03-05)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01)
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.44...v2.0.0) (2019-03-01)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.44"></a>
|
||||
## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26)
|
||||
|
||||
|
||||
|
||||
|
|
@ -606,7 +702,12 @@
|
|||
|
||||
|
||||
<a name="1.2.9"></a>
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
<a name="1.2.8"></a>
|
||||
## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -162,9 +162,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
@ -320,8 +320,8 @@
|
|||
.u-table-filter-column-filter-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
|
|
@ -356,7 +356,8 @@
|
|||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px; }
|
||||
margin: 0px;
|
||||
display: block; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
|
|
|
|||
|
|
@ -105,7 +105,8 @@ var propTypes = {
|
|||
syncHover: _propTypes2["default"].bool,
|
||||
tabIndex: _propTypes2["default"].string,
|
||||
hoverContent: _propTypes2["default"].func,
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -151,7 +152,8 @@ var defaultProps = {
|
|||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
size: 'md'
|
||||
size: 'md',
|
||||
rowDraggAble: false
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -171,6 +173,19 @@ var Table = function (_Component) {
|
|||
});
|
||||
};
|
||||
|
||||
_this.onDragRow = function (currentIndex, targetIndex) {
|
||||
var data = _this.state.data,
|
||||
currentObj = data[currentIndex],
|
||||
targetObj = data[targetIndex];
|
||||
|
||||
console.log(currentIndex + " ----------onRowDragEnd-------- " + targetIndex);
|
||||
data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
|
||||
console.log(" _data---- ", data);
|
||||
_this.setState({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
_this.renderDragHideTable = function () {
|
||||
var _this$props = _this.props,
|
||||
columns = _this$props.columns,
|
||||
|
|
@ -664,9 +679,12 @@ var Table = function (_Component) {
|
|||
indent: 1,
|
||||
expandable: false,
|
||||
store: this.store,
|
||||
dragborderKey: this.props.dragborderKey
|
||||
dragborderKey: this.props.dragborderKey,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -679,8 +697,6 @@ var Table = function (_Component) {
|
|||
* @returns
|
||||
* @memberof Table
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||||
|
||||
|
|
@ -801,7 +817,10 @@ var Table = function (_Component) {
|
|||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||||
rootIndex: rootIndex,
|
||||
syncHover: props.syncHover,
|
||||
bodyDisplayInRow: props.bodyDisplayInRow
|
||||
bodyDisplayInRow: props.bodyDisplayInRow,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow,
|
||||
contentTable: this.contentTable
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
|
|||
|
|
@ -243,6 +243,7 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
|
@ -426,6 +427,7 @@ var TableHeader = function (_Component) {
|
|||
_this.minWidth = 80; //确定最小宽度就是80
|
||||
_this.table = null;
|
||||
_this._thead = null; //当前对象
|
||||
_this.event = false; //避免多次绑定问题
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -501,12 +503,24 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
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
|
||||
var _props = this.props,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable;
|
||||
|
||||
if (!this.event) {
|
||||
//避免多次绑定问题。
|
||||
this.event = true;
|
||||
if (dragborder) {
|
||||
this.dragBorderEventInit(); //列宽
|
||||
}
|
||||
if (dragborder) {
|
||||
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
|
||||
}
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -673,15 +687,15 @@ var TableHeader = function (_Component) {
|
|||
TableHeader.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
rowStyle = _props.rowStyle,
|
||||
draggable = _props.draggable,
|
||||
dragborder = _props.dragborder,
|
||||
rows = _props.rows,
|
||||
filterable = _props.filterable,
|
||||
fixed = _props.fixed,
|
||||
lastShowIndex = _props.lastShowIndex;
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
rowStyle = _props2.rowStyle,
|
||||
draggable = _props2.draggable,
|
||||
dragborder = _props2.dragborder,
|
||||
rows = _props2.rows,
|
||||
filterable = _props2.filterable,
|
||||
fixed = _props2.fixed,
|
||||
lastShowIndex = _props2.lastShowIndex;
|
||||
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
|
|
@ -694,7 +708,7 @@ var TableHeader = function (_Component) {
|
|||
var _rowLeng = row.length - 1;
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ var _propTypes = require('prop-types');
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require('./utils');
|
||||
|
||||
var _TableCell = require('./TableCell');
|
||||
|
||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||
|
|
@ -52,7 +54,9 @@ var propTypes = {
|
|||
indentSize: _propTypes2["default"].number,
|
||||
expandIconAsCell: _propTypes2["default"].bool,
|
||||
expandRowByClick: _propTypes2["default"].bool,
|
||||
store: _propTypes2["default"].object.isRequired
|
||||
store: _propTypes2["default"].object.isRequired,
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDragRow: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -65,7 +69,9 @@ var defaultProps = {
|
|||
onHover: function onHover() {},
|
||||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {}
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -76,6 +82,112 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.initEvent = function () {
|
||||
var events = [{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, '', _this.element);
|
||||
};
|
||||
|
||||
_this.removeDragAbleEvent = function () {
|
||||
var events = [{ key: 'dragstart', fun: _this.onDragStart }, { key: 'dragover', fun: _this.onDragOver }, { key: 'drop', fun: _this.onDrop }, { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, 'remove', _this.element);
|
||||
};
|
||||
|
||||
_this.onDragStart = function (e) {
|
||||
if (!_this.props.rowDraggAble) return;
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
_this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var _this$props = _this.props,
|
||||
rowDraggAble = _this$props.rowDraggAble,
|
||||
onDragRow = _this$props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(_this.currentIndex, null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
}
|
||||
var _currentIndex = event.dataTransfer.getData("text");
|
||||
onDragRow && onDragRow(parseInt(_this.currentIndex--), parseInt(currentIndex--));
|
||||
};
|
||||
|
||||
_this.synchronizeTableTr = function (currentIndex, type) {
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
_this.synchronizeTrStyle(_table_trs, currentIndex, type);
|
||||
if (_table_fixed_left_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);
|
||||
}
|
||||
if (_table_fixed_right_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_right_trs, currentIndex, type);
|
||||
}
|
||||
};
|
||||
|
||||
_this.synchronizeTrStyle = function (_elementBody, id, type) {
|
||||
var contentTable = _this.props.contentTable,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj = void 0;
|
||||
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
var element = trs[index];
|
||||
if (element.getAttribute("data-row-key") == id) {
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, null);
|
||||
}
|
||||
};
|
||||
|
||||
_this.set = function (fn) {
|
||||
_this.clear();
|
||||
_this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -100,6 +212,7 @@ var TableRow = function (_Component) {
|
|||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +222,8 @@ var TableRow = function (_Component) {
|
|||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey,
|
||||
treeType = _props.treeType;
|
||||
treeType = _props.treeType,
|
||||
rowDraggAble = _props.rowDraggAble;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
|
|
@ -125,7 +239,61 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
TableRow.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
if (rowDraggAble) {
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
|
@ -136,12 +304,16 @@ var TableRow = function (_Component) {
|
|||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index;
|
||||
index = _props2.index,
|
||||
rowDraggAble = _props2.rowDraggAble;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if (rowDraggAble) {
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
|
|
@ -162,7 +334,6 @@ var TableRow = function (_Component) {
|
|||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
|
@ -235,6 +406,7 @@ var TableRow = function (_Component) {
|
|||
expandIconAsCell = _props9.expandIconAsCell,
|
||||
expanded = _props9.expanded,
|
||||
expandRowByClick = _props9.expandRowByClick,
|
||||
rowDraggAble = _props9.rowDraggAble,
|
||||
expandable = _props9.expandable,
|
||||
onExpand = _props9.onExpand,
|
||||
needIndentSpaced = _props9.needIndentSpaced,
|
||||
|
|
@ -250,7 +422,6 @@ var TableRow = function (_Component) {
|
|||
if (this.state.hovered) {
|
||||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
// console.log('className--'+className,index);
|
||||
//判断是否为合计行
|
||||
if (className.indexOf('sumrow') > -1) {
|
||||
showSum = true;
|
||||
|
|
@ -297,15 +468,18 @@ var TableRow = function (_Component) {
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
draggable: rowDraggAble,
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : "null"
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
|
|
|
|||
|
|
@ -229,12 +229,12 @@ function filterColumn(Table, Popover) {
|
|||
_this2.checkedColumItemClick(da);
|
||||
};
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{
|
||||
key: da.key + "_" + i,
|
||||
className: prefixCls + "-pop-cont-item"
|
||||
className: prefixCls + "-pop-cont-item",
|
||||
onClick: paramObj.onClick ? paramObj.onClick : null
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
_beeCheckbox2["default"],
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
||||
// @import "../src/Table.scss";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
//引入日期控件样式文件
|
||||
|
|
@ -33,9 +33,12 @@
|
|||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
border-color: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
border-color: #505F79;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,49 +11,20 @@ import {Button,Tooltip} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
|
|
@ -64,4 +35,4 @@ class Demo01 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
||||
export default Demo0101;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
const columns02 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
|
|
@ -31,7 +30,7 @@ const columns02 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data02 = [];
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
|
@ -40,8 +39,8 @@ class Demo02 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns02}
|
||||
data={data02}
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -18,12 +18,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class Demo33 extends Component {
|
|||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,512 @@
|
|||
/**
|
||||
*
|
||||
* @title 行编辑 - 行内编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对行进行编辑的表格
|
||||
*
|
||||
*/
|
||||
import React, { Component, PureComponent } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select,Form,FormControl,Button,Icon,Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
function handleFormValueChange(WarpCompProps, field, allFields) {
|
||||
const { onChange, throwError } = WarpCompProps;
|
||||
if (field.value === "") return throwError && throwError(true);
|
||||
throwError && throwError(false);
|
||||
onChange && onChange(field.value);
|
||||
}
|
||||
|
||||
const StringEditCell = Form.createForm({
|
||||
onValuesChange: handleFormValueChange
|
||||
})(PureStringEditCell);
|
||||
|
||||
function PureStringEditCell(props) {
|
||||
const { getFieldProps, getFieldError } = props.form;
|
||||
const { value, editable, required } = props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className={cls}>
|
||||
<FormControl
|
||||
{...getFieldProps("value", {
|
||||
initialValue: value,
|
||||
validateTrigger: "onBlur",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("value")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper">{value || " "}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable } = this.props;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Select value={this.props.value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper">{value || " "}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, editable, required } = this.props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper">{value.name || " "}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0501 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.originData = {};
|
||||
}
|
||||
|
||||
edit = index => () => {
|
||||
if (index === null) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
editingRowsMap[index] = index.toString();
|
||||
this.originData[index] = { ...this.state.dataSource[index] };
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
abortEdit = index => () => {
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index] = this.originData[index];
|
||||
delete editingRowsMap[index];
|
||||
delete this.originData[index];
|
||||
this.setState({ editingRowsMap, dataSource });
|
||||
};
|
||||
|
||||
commitChange = index => () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.currentRecord = record;
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
renderRowHover = () => {
|
||||
const { currentIndex } = this.state;
|
||||
return this.state.editingRowsMap[currentIndex] ? (
|
||||
<div className={"opt-btns"}>
|
||||
<Button colors="dark" onClick={this.abortEdit(currentIndex)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.commitChange(currentIndex)}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={"opt-btns"}>
|
||||
<Button colors="dark" onClick={this.edit(currentIndex)}>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0501">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0501;
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.demo0501 .u-table {
|
||||
.u-row-hover {
|
||||
.opt-btns {
|
||||
button {
|
||||
border-radius: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 2px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ class StringEditCell extends Component {
|
|||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
this.editWarp = React.createRef();
|
||||
}
|
||||
|
||||
commitChange = () => {
|
||||
|
|
@ -39,6 +40,7 @@ class StringEditCell extends Component {
|
|||
};
|
||||
|
||||
handleChange = e => {
|
||||
if (e.target.value === "") this.editWarp.className += " verify-cell";
|
||||
this.setState({ value: e.target.value });
|
||||
};
|
||||
|
||||
|
|
@ -47,7 +49,7 @@ class StringEditCell extends Component {
|
|||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
|
||||
<input
|
||||
className={value ? "u-form-control" : "u-form-control error"}
|
||||
autoFocus
|
||||
|
|
@ -60,10 +62,10 @@ class StringEditCell extends Component {
|
|||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="tp-0502"
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="help-tip">
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -490,7 +492,7 @@ class Demo0502 extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo0502">
|
||||
<div className="demo0502 u-editable-table">
|
||||
<Table data={this.state.dataSource} columns={this.columns} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,21 +1,28 @@
|
|||
.demo0502 {
|
||||
.u-editable-table .u-table {
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input.error {
|
||||
border-color: #F44336;
|
||||
input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
&.error {
|
||||
border-color: #F44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
line-height: 18px;
|
||||
border: 1px solid #c1c7d0;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
|
|
@ -26,11 +33,14 @@
|
|||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
line-height: 18px;
|
||||
border: 1px solid #a5adba;
|
||||
}
|
||||
.editable-cell-input-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.require {
|
||||
|
|
@ -41,16 +51,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.help-tip {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.tp-0502 {
|
||||
.tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important;
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-color: #F44336 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,10 +6,6 @@
|
|||
* demo0702
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
|
|
@ -17,8 +13,7 @@ import Table from '../../src';
|
|||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { Item } = Menu;
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
|
|
@ -106,38 +101,34 @@ class Demo27 extends Component {
|
|||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onClick = (item) => {
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
<Menu
|
||||
onSelect={this.onSelect}>
|
||||
<Item key="1">模态弹出</Item>
|
||||
<Item key="2">链接跳转</Item>
|
||||
<Item key="3">打开新页</Item>
|
||||
</Menu>);
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
</Dropdown>
|
||||
}
|
||||
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
|
|
|
|||
|
|
@ -92,7 +92,10 @@ class Demo105 extends Component {
|
|||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
return <div className="opt-btns">
|
||||
<Button size="sm" onClick={this.handleClick}>编辑</Button>
|
||||
<Button size="sm" onClick={this.handleClick}>删除</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description 拖拽改变行顺序
|
||||
* Demo1201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100,fixed:'right'}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "1003" }
|
||||
];
|
||||
|
||||
class Demo1201 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowDraggAble={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1201;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @title 多选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
*
|
||||
* @title 单选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 表格支持单选行操作，可自定义选中行背景色。
|
||||
* Demo1304
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,Radio} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const data = [
|
||||
{ check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ check: "ASVAL_201903120002",a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1304 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
selectedValue:"ASVAL_201903200004"
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let {selectedValue} = this.state;
|
||||
let columns = [
|
||||
{ title: "单选", dataIndex: "check", key: "check", width: 80,render(text, record, index){
|
||||
return(
|
||||
<Radio.RadioGroup name="fruits" selectedValue={selectedValue}>
|
||||
<Radio value={record.check} />
|
||||
</Radio.RadioGroup>)
|
||||
}},
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index,
|
||||
selectedValue:record.check
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1304;
|
||||
|
|
@ -27,12 +27,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,12 +26,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,645 @@
|
|||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #212121;
|
||||
position: relative;
|
||||
line-height: 1.33;
|
||||
overflow: hidden; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
.u-table-hiden-drag {
|
||||
position: relative; }
|
||||
.u-table-hiden-drag-li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 16px; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
line-height: 1.33; }
|
||||
.u-table td a {
|
||||
color: #2196F3; }
|
||||
.u-table td a:hover {
|
||||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
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 {
|
||||
color: #2196F3; }
|
||||
.u-table tr tr a:hover {
|
||||
color: #1565c0; }
|
||||
.u-table tr tr a:active {
|
||||
color: #1565c0; }
|
||||
.u-table tr.tr-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table th,
|
||||
.u-table td {
|
||||
padding: 12px 8px;
|
||||
word-break: break-all; }
|
||||
.u-table th.text-center,
|
||||
.u-table td.text-center {
|
||||
text-align: center; }
|
||||
.u-table th.text-right,
|
||||
.u-table td.text-right {
|
||||
text-align: right; }
|
||||
.u-table-sm td {
|
||||
padding: 8px 8px; }
|
||||
.u-table-lg td {
|
||||
padding: 16px 8px; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important; }
|
||||
.u-table tr.filterable th .filterContext {
|
||||
height: 35px; }
|
||||
.u-table tr.filterable th .u-select-selection--single {
|
||||
height: 26px; }
|
||||
.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-scroll {
|
||||
overflow: auto; }
|
||||
.u-table-bordered table {
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
.u-table-bordered .u-table-header > table {
|
||||
border-bottom: 0; }
|
||||
.u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {
|
||||
border-top: 0px; }
|
||||
.u-table-bordered th {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
box-sizing: border-box; }
|
||||
.u-table-bordered th,
|
||||
.u-table-bordered td {
|
||||
border-right: 1px solid rgb(193, 199, 208);
|
||||
box-sizing: border-box; }
|
||||
.u-table-drag-border tr th.th-can-not-drag {
|
||||
overflow: hidden; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33); }
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
.u-table-fixed-left .u-table-body-inner {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px; }
|
||||
.u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
|
||||
padding-right: 0px; }
|
||||
.u-table-fixed-header .u-table-body-inner {
|
||||
height: 100%; }
|
||||
.u-table-fixed-header .u-table-scroll .u-table-header {
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -20px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box; }
|
||||
.u-table-title {
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid rgb(193, 199, 208); }
|
||||
.u-table-content {
|
||||
position: relative; }
|
||||
.u-table-footer {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid rgb(193, 199, 208); }
|
||||
.u-table-footer .u-table-scroll {
|
||||
overflow-x: hidden; }
|
||||
.u-table-footer .u-table {
|
||||
margin: -12px -8px; }
|
||||
.u-table-placeholder {
|
||||
padding: 12px 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
.u-table-placeholder .table-nodata {
|
||||
font-size: 48px; }
|
||||
.u-table-expand-icon-col {
|
||||
width: 10px; }
|
||||
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
|
||||
background: #fff; }
|
||||
.u-table-row .u-table tr.u-table-row-hover, .u-table-expanded-row .u-table tr.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
margin-right: 10px; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
content: "."; }
|
||||
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
|
||||
content: "-"; }
|
||||
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
|
||||
content: "+"; }
|
||||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
display: none; }
|
||||
.u-table-prev-columns-page, .u-table-next-columns-page {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
z-index: 1; }
|
||||
.u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {
|
||||
color: #2db7f5; }
|
||||
.u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {
|
||||
cursor: not-allowed;
|
||||
color: #999; }
|
||||
.u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {
|
||||
color: #999; }
|
||||
.u-table-prev-columns-page {
|
||||
margin-right: 8px; }
|
||||
.u-table-prev-columns-page:before {
|
||||
content: "<"; }
|
||||
.u-table-next-columns-page {
|
||||
float: right; }
|
||||
.u-table-next-columns-page:before {
|
||||
content: ">"; }
|
||||
.u-table-fixed-left, .u-table-fixed-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1; }
|
||||
.u-table-fixed-left table, .u-table-fixed-right table {
|
||||
width: auto;
|
||||
background: #fff; }
|
||||
.u-table-fixed-left {
|
||||
left: 0;
|
||||
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
|
||||
.u-table-fixed-left-body-inner {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px; }
|
||||
.u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
|
||||
padding-right: 0; }
|
||||
.u-table-fixed-right {
|
||||
right: 0;
|
||||
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }
|
||||
.u-table-fixed-right-expanded-row {
|
||||
color: transparent;
|
||||
pointer-events: none; }
|
||||
.u-table-scroll-position-left .u-table-fixed-left {
|
||||
box-shadow: none; }
|
||||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
|
||||
font-weight: normal; }
|
||||
.u-table-thead .filter-wrap {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33);
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-top: -3px; }
|
||||
.u-table-thead th .bee-table-column-sorter i {
|
||||
padding: 0px;
|
||||
font-weight: 600;
|
||||
color: #505F79; }
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
|
||||
line-height: 16px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
cursor: pointer; }
|
||||
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,
|
||||
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {
|
||||
color: #108ee9; }
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
|
||||
filter: none;
|
||||
font-size: 12px; }
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-size: 8px\9;
|
||||
transform: scale(0.66667) rotate(0deg);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||
zoom: 1;
|
||||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999; }
|
||||
.u-table-thead th:hover .bee-table-column-sorter {
|
||||
display: inline-block; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: move; }
|
||||
.u-table-thead .th-drag:hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-thead .th-drag-hover {
|
||||
background: #ccc; }
|
||||
.u-table-thead-th {
|
||||
position: relative; }
|
||||
.u-table-thead-th-drag-gap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
.u-table-thead-th-drag-gap .online {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: transparent;
|
||||
margin: 0 auto; }
|
||||
.u-table-thead-th-drag-gap .online-hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th-drag-gap:hover {
|
||||
cursor: col-resize; }
|
||||
.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 {
|
||||
margin: 0px;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
color: #212121; }
|
||||
.u-table-filter-column-clear-setting {
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px; }
|
||||
.u-table-filter-column-cont {
|
||||
position: relative; }
|
||||
.u-table-filter-column-filter-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
background: rgb(241, 242, 245);
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-filter-icon i.uf {
|
||||
padding: 0px;
|
||||
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; }
|
||||
.u-table-filter-column-pop-cont-item span.drop-menu-title {
|
||||
margin-left: -3px;
|
||||
max-width: 132px;
|
||||
width: auto !important;
|
||||
min-width: 56px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
.u-table-row-fixed-columns-in-body {
|
||||
display: none;
|
||||
pointer-events: none; }
|
||||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px;
|
||||
display: block; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
|
||||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
.u-table ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
.u-table ::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
.u-table ::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0; }
|
||||
|
||||
.u-table-bordered .u-table-drag-gap {
|
||||
background: #e9e9e9; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
.u-table.bordered th,
|
||||
.u-table.bordered td {
|
||||
border: 1px solid rgb(193, 199, 208); }
|
||||
|
||||
.move-enter,
|
||||
.move-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-duration: 2.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused; }
|
||||
|
||||
.move-leave {
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused; }
|
||||
|
||||
.move-enter.move-enter-active,
|
||||
.move-appear.move-enter-active {
|
||||
animation-name: moveLeftIn;
|
||||
animation-play-state: running; }
|
||||
|
||||
.move-leave.move-leave-active {
|
||||
animation-name: moveRightOut;
|
||||
animation-play-state: running; }
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
background: rgb(238,238,238); }
|
||||
20% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
background: rgb(238,238,238); }
|
||||
100% {
|
||||
background: transparent;
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes moveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-30px);
|
||||
opacity: 0; } }
|
||||
|
||||
.formItem-style {
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
padding: 0; }
|
||||
|
||||
.errMessage-style {
|
||||
display: none;
|
||||
border: none;
|
||||
/* margin-top: 5px; */
|
||||
/* margin-bottom: 5px; */
|
||||
background: transparent;
|
||||
color: #f22c1d;
|
||||
/* padding-left: 12px; */
|
||||
/* padding-right: 12px; */
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 3px;
|
||||
right: 0; }
|
||||
|
||||
.editable-cell {
|
||||
position: relative; }
|
||||
|
||||
.editable-cell-input-wrapper,
|
||||
.editable-cell-text-wrapper {
|
||||
padding-right: 24px; }
|
||||
|
||||
.editable-cell-input-wrapper .u-form-item.formItem-style .u-label {
|
||||
display: none; }
|
||||
|
||||
.editable-cell-input-wrapper .u-input-group .u-form-control {
|
||||
height: 26px;
|
||||
font-size: 12px; }
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
height: 30px; }
|
||||
|
||||
.editable-cell-icon,
|
||||
.editable-cell-icon-check {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
cursor: pointer; }
|
||||
|
||||
.editable-cell-icon {
|
||||
line-height: 28px;
|
||||
display: none; }
|
||||
|
||||
.editable-cell-icon-check {
|
||||
line-height: 28px; }
|
||||
|
||||
.editable-cell:hover .editable-cell-icon {
|
||||
display: inline-block; }
|
||||
|
||||
.editable-cell-icon:hover,
|
||||
.editable-cell-icon-check:hover {
|
||||
color: #2db7f5; }
|
||||
|
||||
.editable-add-btn {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
.search-component {
|
||||
margin-bottom: 20px; }
|
||||
.search-component .empty-search {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
z-index: 20;
|
||||
top: 5px;
|
||||
color: #524e4e;
|
||||
cursor: pointer; }
|
||||
.search-component.u-input-group.simple {
|
||||
float: right; }
|
||||
.search-component.u-input-group.simple .u-form-control {
|
||||
width: 251px;
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
border-radius: 20px; }
|
||||
.search-component.u-input-group.simple .u-input-group-btn {
|
||||
top: 3px;
|
||||
right: 20px;
|
||||
position: absolute; }
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative; }
|
||||
.col-resize-container + .table-col-resizer:first-of-type {
|
||||
table-layout: fixed; }
|
||||
.col-resize-container .active-drag .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .last-handle {
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle {
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 10px;
|
||||
cursor: col-resize; }
|
||||
.col-resize-container .drag-handle .icon {
|
||||
color: #40b0dc;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
visibility: hidden; }
|
||||
.col-resize-container .drag-handle .icon:first-child {
|
||||
left: -2px; }
|
||||
.col-resize-container .drag-handle .icon:last-child {
|
||||
left: 6px; }
|
||||
.col-resize-container .drag-handle:hover .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .drag-handle:hover .col-resizer {
|
||||
border: 1px solid; }
|
||||
.col-resize-container .drag-handle.disabled-drag {
|
||||
cursor: default;
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle .col-resizer {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.filter-wrap .u-form-control {
|
||||
height: 26px; }
|
||||
|
||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
|
||||
height: 26px; }
|
||||
|
||||
.u-row-hover {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
display: none;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
background: transparent; }
|
||||
|
||||
.u-row-hover2 {
|
||||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
.header-dispaly-in-row th {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.body-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
.body-dispaly-in-row td {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.u-table-drag-hidden-cont {
|
||||
position: absolute;
|
||||
top: -1000px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper:focus {
|
||||
outline: none; }
|
||||
|
||||
.u-editable-table-tp .tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important; }
|
||||
|
||||
.u-editable-table-tp .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
|
||||
.selected {
|
||||
background: #FFF7E7; }
|
||||
|
||||
|
|
@ -7,10 +649,13 @@
|
|||
right: 15px; }
|
||||
|
||||
.opt-btns .u-button {
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79; }
|
||||
background: #505F79;
|
||||
border-color: #505F79; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background: #344563; }
|
||||
background: #344563;
|
||||
border-color: #505F79; }
|
||||
|
||||
.demo04.u-table tr:nth-child(2n) {
|
||||
background: #f7f9fb; }
|
||||
|
|
@ -25,44 +670,94 @@
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
<<<<<<< HEAD
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button {
|
||||
border-radius: 5px; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button:first-child {
|
||||
margin-right: 10px; }
|
||||
|
||||
.demo0501 .u-table .u-table-row td {
|
||||
=======
|
||||
.demo0502 .u-table-row td {
|
||||
>>>>>>> master
|
||||
padding: 5px 8px; }
|
||||
.demo0502 .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
.demo0501 .u-table .u-table-row td input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px; }
|
||||
|
||||
.demo0502 .u-table-row .editable-cell {
|
||||
.demo0501 .u-table .u-table-row .u-form-control,
|
||||
.demo0501 .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0502 .u-table-row-hover .editable-cell-text-wrapper {
|
||||
line-height: 18px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
|
||||
.demo0502 .u-table-row .u-form-control,
|
||||
.demo0502 .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0502 .editable-cell-text-wrapper {
|
||||
.demo0501 .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
.demo0502 .editable-cell-text-wrapper:hover {
|
||||
line-height: 18px;
|
||||
border: 1px solid #a5adba; }
|
||||
border-radius: 3px;
|
||||
padding-left: 0; }
|
||||
|
||||
.demo0502 .require {
|
||||
.demo0501 .u-table .required {
|
||||
margin-left: 10px;
|
||||
position: relative; }
|
||||
.demo0501 .u-table .required::before {
|
||||
content: " ";
|
||||
border: 2px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px; }
|
||||
.demo0501 .u-table .required span.u-input-group {
|
||||
display: block; }
|
||||
|
||||
.demo0501 .u-table .required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.help-tip {
|
||||
.demo0501 .u-table .ref-input-wrap {
|
||||
width: 160px !important; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.tp-0502 .tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important; }
|
||||
.u-editable-table .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.u-editable-table .u-table .u-table-row td input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px; }
|
||||
.u-editable-table .u-table .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
|
||||
.tp-0502 .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
.u-editable-table .u-table .u-table-row .editable-cell {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
line-height: 19px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row .u-form-control,
|
||||
.u-editable-table .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper {
|
||||
padding-right: 0; }
|
||||
|
||||
.u-editable-table .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.u-editable-table .u-table .require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
font-size: 12px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -72,6 +72,7 @@ import 'bee-table/build/Table.css';
|
|||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
|
||||
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
|
||||
| rowDraggAble | 是否增加行交换顺序功能 | boolean| false
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
|
|
|
|||
183
package.json
183
package.json
|
|
@ -1,95 +1,96 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.13",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
"name": "bee-table",
|
||||
"version": "2.0.15",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=6.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": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.5",
|
||||
"bee-loading": "^1.0.6",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^2.0.2",
|
||||
"bee-select": "^2.0.9",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"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-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"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": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
"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": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "^1.0.9",
|
||||
"bee-locale": "0.0.13",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.8",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"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-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"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": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
src/Table.js
24
src/Table.js
|
|
@ -54,6 +54,7 @@ const propTypes = {
|
|||
tabIndex:PropTypes.string,
|
||||
hoverContent:PropTypes.func,
|
||||
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -88,7 +89,8 @@ const defaultProps = {
|
|||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0',
|
||||
heightConsistent:false,
|
||||
size: 'md'
|
||||
size: 'md',
|
||||
rowDraggAble:false
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -522,10 +524,25 @@ class Table extends Component {
|
|||
indent={1}
|
||||
expandable={false}
|
||||
store={this.store}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
onDragRow={this.onDragRow}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
onDragRow = (currentIndex,targetIndex)=>{
|
||||
let {data} = this.state,
|
||||
currentObj = data[currentIndex],
|
||||
targetObj = data[targetIndex];
|
||||
console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex);
|
||||
data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
|
||||
console.log(" _data---- ",data);
|
||||
this.setState({
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -660,6 +677,9 @@ class Table extends Component {
|
|||
rootIndex = {rootIndex}
|
||||
syncHover = {props.syncHover}
|
||||
bodyDisplayInRow = {props.bodyDisplayInRow}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
onDragRow={this.onDragRow}
|
||||
contentTable={this.contentTable}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ $icon-color:#505F79;
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid $table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -297,9 +297,9 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
tr.u-table-expanded-row {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
}
|
||||
.u-table {
|
||||
// padding: 0 40px 0 20px;
|
||||
|
|
@ -546,8 +546,8 @@ $icon-color:#505F79;
|
|||
&-filter-icon{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 38px ;
|
||||
line-height: 38px;
|
||||
height: 39px ;
|
||||
line-height: 39px;
|
||||
right: 0px ;
|
||||
top:1px ;
|
||||
z-index: 2;
|
||||
|
|
@ -596,6 +596,7 @@ $icon-color:#505F79;
|
|||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
margin:0px;
|
||||
display: block;
|
||||
.u-checkbox-label{
|
||||
line-height: $checkbox-height;
|
||||
padding-left: 16px;
|
||||
|
|
@ -960,3 +961,36 @@ $icon-color:#505F79;
|
|||
position: absolute;
|
||||
top:-1000px;
|
||||
}
|
||||
|
||||
.u-editable-table .u-table {
|
||||
.u-table-row-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
&:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-input-wrapper {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-color: #F44336 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ class TableHeader extends Component {
|
|||
this.minWidth = 80;//确定最小宽度就是80
|
||||
this.table = null;
|
||||
this._thead = null;//当前对象
|
||||
this.event = false;//避免多次绑定问题
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -103,12 +104,20 @@ 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
|
||||
let {dragborder,draggable} = this.props;
|
||||
if(!this.event){ //避免多次绑定问题。
|
||||
this.event = true;
|
||||
if(dragborder){
|
||||
this.dragBorderEventInit();//列宽
|
||||
}
|
||||
if(dragborder){
|
||||
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
|
||||
}
|
||||
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -398,6 +407,7 @@ class TableHeader extends Component {
|
|||
};
|
||||
|
||||
onDragOver = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
|
@ -622,7 +632,7 @@ class TableHeader extends Component {
|
|||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => {
|
||||
let _rowLeng = (row.length-1);
|
||||
return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
|
|||
174
src/TableRow.js
174
src/TableRow.js
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Event,EventUtil} from "./utils";
|
||||
import TableCell from './TableCell';
|
||||
import ExpandIcon from './ExpandIcon';
|
||||
|
||||
|
|
@ -29,6 +30,8 @@ const propTypes = {
|
|||
expandIconAsCell: PropTypes.bool,
|
||||
expandRowByClick: PropTypes.bool,
|
||||
store: PropTypes.object.isRequired,
|
||||
rowDraggAble: PropTypes.bool,
|
||||
onDragRow: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -39,7 +42,9 @@ const defaultProps = {
|
|||
expandRowByClick: false,
|
||||
onHover() {},
|
||||
className:'',
|
||||
setRowParentIndex:()=>{}
|
||||
setRowParentIndex:()=>{},
|
||||
rowDraggAble:false,
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
class TableRow extends Component{
|
||||
|
|
@ -54,11 +59,12 @@ class TableRow extends Component{
|
|||
this.onMouseEnter = this.onMouseEnter.bind(this);
|
||||
this.onMouseLeave = this.onMouseLeave.bind(this);
|
||||
this.expandHeight = 0;
|
||||
this.event = false;
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
const { store, hoverKey,treeType } = this.props;
|
||||
const { store, hoverKey,treeType,rowDraggAble } = this.props;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
this.setState({ hovered: true });
|
||||
|
|
@ -71,23 +77,174 @@ class TableRow extends Component{
|
|||
if(treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
initEvent=()=>{
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
|
||||
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
|
||||
{key:'dragenter', fun:this.onDragEnter},
|
||||
{key:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
this.eventListen(events,'',this.element);
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
removeDragAbleEvent=()=>{
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},
|
||||
{key:'dragover', fun:this.onDragOver},
|
||||
{key:'drop', fun:this.onDrop},
|
||||
|
||||
{key:'dragenter', fun:this.onDragEnter},
|
||||
{key:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
this.eventListen(events,'remove',this.element);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
eventListen(events,type,eventSource){
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
onDragStart = (e) => {
|
||||
if (!this.props.rowDraggAble) return;
|
||||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", this.currentIndex);
|
||||
}
|
||||
|
||||
onDragOver = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onDrop = (e) => {
|
||||
let {rowDraggAble,onDragRow} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(this.currentIndex,null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
}
|
||||
let _currentIndex = event.dataTransfer.getData("text");
|
||||
onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--));
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
synchronizeTableTr = (currentIndex,type)=>{
|
||||
let {contentTable} = this.props;
|
||||
let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
this.synchronizeTrStyle(_table_trs,currentIndex,type);
|
||||
if(_table_fixed_left_trs){
|
||||
this.synchronizeTrStyle(_table_fixed_left_trs,currentIndex,type);
|
||||
}
|
||||
if(_table_fixed_right_trs){
|
||||
this.synchronizeTrStyle(_table_fixed_right_trs,currentIndex,type);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
synchronizeTrStyle = (_elementBody,id,type)=>{
|
||||
let {contentTable} = this.props,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj;
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
const element = trs[index];
|
||||
if(element.getAttribute("data-row-key") == id){
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if(type){
|
||||
currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
}else{
|
||||
currentObj && currentObj.setAttribute("style","");
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnter = (e) => {
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
}
|
||||
|
||||
onDragLeave = (e) => {
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,null);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { rowDraggAble } = this.props;
|
||||
if(!this.event){
|
||||
this.event = true;
|
||||
if(rowDraggAble){
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { record, onDestroy, index } = this.props;
|
||||
const { record, onDestroy, index,rowDraggAble } = this.props;
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if(rowDraggAble){
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -98,7 +255,6 @@ class TableRow extends Component{
|
|||
}
|
||||
setRowParentIndex(){
|
||||
const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
||||
|
||||
}
|
||||
|
|
@ -163,7 +319,7 @@ class TableRow extends Component{
|
|||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
|
|
@ -171,7 +327,6 @@ class TableRow extends Component{
|
|||
if (this.state.hovered) {
|
||||
className += ` ${clsPrefix}-hover`;
|
||||
}
|
||||
// console.log('className--'+className,index);
|
||||
//判断是否为合计行
|
||||
if(className.indexOf('sumrow')>-1){
|
||||
showSum = true;
|
||||
|
|
@ -223,14 +378,17 @@ class TableRow extends Component{
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble}
|
||||
onClick={this.onRowClick}
|
||||
onDoubleClick={this.onRowDoubleClick}
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
||||
style={style}
|
||||
data-row-key={record && record.key?record.key:"null"}
|
||||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -102,11 +102,11 @@ export default function filterColumn(Table, Popover) {
|
|||
this.checkedColumItemClick(da);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={da.key + "_" + i}
|
||||
className={`${prefixCls}-pop-cont-item`}
|
||||
onClick={paramObj.onClick?paramObj.onClick:null}
|
||||
>
|
||||
<Checkbox {...paramObj}>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue