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>
|
<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
|
### 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>
|
<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
|
### 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))
|
* 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))
|
* 表格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>
|
<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>
|
<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;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 16px;
|
line-height: 14px;
|
||||||
border: 1px solid rgb(193, 199, 208);
|
border: 1px solid rgb(193, 199, 208);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -162,9 +162,9 @@
|
||||||
.u-table-row.selected {
|
.u-table-row.selected {
|
||||||
background: #FFF7E7; }
|
background: #FFF7E7; }
|
||||||
.u-table tr.u-table-expanded-row {
|
.u-table tr.u-table-expanded-row {
|
||||||
background: #f7f7f7; }
|
background: #DFE1E6; }
|
||||||
.u-table tr.u-table-expanded-row:hover {
|
.u-table tr.u-table-expanded-row:hover {
|
||||||
background: #f7f7f7; }
|
background: #DFE1E6; }
|
||||||
.u-table tr.u-table-expanded-row .u-table {
|
.u-table tr.u-table-expanded-row .u-table {
|
||||||
z-index: 1; }
|
z-index: 1; }
|
||||||
.u-table-column-hidden {
|
.u-table-column-hidden {
|
||||||
|
|
@ -320,8 +320,8 @@
|
||||||
.u-table-filter-column-filter-icon {
|
.u-table-filter-column-filter-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 38px;
|
height: 39px;
|
||||||
line-height: 38px;
|
line-height: 39px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
@ -356,7 +356,8 @@
|
||||||
.u-table .u-checkbox {
|
.u-table .u-checkbox {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
margin: 0px; }
|
margin: 0px;
|
||||||
|
display: block; }
|
||||||
.u-table .u-checkbox .u-checkbox-label {
|
.u-table .u-checkbox .u-checkbox-label {
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
padding-left: 16px; }
|
padding-left: 16px; }
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,8 @@ var propTypes = {
|
||||||
syncHover: _propTypes2["default"].bool,
|
syncHover: _propTypes2["default"].bool,
|
||||||
tabIndex: _propTypes2["default"].string,
|
tabIndex: _propTypes2["default"].string,
|
||||||
hoverContent: _propTypes2["default"].func,
|
hoverContent: _propTypes2["default"].func,
|
||||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
|
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||||
|
rowDraggAble: _propTypes2["default"].bool
|
||||||
};
|
};
|
||||||
|
|
||||||
var defaultProps = {
|
var defaultProps = {
|
||||||
|
|
@ -151,7 +152,8 @@ var defaultProps = {
|
||||||
setRowParentIndex: function setRowParentIndex() {},
|
setRowParentIndex: function setRowParentIndex() {},
|
||||||
tabIndex: '0',
|
tabIndex: '0',
|
||||||
heightConsistent: false,
|
heightConsistent: false,
|
||||||
size: 'md'
|
size: 'md',
|
||||||
|
rowDraggAble: false
|
||||||
};
|
};
|
||||||
|
|
||||||
var Table = function (_Component) {
|
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 () {
|
_this.renderDragHideTable = function () {
|
||||||
var _this$props = _this.props,
|
var _this$props = _this.props,
|
||||||
columns = _this$props.columns,
|
columns = _this$props.columns,
|
||||||
|
|
@ -664,9 +679,12 @@ var Table = function (_Component) {
|
||||||
indent: 1,
|
indent: 1,
|
||||||
expandable: false,
|
expandable: false,
|
||||||
store: this.store,
|
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
|
* @returns
|
||||||
* @memberof Table
|
* @memberof Table
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||||||
|
|
||||||
|
|
@ -801,7 +817,10 @@ var Table = function (_Component) {
|
||||||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||||||
rootIndex: rootIndex,
|
rootIndex: rootIndex,
|
||||||
syncHover: props.syncHover,
|
syncHover: props.syncHover,
|
||||||
bodyDisplayInRow: props.bodyDisplayInRow
|
bodyDisplayInRow: props.bodyDisplayInRow,
|
||||||
|
rowDraggAble: this.props.rowDraggAble,
|
||||||
|
onDragRow: this.onDragRow,
|
||||||
|
contentTable: this.contentTable
|
||||||
})));
|
})));
|
||||||
this.treeRowIndex++;
|
this.treeRowIndex++;
|
||||||
var subVisible = visible && isRowExpanded;
|
var subVisible = visible && isRowExpanded;
|
||||||
|
|
|
||||||
|
|
@ -243,6 +243,7 @@ var TableHeader = function (_Component) {
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.onDragOver = function (e) {
|
_this.onDragOver = function (e) {
|
||||||
|
var event = _utils.Event.getEvent(e);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -426,6 +427,7 @@ var TableHeader = function (_Component) {
|
||||||
_this.minWidth = 80; //确定最小宽度就是80
|
_this.minWidth = 80; //确定最小宽度就是80
|
||||||
_this.table = null;
|
_this.table = null;
|
||||||
_this._thead = null; //当前对象
|
_this._thead = null; //当前对象
|
||||||
|
_this.event = false; //避免多次绑定问题
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -501,12 +503,24 @@ var TableHeader = function (_Component) {
|
||||||
|
|
||||||
|
|
||||||
TableHeader.prototype.initEvent = function initEvent() {
|
TableHeader.prototype.initEvent = function initEvent() {
|
||||||
this.dragBorderEventInit(); //列宽
|
var _props = this.props,
|
||||||
this.dragAbleEventInit(); //交换列
|
dragborder = _props.dragborder,
|
||||||
if (this.table && this.table.tr) {
|
draggable = _props.draggable;
|
||||||
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], '', this.table.tr[0]); //body mouseup
|
|
||||||
|
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() {
|
TableHeader.prototype.render = function render() {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
var _props = this.props,
|
var _props2 = this.props,
|
||||||
clsPrefix = _props.clsPrefix,
|
clsPrefix = _props2.clsPrefix,
|
||||||
rowStyle = _props.rowStyle,
|
rowStyle = _props2.rowStyle,
|
||||||
draggable = _props.draggable,
|
draggable = _props2.draggable,
|
||||||
dragborder = _props.dragborder,
|
dragborder = _props2.dragborder,
|
||||||
rows = _props.rows,
|
rows = _props2.rows,
|
||||||
filterable = _props.filterable,
|
filterable = _props2.filterable,
|
||||||
fixed = _props.fixed,
|
fixed = _props2.fixed,
|
||||||
lastShowIndex = _props.lastShowIndex;
|
lastShowIndex = _props2.lastShowIndex;
|
||||||
|
|
||||||
|
|
||||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||||
|
|
@ -694,7 +708,7 @@ var TableHeader = function (_Component) {
|
||||||
var _rowLeng = row.length - 1;
|
var _rowLeng = row.length - 1;
|
||||||
return _react2["default"].createElement(
|
return _react2["default"].createElement(
|
||||||
"tr",
|
"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) {
|
row.map(function (da, columIndex, arr) {
|
||||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||||
delete da.drgHover;
|
delete da.drgHover;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,8 @@ var _propTypes = require('prop-types');
|
||||||
|
|
||||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||||
|
|
||||||
|
var _utils = require('./utils');
|
||||||
|
|
||||||
var _TableCell = require('./TableCell');
|
var _TableCell = require('./TableCell');
|
||||||
|
|
||||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||||
|
|
@ -52,7 +54,9 @@ var propTypes = {
|
||||||
indentSize: _propTypes2["default"].number,
|
indentSize: _propTypes2["default"].number,
|
||||||
expandIconAsCell: _propTypes2["default"].bool,
|
expandIconAsCell: _propTypes2["default"].bool,
|
||||||
expandRowByClick: _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 = {
|
var defaultProps = {
|
||||||
|
|
@ -65,7 +69,9 @@ var defaultProps = {
|
||||||
onHover: function onHover() {},
|
onHover: function onHover() {},
|
||||||
|
|
||||||
className: '',
|
className: '',
|
||||||
setRowParentIndex: function setRowParentIndex() {}
|
setRowParentIndex: function setRowParentIndex() {},
|
||||||
|
rowDraggAble: false
|
||||||
|
// onDragRow:()=>{}
|
||||||
};
|
};
|
||||||
|
|
||||||
var TableRow = function (_Component) {
|
var TableRow = function (_Component) {
|
||||||
|
|
@ -76,6 +82,112 @@ var TableRow = function (_Component) {
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
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.set = function (fn) {
|
||||||
_this.clear();
|
_this.clear();
|
||||||
_this._timeout = window.setTimeout(fn, 300);
|
_this._timeout = window.setTimeout(fn, 300);
|
||||||
|
|
@ -100,6 +212,7 @@ var TableRow = function (_Component) {
|
||||||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||||
_this.expandHeight = 0;
|
_this.expandHeight = 0;
|
||||||
|
_this.event = false;
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -109,7 +222,8 @@ var TableRow = function (_Component) {
|
||||||
var _props = this.props,
|
var _props = this.props,
|
||||||
store = _props.store,
|
store = _props.store,
|
||||||
hoverKey = _props.hoverKey,
|
hoverKey = _props.hoverKey,
|
||||||
treeType = _props.treeType;
|
treeType = _props.treeType,
|
||||||
|
rowDraggAble = _props.rowDraggAble;
|
||||||
|
|
||||||
this.unsubscribe = store.subscribe(function () {
|
this.unsubscribe = store.subscribe(function () {
|
||||||
if (store.getState().currentHoverKey === hoverKey) {
|
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) {
|
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) {
|
if (this.props.treeType) {
|
||||||
this.setRowParentIndex();
|
this.setRowParentIndex();
|
||||||
}
|
}
|
||||||
|
|
@ -136,12 +304,16 @@ var TableRow = function (_Component) {
|
||||||
var _props2 = this.props,
|
var _props2 = this.props,
|
||||||
record = _props2.record,
|
record = _props2.record,
|
||||||
onDestroy = _props2.onDestroy,
|
onDestroy = _props2.onDestroy,
|
||||||
index = _props2.index;
|
index = _props2.index,
|
||||||
|
rowDraggAble = _props2.rowDraggAble;
|
||||||
|
|
||||||
onDestroy(record, index);
|
onDestroy(record, index);
|
||||||
if (this.unsubscribe) {
|
if (this.unsubscribe) {
|
||||||
this.unsubscribe();
|
this.unsubscribe();
|
||||||
}
|
}
|
||||||
|
if (rowDraggAble) {
|
||||||
|
this.removeDragAbleEvent();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||||
|
|
@ -162,7 +334,6 @@ var TableRow = function (_Component) {
|
||||||
setRowParentIndex = _props4.setRowParentIndex,
|
setRowParentIndex = _props4.setRowParentIndex,
|
||||||
fixedIndex = _props4.fixedIndex,
|
fixedIndex = _props4.fixedIndex,
|
||||||
rootIndex = _props4.rootIndex;
|
rootIndex = _props4.rootIndex;
|
||||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
|
||||||
|
|
||||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||||
};
|
};
|
||||||
|
|
@ -235,6 +406,7 @@ var TableRow = function (_Component) {
|
||||||
expandIconAsCell = _props9.expandIconAsCell,
|
expandIconAsCell = _props9.expandIconAsCell,
|
||||||
expanded = _props9.expanded,
|
expanded = _props9.expanded,
|
||||||
expandRowByClick = _props9.expandRowByClick,
|
expandRowByClick = _props9.expandRowByClick,
|
||||||
|
rowDraggAble = _props9.rowDraggAble,
|
||||||
expandable = _props9.expandable,
|
expandable = _props9.expandable,
|
||||||
onExpand = _props9.onExpand,
|
onExpand = _props9.onExpand,
|
||||||
needIndentSpaced = _props9.needIndentSpaced,
|
needIndentSpaced = _props9.needIndentSpaced,
|
||||||
|
|
@ -250,7 +422,6 @@ var TableRow = function (_Component) {
|
||||||
if (this.state.hovered) {
|
if (this.state.hovered) {
|
||||||
className += ' ' + clsPrefix + '-hover';
|
className += ' ' + clsPrefix + '-hover';
|
||||||
}
|
}
|
||||||
// console.log('className--'+className,index);
|
|
||||||
//判断是否为合计行
|
//判断是否为合计行
|
||||||
if (className.indexOf('sumrow') > -1) {
|
if (className.indexOf('sumrow') > -1) {
|
||||||
showSum = true;
|
showSum = true;
|
||||||
|
|
@ -297,15 +468,18 @@ var TableRow = function (_Component) {
|
||||||
if (!visible) {
|
if (!visible) {
|
||||||
style.display = 'none';
|
style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
return _react2["default"].createElement(
|
return _react2["default"].createElement(
|
||||||
'tr',
|
'tr',
|
||||||
{
|
{
|
||||||
|
draggable: rowDraggAble,
|
||||||
onClick: this.onRowClick,
|
onClick: this.onRowClick,
|
||||||
onDoubleClick: this.onRowDoubleClick,
|
onDoubleClick: this.onRowDoubleClick,
|
||||||
onMouseEnter: this.onMouseEnter,
|
onMouseEnter: this.onMouseEnter,
|
||||||
onMouseLeave: this.onMouseLeave,
|
onMouseLeave: this.onMouseLeave,
|
||||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||||
style: style
|
style: style,
|
||||||
|
'data-row-key': record && record.key ? record.key : "null"
|
||||||
// key={hoverKey}
|
// key={hoverKey}
|
||||||
, ref: this.bindElement
|
, ref: this.bindElement
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -229,12 +229,12 @@ function filterColumn(Table, Popover) {
|
||||||
_this2.checkedColumItemClick(da);
|
_this2.checkedColumItemClick(da);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return _react2["default"].createElement(
|
return _react2["default"].createElement(
|
||||||
"div",
|
"div",
|
||||||
{
|
{
|
||||||
key: da.key + "_" + i,
|
key: da.key + "_" + i,
|
||||||
className: prefixCls + "-pop-cont-item"
|
className: prefixCls + "-pop-cont-item",
|
||||||
|
onClick: paramObj.onClick ? paramObj.onClick : null
|
||||||
},
|
},
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
_beeCheckbox2["default"],
|
_beeCheckbox2["default"],
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||||
// @import "../node_modules/bee-modal/build/Modal.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{
|
.opt-btns .u-button{
|
||||||
|
margin: 0 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #505F79;
|
background: #505F79;
|
||||||
|
border-color: #505F79;
|
||||||
&:hover, &:active{
|
&:hover, &:active{
|
||||||
background: #344563;
|
background: #344563;
|
||||||
|
border-color: #505F79;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -11,49 +11,20 @@ import {Button,Tooltip} from "tinper-bee";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||||
fixed:'left',
|
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||||
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: "d", key: "d", width: 100 },
|
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo01 extends Component {
|
class Demo0101 extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handleClick = () => {
|
|
||||||
console.log('这是第' , this.currentIndex , '行');
|
|
||||||
console.log('内容：' , this.currentRecord);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table
|
<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 React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import Icon from 'bee-icon';
|
|
||||||
|
|
||||||
const columns02 = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: "员工编号",
|
title: "员工编号",
|
||||||
dataIndex: "num",
|
dataIndex: "num",
|
||||||
|
|
@ -31,7 +30,7 @@ const columns02 = [
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data02 = [];
|
const data = [];
|
||||||
|
|
||||||
// 在此自定义无数据时的展示内容
|
// 在此自定义无数据时的展示内容
|
||||||
const emptyFunc = () => 'No Data';
|
const emptyFunc = () => 'No Data';
|
||||||
|
|
@ -40,8 +39,8 @@ class Demo02 extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
columns={columns02}
|
columns={columns}
|
||||||
data={data02}
|
data={data}
|
||||||
// emptyText={emptyFunc}
|
// emptyText={emptyFunc}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
*
|
*
|
||||||
* @title 固定表头
|
* @title 固定表头
|
||||||
* @parent 基础 Basic
|
* @parent 基础 Basic
|
||||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||||
* demo0103
|
* demo0103
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,12 +19,12 @@ const columns = [
|
||||||
return (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "block",
|
||||||
width: "80px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "bottom",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Tooltip>
|
</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 (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "block",
|
||||||
width: "80px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "bottom",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ class Demo33 extends Component {
|
||||||
overlay={menu1}
|
overlay={menu1}
|
||||||
animation="slide-up"
|
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>
|
</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,
|
value: this.props.value,
|
||||||
editable: false
|
editable: false
|
||||||
};
|
};
|
||||||
|
this.editWarp = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
commitChange = () => {
|
commitChange = () => {
|
||||||
|
|
@ -39,6 +40,7 @@ class StringEditCell extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = e => {
|
handleChange = e => {
|
||||||
|
if (e.target.value === "") this.editWarp.className += " verify-cell";
|
||||||
this.setState({ value: e.target.value });
|
this.setState({ value: e.target.value });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -47,7 +49,7 @@ class StringEditCell extends Component {
|
||||||
return (
|
return (
|
||||||
<div className="editable-cell">
|
<div className="editable-cell">
|
||||||
{editable ? (
|
{editable ? (
|
||||||
<div className="editable-cell-input-wrapper">
|
<div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
|
||||||
<input
|
<input
|
||||||
className={value ? "u-form-control" : "u-form-control error"}
|
className={value ? "u-form-control" : "u-form-control error"}
|
||||||
autoFocus
|
autoFocus
|
||||||
|
|
@ -60,10 +62,10 @@ class StringEditCell extends Component {
|
||||||
{value === "" ? (
|
{value === "" ? (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
inverse
|
inverse
|
||||||
className="tp-0502"
|
className="u-editable-table-tp"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
overlay={
|
overlay={
|
||||||
<div className="help-tip">
|
<div className="tp-content">
|
||||||
{"请输入" + this.props.colName}
|
{"请输入" + this.props.colName}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -490,7 +492,7 @@ class Demo0502 extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="demo0502">
|
<div className="demo0502 u-editable-table">
|
||||||
<Table data={this.state.dataSource} columns={this.columns} />
|
<Table data={this.state.dataSource} columns={this.columns} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,28 @@
|
||||||
.demo0502 {
|
.u-editable-table .u-table {
|
||||||
.u-table-row {
|
.u-table-row {
|
||||||
td {
|
td {
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
|
|
||||||
input.error {
|
input {
|
||||||
border-color: #F44336;
|
padding-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
border-color: #F44336;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-cell {
|
.editable-cell {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-hover {
|
&-hover {
|
||||||
.editable-cell-text-wrapper {
|
.editable-cell-text-wrapper {
|
||||||
line-height: 18px;
|
line-height: 19px;
|
||||||
border: 1px solid #c1c7d0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-form-control,
|
.u-form-control,
|
||||||
.u-select-selection {
|
.u-select-selection {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
@ -26,11 +33,14 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.editable-cell-input-wrapper {
|
||||||
line-height: 18px;
|
padding-right: 0;
|
||||||
border: 1px solid #a5adba;
|
}
|
||||||
}
|
|
||||||
|
.verify-cell {
|
||||||
|
padding-right: 25px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.require {
|
.require {
|
||||||
|
|
@ -41,16 +51,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-tip {
|
.u-editable-table-tp {
|
||||||
color: #F44336;
|
.tp-content {
|
||||||
}
|
color: #F44336;
|
||||||
|
|
||||||
.tp-0502 {
|
|
||||||
.tooltip-arrow {
|
|
||||||
border-bottom-color: #F44336 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-inner {
|
|
||||||
border-color: #F44336 !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,10 +6,6 @@
|
||||||
* demo0702
|
* demo0702
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
|
||||||
* @description
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||||
|
|
||||||
|
|
@ -17,8 +13,7 @@ import Table from '../../src';
|
||||||
import multiSelect from '../../src/lib/multiSelect';
|
import multiSelect from '../../src/lib/multiSelect';
|
||||||
import sort from '../../src/lib/sort';
|
import sort from '../../src/lib/sort';
|
||||||
|
|
||||||
const SubMenu = Menu.SubMenu;
|
const { Item } = Menu;
|
||||||
const MenuItemGroup = Menu.ItemGroup;
|
|
||||||
|
|
||||||
const data27 = [
|
const data27 = [
|
||||||
{
|
{
|
||||||
|
|
@ -106,38 +101,34 @@ class Demo27 extends Component {
|
||||||
getSelectedDataFunc = data => {
|
getSelectedDataFunc = data => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
onClick = (item) => {
|
onSelect = (item) => {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const menu1 = (
|
const menu1 = (
|
||||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
<Menu
|
||||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
onSelect={this.onSelect}>
|
||||||
<MenuItemGroup title="Item 1">
|
<Item key="1">模态弹出</Item>
|
||||||
<Menu.Item key="1">选项 1</Menu.Item>
|
<Item key="2">链接跳转</Item>
|
||||||
<Menu.Item key="2">选项 2</Menu.Item>
|
<Item key="3">打开新页</Item>
|
||||||
</MenuItemGroup>
|
</Menu>);
|
||||||
<MenuItemGroup title="Iteom 2">
|
|
||||||
<Menu.Item key="3">选项 3</Menu.Item>
|
|
||||||
<Menu.Item key="4">选项 4</Menu.Item>
|
|
||||||
</MenuItemGroup>
|
|
||||||
</SubMenu>
|
|
||||||
</Menu>)
|
|
||||||
let multiObj = {
|
let multiObj = {
|
||||||
type: "checkbox"
|
type: "checkbox"
|
||||||
};
|
};
|
||||||
let columns27 = [
|
let columns27 = [
|
||||||
{
|
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return <Dropdown
|
return (
|
||||||
trigger={['click']}
|
<Dropdown
|
||||||
overlay={menu1}
|
trigger={['click']}
|
||||||
animation="slide-up"
|
overlay={menu1}
|
||||||
>
|
animation="slide-up"
|
||||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
>
|
||||||
</Dropdown>
|
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||||
}
|
</Dropdown>
|
||||||
|
)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "姓名",
|
title: "姓名",
|
||||||
|
|
|
||||||
|
|
@ -92,7 +92,10 @@ class Demo105 extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getHoverContent=()=>{
|
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() {
|
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 行操作-选择
|
* @parent 行操作-选择
|
||||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||||
* demo1301
|
* 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 (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "block",
|
||||||
width: "80px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "bottom",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -31,12 +31,12 @@ const columns = [
|
||||||
return (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "block",
|
||||||
width: "80px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "bottom",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -26,12 +26,12 @@ const columns = [
|
||||||
return (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "block",
|
||||||
width: "80px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "bottom",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Tooltip>
|
</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 {
|
.selected {
|
||||||
background: #FFF7E7; }
|
background: #FFF7E7; }
|
||||||
|
|
||||||
|
|
@ -7,10 +649,13 @@
|
||||||
right: 15px; }
|
right: 15px; }
|
||||||
|
|
||||||
.opt-btns .u-button {
|
.opt-btns .u-button {
|
||||||
|
margin: 0 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #505F79; }
|
background: #505F79;
|
||||||
|
border-color: #505F79; }
|
||||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||||
background: #344563; }
|
background: #344563;
|
||||||
|
border-color: #505F79; }
|
||||||
|
|
||||||
.demo04.u-table tr:nth-child(2n) {
|
.demo04.u-table tr:nth-child(2n) {
|
||||||
background: #f7f9fb; }
|
background: #f7f9fb; }
|
||||||
|
|
@ -25,44 +670,94 @@
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
padding-bottom: 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 {
|
.demo0502 .u-table-row td {
|
||||||
|
>>>>>>> master
|
||||||
padding: 5px 8px; }
|
padding: 5px 8px; }
|
||||||
.demo0502 .u-table-row td input.error {
|
.demo0501 .u-table .u-table-row td input {
|
||||||
border-color: #F44336; }
|
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; }
|
height: 30px; }
|
||||||
|
|
||||||
.demo0502 .u-table-row-hover .editable-cell-text-wrapper {
|
.demo0501 .u-table .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 {
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
border-radius: 3px; }
|
border-radius: 3px;
|
||||||
.demo0502 .editable-cell-text-wrapper:hover {
|
padding-left: 0; }
|
||||||
line-height: 18px;
|
|
||||||
border: 1px solid #a5adba; }
|
|
||||||
|
|
||||||
.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;
|
position: absolute;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
color: #F44336;
|
color: #F44336;
|
||||||
font-size: 20px; }
|
font-size: 20px; }
|
||||||
|
|
||||||
.help-tip {
|
.demo0501 .u-table .ref-input-wrap {
|
||||||
|
width: 160px !important; }
|
||||||
|
|
||||||
|
.u-editable-table-tp .tp-content {
|
||||||
color: #F44336; }
|
color: #F44336; }
|
||||||
|
|
||||||
.tp-0502 .tooltip-arrow {
|
.u-editable-table .u-table .u-table-row td {
|
||||||
border-bottom-color: #F44336 !important; }
|
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 {
|
.u-editable-table .u-table .u-table-row .editable-cell {
|
||||||
border-color: #F44336 !important; }
|
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 {
|
th .drop-menu .uf {
|
||||||
font-size: 12px;
|
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' |
|
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||||
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
|
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
|
||||||
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
|
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
|
||||||
|
| rowDraggAble | 是否增加行交换顺序功能 | boolean| false
|
||||||
|
|
||||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||||
|
|
||||||
|
|
|
||||||
183
package.json
183
package.json
|
|
@ -1,95 +1,96 @@
|
||||||
{
|
{
|
||||||
"name": "bee-table",
|
"name": "bee-table",
|
||||||
"version": "2.0.13",
|
"version": "2.0.15",
|
||||||
"description": "Table ui component for react",
|
"description": "Table ui component for react",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
"react-component",
|
"react-component",
|
||||||
"bee-table",
|
"bee-table",
|
||||||
"iuap-design",
|
"iuap-design",
|
||||||
"tinper-bee",
|
"tinper-bee",
|
||||||
"Table"
|
"Table"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0.0"
|
||||||
|
},
|
||||||
|
"jest": {
|
||||||
|
"moduleFileExtensions": [
|
||||||
|
"js",
|
||||||
|
"jsx"
|
||||||
],
|
],
|
||||||
"engines": {
|
"transform": {
|
||||||
"node": ">=6.0.0"
|
"^.+\\.js$": "babel-jest"
|
||||||
},
|
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
22
src/Table.js
22
src/Table.js
|
|
@ -54,6 +54,7 @@ const propTypes = {
|
||||||
tabIndex:PropTypes.string,
|
tabIndex:PropTypes.string,
|
||||||
hoverContent:PropTypes.func,
|
hoverContent:PropTypes.func,
|
||||||
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||||
|
rowDraggAble: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
|
@ -88,7 +89,8 @@ const defaultProps = {
|
||||||
setRowParentIndex:()=>{},
|
setRowParentIndex:()=>{},
|
||||||
tabIndex:'0',
|
tabIndex:'0',
|
||||||
heightConsistent:false,
|
heightConsistent:false,
|
||||||
size: 'md'
|
size: 'md',
|
||||||
|
rowDraggAble:false
|
||||||
};
|
};
|
||||||
|
|
||||||
class Table extends Component {
|
class Table extends Component {
|
||||||
|
|
@ -523,9 +525,24 @@ class Table extends Component {
|
||||||
expandable={false}
|
expandable={false}
|
||||||
store={this.store}
|
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}
|
rootIndex = {rootIndex}
|
||||||
syncHover = {props.syncHover}
|
syncHover = {props.syncHover}
|
||||||
bodyDisplayInRow = {props.bodyDisplayInRow}
|
bodyDisplayInRow = {props.bodyDisplayInRow}
|
||||||
|
rowDraggAble={this.props.rowDraggAble}
|
||||||
|
onDragRow={this.onDragRow}
|
||||||
|
contentTable={this.contentTable}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
this.treeRowIndex++;
|
this.treeRowIndex++;
|
||||||
|
|
|
||||||
|
|
@ -270,7 +270,7 @@ $icon-color:#505F79;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 16px;
|
line-height: 14px;
|
||||||
border: 1px solid $table-border-color;
|
border: 1px solid $table-border-color;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -297,9 +297,9 @@ $icon-color:#505F79;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
tr.u-table-expanded-row {
|
tr.u-table-expanded-row {
|
||||||
background: #f7f7f7;
|
background: #DFE1E6;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f7f7f7;
|
background: #DFE1E6;
|
||||||
}
|
}
|
||||||
.u-table {
|
.u-table {
|
||||||
// padding: 0 40px 0 20px;
|
// padding: 0 40px 0 20px;
|
||||||
|
|
@ -546,8 +546,8 @@ $icon-color:#505F79;
|
||||||
&-filter-icon{
|
&-filter-icon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 38px ;
|
height: 39px ;
|
||||||
line-height: 38px;
|
line-height: 39px;
|
||||||
right: 0px ;
|
right: 0px ;
|
||||||
top:1px ;
|
top:1px ;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
@ -596,6 +596,7 @@ $icon-color:#505F79;
|
||||||
height: $checkbox-height;
|
height: $checkbox-height;
|
||||||
line-height: $checkbox-height;
|
line-height: $checkbox-height;
|
||||||
margin:0px;
|
margin:0px;
|
||||||
|
display: block;
|
||||||
.u-checkbox-label{
|
.u-checkbox-label{
|
||||||
line-height: $checkbox-height;
|
line-height: $checkbox-height;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
|
|
@ -960,3 +961,36 @@ $icon-color:#505F79;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:-1000px;
|
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.minWidth = 80;//确定最小宽度就是80
|
||||||
this.table = null;
|
this.table = null;
|
||||||
this._thead = null;//当前对象
|
this._thead = null;//当前对象
|
||||||
|
this.event = false;//避免多次绑定问题
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
@ -103,12 +104,20 @@ class TableHeader extends Component {
|
||||||
* 事件初始化
|
* 事件初始化
|
||||||
*/
|
*/
|
||||||
initEvent(){
|
initEvent(){
|
||||||
this.dragBorderEventInit();//列宽
|
let {dragborder,draggable} = this.props;
|
||||||
this.dragAbleEventInit();//交换列
|
if(!this.event){ //避免多次绑定问题。
|
||||||
if(this.table && this.table.tr){
|
this.event = true;
|
||||||
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
|
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) => {
|
onDragOver = (e) => {
|
||||||
|
let event = Event.getEvent(e);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -622,7 +632,7 @@ class TableHeader extends Component {
|
||||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||||
{rows.map((row, index) => {
|
{rows.map((row, index) => {
|
||||||
let _rowLeng = (row.length-1);
|
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) => {
|
{row.map((da, columIndex, arr) => {
|
||||||
let thHover = da.drgHover
|
let thHover = da.drgHover
|
||||||
? ` ${clsPrefix}-thead th-drag-hover`
|
? ` ${clsPrefix}-thead th-drag-hover`
|
||||||
|
|
|
||||||
170
src/TableRow.js
170
src/TableRow.js
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { Event,EventUtil} from "./utils";
|
||||||
import TableCell from './TableCell';
|
import TableCell from './TableCell';
|
||||||
import ExpandIcon from './ExpandIcon';
|
import ExpandIcon from './ExpandIcon';
|
||||||
|
|
||||||
|
|
@ -29,6 +30,8 @@ const propTypes = {
|
||||||
expandIconAsCell: PropTypes.bool,
|
expandIconAsCell: PropTypes.bool,
|
||||||
expandRowByClick: PropTypes.bool,
|
expandRowByClick: PropTypes.bool,
|
||||||
store: PropTypes.object.isRequired,
|
store: PropTypes.object.isRequired,
|
||||||
|
rowDraggAble: PropTypes.bool,
|
||||||
|
onDragRow: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
|
@ -39,7 +42,9 @@ const defaultProps = {
|
||||||
expandRowByClick: false,
|
expandRowByClick: false,
|
||||||
onHover() {},
|
onHover() {},
|
||||||
className:'',
|
className:'',
|
||||||
setRowParentIndex:()=>{}
|
setRowParentIndex:()=>{},
|
||||||
|
rowDraggAble:false,
|
||||||
|
// onDragRow:()=>{}
|
||||||
};
|
};
|
||||||
|
|
||||||
class TableRow extends Component{
|
class TableRow extends Component{
|
||||||
|
|
@ -54,11 +59,12 @@ class TableRow extends Component{
|
||||||
this.onMouseEnter = this.onMouseEnter.bind(this);
|
this.onMouseEnter = this.onMouseEnter.bind(this);
|
||||||
this.onMouseLeave = this.onMouseLeave.bind(this);
|
this.onMouseLeave = this.onMouseLeave.bind(this);
|
||||||
this.expandHeight = 0;
|
this.expandHeight = 0;
|
||||||
|
this.event = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { store, hoverKey,treeType } = this.props;
|
const { store, hoverKey,treeType,rowDraggAble } = this.props;
|
||||||
this.unsubscribe = store.subscribe(() => {
|
this.unsubscribe = store.subscribe(() => {
|
||||||
if (store.getState().currentHoverKey === hoverKey) {
|
if (store.getState().currentHoverKey === hoverKey) {
|
||||||
this.setState({ hovered: true });
|
this.setState({ hovered: true });
|
||||||
|
|
@ -71,23 +77,174 @@ class TableRow extends Component{
|
||||||
if(treeType){
|
if(treeType){
|
||||||
this.setRowParentIndex();
|
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) {
|
componentDidUpdate(prevProps) {
|
||||||
|
const { rowDraggAble } = this.props;
|
||||||
|
if(!this.event){
|
||||||
|
this.event = true;
|
||||||
|
if(rowDraggAble){
|
||||||
|
this.initEvent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if(this.props.treeType){
|
if(this.props.treeType){
|
||||||
this.setRowParentIndex();
|
this.setRowParentIndex();
|
||||||
}
|
}
|
||||||
this.setRowHeight()
|
this.setRowHeight()
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
const { record, onDestroy, index } = this.props;
|
const { record, onDestroy, index,rowDraggAble } = this.props;
|
||||||
onDestroy(record, index);
|
onDestroy(record, index);
|
||||||
if (this.unsubscribe) {
|
if (this.unsubscribe) {
|
||||||
this.unsubscribe();
|
this.unsubscribe();
|
||||||
}
|
}
|
||||||
|
if(rowDraggAble){
|
||||||
|
this.removeDragAbleEvent();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -98,7 +255,6 @@ class TableRow extends Component{
|
||||||
}
|
}
|
||||||
setRowParentIndex(){
|
setRowParentIndex(){
|
||||||
const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
|
const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
|
||||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
|
||||||
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -163,7 +319,7 @@ class TableRow extends Component{
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
clsPrefix, columns, record, height, visible, index,
|
clsPrefix, columns, record, height, visible, index,
|
||||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||||
} = this.props;
|
} = this.props;
|
||||||
let showSum = false;
|
let showSum = false;
|
||||||
|
|
@ -171,7 +327,6 @@ class TableRow extends Component{
|
||||||
if (this.state.hovered) {
|
if (this.state.hovered) {
|
||||||
className += ` ${clsPrefix}-hover`;
|
className += ` ${clsPrefix}-hover`;
|
||||||
}
|
}
|
||||||
// console.log('className--'+className,index);
|
|
||||||
//判断是否为合计行
|
//判断是否为合计行
|
||||||
if(className.indexOf('sumrow')>-1){
|
if(className.indexOf('sumrow')>-1){
|
||||||
showSum = true;
|
showSum = true;
|
||||||
|
|
@ -223,14 +378,17 @@ class TableRow extends Component{
|
||||||
if (!visible) {
|
if (!visible) {
|
||||||
style.display = 'none';
|
style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
|
draggable={rowDraggAble}
|
||||||
onClick={this.onRowClick}
|
onClick={this.onRowClick}
|
||||||
onDoubleClick={this.onRowDoubleClick}
|
onDoubleClick={this.onRowDoubleClick}
|
||||||
onMouseEnter={this.onMouseEnter}
|
onMouseEnter={this.onMouseEnter}
|
||||||
onMouseLeave={this.onMouseLeave}
|
onMouseLeave={this.onMouseLeave}
|
||||||
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
||||||
style={style}
|
style={style}
|
||||||
|
data-row-key={record && record.key?record.key:"null"}
|
||||||
// key={hoverKey}
|
// key={hoverKey}
|
||||||
ref={this.bindElement}
|
ref={this.bindElement}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -102,11 +102,11 @@ export default function filterColumn(Table, Popover) {
|
||||||
this.checkedColumItemClick(da);
|
this.checkedColumItemClick(da);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={da.key + "_" + i}
|
key={da.key + "_" + i}
|
||||||
className={`${prefixCls}-pop-cont-item`}
|
className={`${prefixCls}-pop-cont-item`}
|
||||||
|
onClick={paramObj.onClick?paramObj.onClick:null}
|
||||||
>
|
>
|
||||||
<Checkbox {...paramObj}>
|
<Checkbox {...paramObj}>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue