Merge branch 'master' into lcj-demo-50x
This commit is contained in:
梁才军
commit
1045d0b081
117
CHANGELOG.md
117
CHANGELOG.md
|
|
@ -1,5 +1,49 @@
|
|||
<a name="2.0.14"></a>
|
||||
## [2.0.14](https://github.com/tinper-bee/bee-table/compare/v2.0.13...v2.0.14) (2019-04-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* filterColumn内容超出8个字显示省略号 ([2878e39](https://github.com/tinper-bee/bee-table/commit/2878e39))
|
||||
* 过滤列遮挡行线 ([bc07ab3](https://github.com/tinper-bee/bee-table/commit/bc07ab3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 在固定列中使用图片时增加注意事项 ([6ac9f76](https://github.com/tinper-bee/bee-table/commit/6ac9f76))
|
||||
* **drag row:** drag row ([81bd1cc](https://github.com/tinper-bee/bee-table/commit/81bd1cc))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **drag row:** drag row
|
||||
|
||||
|
||||
|
||||
<a name="2.0.13"></a>
|
||||
## [2.0.13](https://github.com/tinper-bee/bee-table/compare/v2.0.12...v2.0.13) (2019-04-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 全选表格含有disabled状态并且是勾选状态bug ([162dec5](https://github.com/tinper-bee/bee-table/commit/162dec5))
|
||||
* 页面尺寸改变时，重新计算表格宽度 ([7e997b7](https://github.com/tinper-bee/bee-table/commit/7e997b7))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* filterColumn 中item字体为12px，点击文字checkbox也可以选中 ([f8f983f](https://github.com/tinper-bee/bee-table/commit/f8f983f))
|
||||
* 增加表格内容是否显示在一行 ([df755b9](https://github.com/tinper-bee/bee-table/commit/df755b9))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.12"></a>
|
||||
## [2.0.12](https://github.com/tinper-bee/bee-table/compare/v2.0.9...v2.0.12) (2019-04-11)
|
||||
## [2.0.12](https://github.com/tinper-bee/bee-table/compare/v2.0.11...v2.0.12) (2019-04-11)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.11"></a>
|
||||
## [2.0.11](https://github.com/tinper-bee/bee-table/compare/v2.0.10...v2.0.11) (2019-04-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -10,23 +54,75 @@
|
|||
|
||||
|
||||
|
||||
<a name="2.0.10"></a>
|
||||
## [2.0.10](https://github.com/tinper-bee/bee-table/compare/v2.0.9...v2.0.10) (2019-03-29)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.9"></a>
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.9) (2019-03-27)
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.8...v2.0.9) (2019-03-27)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.8"></a>
|
||||
## [2.0.8](https://github.com/tinper-bee/bee-table/compare/v2.0.7...v2.0.8) (2019-03-25)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.7"></a>
|
||||
## [2.0.7](https://github.com/tinper-bee/bee-table/compare/v2.0.6...v2.0.7) (2019-03-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
* Table 拖拽后同步表格整体宽度 ([ee40deb](https://github.com/tinper-bee/bee-table/commit/ee40deb))
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
* 表格key警告问题 ([6977e2f](https://github.com/tinper-bee/bee-table/commit/6977e2f))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.6"></a>
|
||||
## [2.0.6](https://github.com/tinper-bee/bee-table/compare/v2.0.5...v2.0.6) (2019-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.5"></a>
|
||||
## [2.0.5](https://github.com/tinper-bee/bee-table/compare/v2.0.4...v2.0.5) (2019-03-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## [2.0.4](https://github.com/tinper-bee/bee-table/compare/v2.0.3...v2.0.4) (2019-03-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## [2.0.3](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.3) (2019-03-05)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01)
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.44...v2.0.0) (2019-03-01)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.44"></a>
|
||||
## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26)
|
||||
|
||||
|
||||
|
||||
|
|
@ -606,7 +702,12 @@
|
|||
|
||||
|
||||
<a name="1.2.9"></a>
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
<a name="1.2.8"></a>
|
||||
## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -162,9 +162,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
@ -320,8 +320,8 @@
|
|||
.u-table-filter-column-filter-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
|
|
@ -337,7 +337,7 @@
|
|||
cursor: pointer; }
|
||||
.u-table-filter-column-pop-cont-item .u-checkbox {
|
||||
margin: 0px; }
|
||||
.u-table-filter-column-pop-cont-item > span {
|
||||
.u-table-filter-column-pop-cont-item span.drop-menu-title {
|
||||
margin-left: -3px;
|
||||
max-width: 132px;
|
||||
width: auto !important;
|
||||
|
|
@ -356,7 +356,8 @@
|
|||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px; }
|
||||
margin: 0px;
|
||||
display: block; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
|
|
@ -367,6 +368,22 @@
|
|||
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;
|
||||
|
|
@ -579,28 +596,6 @@
|
|||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,8 @@ var propTypes = {
|
|||
syncHover: _propTypes2["default"].bool,
|
||||
tabIndex: _propTypes2["default"].string,
|
||||
hoverContent: _propTypes2["default"].func,
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -151,7 +152,8 @@ var defaultProps = {
|
|||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
size: 'md'
|
||||
size: 'md',
|
||||
rowDraggAble: false
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -171,6 +173,19 @@ var Table = function (_Component) {
|
|||
});
|
||||
};
|
||||
|
||||
_this.onDragRow = function (currentIndex, targetIndex) {
|
||||
var data = _this.state.data,
|
||||
currentObj = data[currentIndex],
|
||||
targetObj = data[targetIndex];
|
||||
|
||||
console.log(currentIndex + " ----------onRowDragEnd-------- " + targetIndex);
|
||||
data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
|
||||
console.log(" _data---- ", data);
|
||||
_this.setState({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
_this.renderDragHideTable = function () {
|
||||
var _this$props = _this.props,
|
||||
columns = _this$props.columns,
|
||||
|
|
@ -664,9 +679,12 @@ var Table = function (_Component) {
|
|||
indent: 1,
|
||||
expandable: false,
|
||||
store: this.store,
|
||||
dragborderKey: this.props.dragborderKey
|
||||
dragborderKey: this.props.dragborderKey,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -679,8 +697,6 @@ var Table = function (_Component) {
|
|||
* @returns
|
||||
* @memberof Table
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||||
|
||||
|
|
@ -801,7 +817,10 @@ var Table = function (_Component) {
|
|||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||||
rootIndex: rootIndex,
|
||||
syncHover: props.syncHover,
|
||||
bodyDisplayInRow: props.bodyDisplayInRow
|
||||
bodyDisplayInRow: props.bodyDisplayInRow,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow,
|
||||
contentTable: this.contentTable
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
|
|||
|
|
@ -243,6 +243,7 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
|
@ -426,6 +427,7 @@ var TableHeader = function (_Component) {
|
|||
_this.minWidth = 80; //确定最小宽度就是80
|
||||
_this.table = null;
|
||||
_this._thead = null; //当前对象
|
||||
_this.event = false; //避免多次绑定问题
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -501,12 +503,24 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.initEvent = function initEvent() {
|
||||
this.dragBorderEventInit(); //列宽
|
||||
this.dragAbleEventInit(); //交换列
|
||||
if (this.table && this.table.tr) {
|
||||
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], '', this.table.tr[0]); //body mouseup
|
||||
var _props = this.props,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable;
|
||||
|
||||
if (!this.event) {
|
||||
//避免多次绑定问题。
|
||||
this.event = true;
|
||||
if (dragborder) {
|
||||
this.dragBorderEventInit(); //列宽
|
||||
}
|
||||
if (dragborder) {
|
||||
this.dragAbleEventInit(); //交换列
|
||||
}
|
||||
if (this.table && this.table.tr) {
|
||||
this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], '', this.table.tr[0]); //body mouseup
|
||||
}
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
|
||||
}
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -673,15 +687,15 @@ var TableHeader = function (_Component) {
|
|||
TableHeader.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
rowStyle = _props.rowStyle,
|
||||
draggable = _props.draggable,
|
||||
dragborder = _props.dragborder,
|
||||
rows = _props.rows,
|
||||
filterable = _props.filterable,
|
||||
fixed = _props.fixed,
|
||||
lastShowIndex = _props.lastShowIndex;
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
rowStyle = _props2.rowStyle,
|
||||
draggable = _props2.draggable,
|
||||
dragborder = _props2.dragborder,
|
||||
rows = _props2.rows,
|
||||
filterable = _props2.filterable,
|
||||
fixed = _props2.fixed,
|
||||
lastShowIndex = _props2.lastShowIndex;
|
||||
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
|
|
@ -694,7 +708,7 @@ var TableHeader = function (_Component) {
|
|||
var _rowLeng = row.length - 1;
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ var _propTypes = require('prop-types');
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require('./utils');
|
||||
|
||||
var _TableCell = require('./TableCell');
|
||||
|
||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||
|
|
@ -52,7 +54,9 @@ var propTypes = {
|
|||
indentSize: _propTypes2["default"].number,
|
||||
expandIconAsCell: _propTypes2["default"].bool,
|
||||
expandRowByClick: _propTypes2["default"].bool,
|
||||
store: _propTypes2["default"].object.isRequired
|
||||
store: _propTypes2["default"].object.isRequired,
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDragRow: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -65,7 +69,9 @@ var defaultProps = {
|
|||
onHover: function onHover() {},
|
||||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {}
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -76,6 +82,112 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.initEvent = function () {
|
||||
var events = [{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, '', _this.element);
|
||||
};
|
||||
|
||||
_this.removeDragAbleEvent = function () {
|
||||
var events = [{ key: 'dragstart', fun: _this.onDragStart }, { key: 'dragover', fun: _this.onDragOver }, { key: 'drop', fun: _this.onDrop }, { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, 'remove', _this.element);
|
||||
};
|
||||
|
||||
_this.onDragStart = function (e) {
|
||||
if (!_this.props.rowDraggAble) return;
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
_this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var _this$props = _this.props,
|
||||
rowDraggAble = _this$props.rowDraggAble,
|
||||
onDragRow = _this$props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(_this.currentIndex, null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
}
|
||||
var _currentIndex = event.dataTransfer.getData("text");
|
||||
onDragRow && onDragRow(parseInt(_this.currentIndex--), parseInt(currentIndex--));
|
||||
};
|
||||
|
||||
_this.synchronizeTableTr = function (currentIndex, type) {
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
_this.synchronizeTrStyle(_table_trs, currentIndex, type);
|
||||
if (_table_fixed_left_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);
|
||||
}
|
||||
if (_table_fixed_right_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_right_trs, currentIndex, type);
|
||||
}
|
||||
};
|
||||
|
||||
_this.synchronizeTrStyle = function (_elementBody, id, type) {
|
||||
var contentTable = _this.props.contentTable,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj = void 0;
|
||||
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
var element = trs[index];
|
||||
if (element.getAttribute("data-row-key") == id) {
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, null);
|
||||
}
|
||||
};
|
||||
|
||||
_this.set = function (fn) {
|
||||
_this.clear();
|
||||
_this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -100,6 +212,7 @@ var TableRow = function (_Component) {
|
|||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +222,8 @@ var TableRow = function (_Component) {
|
|||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey,
|
||||
treeType = _props.treeType;
|
||||
treeType = _props.treeType,
|
||||
rowDraggAble = _props.rowDraggAble;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
|
|
@ -125,7 +239,61 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
TableRow.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var _event = events[i];
|
||||
if (type === "remove") {
|
||||
_utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
|
||||
} else {
|
||||
_utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
if (rowDraggAble) {
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
|
@ -136,12 +304,16 @@ var TableRow = function (_Component) {
|
|||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index;
|
||||
index = _props2.index,
|
||||
rowDraggAble = _props2.rowDraggAble;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if (rowDraggAble) {
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
|
|
@ -162,7 +334,6 @@ var TableRow = function (_Component) {
|
|||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
|
@ -235,6 +406,7 @@ var TableRow = function (_Component) {
|
|||
expandIconAsCell = _props9.expandIconAsCell,
|
||||
expanded = _props9.expanded,
|
||||
expandRowByClick = _props9.expandRowByClick,
|
||||
rowDraggAble = _props9.rowDraggAble,
|
||||
expandable = _props9.expandable,
|
||||
onExpand = _props9.onExpand,
|
||||
needIndentSpaced = _props9.needIndentSpaced,
|
||||
|
|
@ -250,7 +422,6 @@ var TableRow = function (_Component) {
|
|||
if (this.state.hovered) {
|
||||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
// console.log('className--'+className,index);
|
||||
//判断是否为合计行
|
||||
if (className.indexOf('sumrow') > -1) {
|
||||
showSum = true;
|
||||
|
|
@ -297,15 +468,18 @@ var TableRow = function (_Component) {
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
draggable: rowDraggAble,
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : "null"
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
|
|
|
|||
|
|
@ -229,21 +229,17 @@ function filterColumn(Table, Popover) {
|
|||
_this2.checkedColumItemClick(da);
|
||||
};
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{
|
||||
key: da.key + "_" + i,
|
||||
className: prefixCls + "-pop-cont-item"
|
||||
className: prefixCls + "-pop-cont-item",
|
||||
onClick: paramObj.onClick ? paramObj.onClick : null
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
_beeCheckbox2["default"],
|
||||
paramObj,
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
null,
|
||||
da.title
|
||||
)
|
||||
da.title
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -106,9 +106,9 @@ function sum(Table) {
|
|||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
|
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
exports.sortBy = sortBy;
|
||||
exports.compare = compare;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
/*
|
||||
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
|
||||
* @method soryBy
|
||||
* @static
|
||||
* @param {array} arr 待处理数组
|
||||
* @param {string|function} prop 排序依据属性，获取
|
||||
* @param {boolean} desc 降序
|
||||
* @return {array} 返回排序后的新数组
|
||||
/*
|
||||
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
|
||||
* @method soryBy
|
||||
* @static
|
||||
* @param {array} arr 待处理数组
|
||||
* @param {string|function} prop 排序依据属性，获取
|
||||
* @param {boolean} desc 降序
|
||||
* @return {array} 返回排序后的新数组
|
||||
*/
|
||||
|
||||
function sortBy(arr, prop, desc) {
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
|
|
@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染checkbox
|
||||
* @param Checkbox
|
||||
* @param Icon
|
||||
* @returns {CheckboxRender}
|
||||
/**
|
||||
* 渲染checkbox
|
||||
* @param Checkbox
|
||||
* @param Icon
|
||||
* @returns {CheckboxRender}
|
||||
*/
|
||||
function renderCheckbox(Checkbox, Icon) {
|
||||
return function (_Component) {
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染输入框
|
||||
* @param Form
|
||||
* @param Input
|
||||
* @param Icon
|
||||
* @returns {InputRender}
|
||||
/**
|
||||
* 渲染输入框
|
||||
* @param Form
|
||||
* @param Input
|
||||
* @param Icon
|
||||
* @returns {InputRender}
|
||||
*/
|
||||
function renderInput(Form, Input, Icon) {
|
||||
var _class, _temp2;
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染下拉框
|
||||
* @param Select
|
||||
* @param Icon
|
||||
* @returns {SelectRender}
|
||||
/**
|
||||
* 渲染下拉框
|
||||
* @param Select
|
||||
* @param Icon
|
||||
* @returns {SelectRender}
|
||||
*/
|
||||
function renderSelect(Select, Icon) {
|
||||
var _class, _temp2;
|
||||
|
|
|
|||
|
|
@ -44,9 +44,13 @@ var scrollbarMeasure = {
|
|||
function measureScrollbar() {
|
||||
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
|
||||
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
var tableDom = document.querySelector('.u-table');
|
||||
var currentDom = tableDom ? tableDom : document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
@ -54,7 +58,7 @@ function measureScrollbar() {
|
|||
Object.keys(scrollbarMeasure).forEach(function (scrollProp) {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
document.body.appendChild(scrollDiv);
|
||||
currentDom.appendChild(scrollDiv);
|
||||
var size = 0;
|
||||
if (direction === 'vertical') {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
|
|
@ -62,7 +66,7 @@ function measureScrollbar() {
|
|||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
}
|
||||
|
||||
document.body.removeChild(scrollDiv);
|
||||
currentDom.removeChild(scrollDiv);
|
||||
scrollbarSize = size;
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
// @import "../node_modules/bee-select/src/Select.scss";
|
||||
// @import "../node_modules/bee-form/src/Form.scss";
|
||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
// @import "../node_modules/bee-message/build/Message.css";
|
||||
|
|
@ -34,9 +33,12 @@
|
|||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
border-color: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
border-color: #505F79;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,49 +11,20 @@ import {Button,Tooltip} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
|
|
@ -64,4 +35,4 @@ class Demo01 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
||||
export default Demo0101;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
const columns02 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
|
|
@ -31,7 +30,7 @@ const columns02 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data02 = [];
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
|
@ -40,8 +39,8 @@ class Demo02 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns02}
|
||||
data={data02}
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 横向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x的取值可以是：正整数(自动转为相应的像素值)、百分比（相对于表格真实宽度的百分比，大于100%时会出现滚动条）、布尔值。y的取值是正整数。
|
||||
* demo0201
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class Demo33 extends Component {
|
|||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Checkbox} from "tinper-bee";
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
let ComplexTable = multiSelect(sum(Table), Checkbox);
|
||||
|
||||
let _sum = 0;
|
||||
const columns = [
|
||||
{
|
||||
title: "单据编号",
|
||||
|
|
@ -81,6 +81,8 @@ function getData(){
|
|||
total: i + Math.floor(Math.random()*10),
|
||||
money: 20 * Math.floor(Math.random()*10)
|
||||
});
|
||||
_sum += data[i].total;
|
||||
_sum += data[i].money;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
|
@ -90,32 +92,20 @@ class Demo35 extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData()
|
||||
data: getData(),
|
||||
sum:_sum
|
||||
};
|
||||
}
|
||||
|
||||
changeData = ()=>{
|
||||
this.setState({
|
||||
data: getData()
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
footer={currentData => <div>总计: {_sum}</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 单元格编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）
|
||||
*
|
||||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
* demo0702
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
|
|
@ -17,8 +13,7 @@ import Table from '../../src';
|
|||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { Item } = Menu;
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
|
|
@ -106,38 +101,34 @@ class Demo27 extends Component {
|
|||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onClick = (item) => {
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
<Menu
|
||||
onSelect={this.onSelect}>
|
||||
<Item key="1">模态弹出</Item>
|
||||
<Item key="2">链接跳转</Item>
|
||||
<Item key="3">打开新页</Item>
|
||||
</Menu>);
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
</Dropdown>
|
||||
}
|
||||
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
|
|
|
|||
|
|
@ -13,28 +13,26 @@ import dragColumn from '../../src/lib/dragColumn';
|
|||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
|
|
@ -42,13 +40,9 @@ const columns23 = [
|
|||
];
|
||||
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商",d:'Tom', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商",d:'Jack', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商",d:'Jane', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ const columns16 = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const columns17 = [
|
||||
|
|
@ -48,16 +48,16 @@ const columns17 = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -86,15 +86,15 @@ class Demo16 extends Component {
|
|||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
{ a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
|
||||
{ a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
|
||||
{ a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
|
|
|
|||
|
|
@ -13,19 +13,19 @@ import Table from '../../src';
|
|||
|
||||
const columns4 = [
|
||||
{
|
||||
title: "Name",
|
||||
title: "订单编号",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
title: "单据日期",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
title: "供应商",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
|
|
@ -34,53 +34,53 @@ const columns4 = [
|
|||
const data4 = [
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
name: "NU0391001",
|
||||
age: "2019-03-01",
|
||||
address: "供应商1",
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: "John Brown",
|
||||
age: 42,
|
||||
address: "New York No. 2 Lake Park"
|
||||
name: "NU0391002",
|
||||
age: "2019-03-02",
|
||||
address: "供应商2"
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: "John Brown jr.",
|
||||
age: 30,
|
||||
address: "New York No. 3 Lake Park",
|
||||
name: "NU0391003",
|
||||
age: "2019-03-03",
|
||||
address: "供应商3",
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: "Jimmy Brown",
|
||||
age: 16,
|
||||
address: "New York No. 3 Lake Park"
|
||||
name: "NU0391004",
|
||||
age: "2019-03-04",
|
||||
address: "供应商4"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
name: "Jim Green sr.",
|
||||
age: 72,
|
||||
address: "London No. 1 Lake Park",
|
||||
name: "NU0391005",
|
||||
age: "2019-03-05",
|
||||
address: "供应商5",
|
||||
children: [
|
||||
{
|
||||
key: 131,
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 2 Lake Park",
|
||||
name: "NU0391006",
|
||||
age: "2019-03-06",
|
||||
address: "供应商6",
|
||||
children: [
|
||||
{
|
||||
key: 1311,
|
||||
name: "Jim Green jr.",
|
||||
age: 25,
|
||||
address: "London No. 3 Lake Park"
|
||||
name: "NU0391007",
|
||||
age: "2019-03-07",
|
||||
address: "供应商7"
|
||||
},
|
||||
{
|
||||
key: 1312,
|
||||
name: "Jimmy Green sr.",
|
||||
age: 18,
|
||||
address: "London No. 4 Lake Park"
|
||||
name: "NU0391008",
|
||||
age: "2019-03-08",
|
||||
address: "供应商8"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -90,9 +90,9 @@ const data4 = [
|
|||
},
|
||||
{
|
||||
key: 2,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park"
|
||||
name: "NU0391009",
|
||||
age: "2019-03-09",
|
||||
address: "供应商9"
|
||||
}
|
||||
];
|
||||
class Demo4 extends Component {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,10 @@ class Demo105 extends Component {
|
|||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
return <div className="opt-btns">
|
||||
<Button size="sm" onClick={this.handleClick}>编辑</Button>
|
||||
<Button size="sm" onClick={this.handleClick}>删除</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description 拖拽改变行顺序
|
||||
* Demo1201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100,fixed:'right'}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "1003" }
|
||||
];
|
||||
|
||||
class Demo1201 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowDraggAble={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1201;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @title 多选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
*
|
||||
* @title 单选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 表格支持单选行操作，可自定义选中行背景色。
|
||||
* Demo1304
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,Radio} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const data = [
|
||||
{ check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ check: "ASVAL_201903120002",a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1304 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
selectedValue:"ASVAL_201903200004"
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let {selectedValue} = this.state;
|
||||
let columns = [
|
||||
{ title: "单选", dataIndex: "check", key: "check", width: 80,render(text, record, index){
|
||||
return(
|
||||
<Radio.RadioGroup name="fruits" selectedValue={selectedValue}>
|
||||
<Radio value={record.check} />
|
||||
</Radio.RadioGroup>)
|
||||
}},
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index,
|
||||
selectedValue:record.check
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1304;
|
||||
|
|
@ -27,12 +27,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,12 +26,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ class Demo8 extends Component {
|
|||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
noBorder={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @parent 搜索 search
|
||||
* @description 搜索刷新表格数据
|
||||
* demo1602
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Icon,FormControl,InputGroup} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
class Search extends Component {
|
||||
state = {
|
||||
searchValue: "",
|
||||
empty: false
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch = () => {
|
||||
let { onSearch } = this.props;
|
||||
this.setState({
|
||||
empty: true
|
||||
});
|
||||
onSearch && onSearch(this.state.searchValue);
|
||||
};
|
||||
|
||||
/**
|
||||
* 捕获回车
|
||||
* @param e
|
||||
*/
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
{this.state.empty ? (
|
||||
<Icon
|
||||
type="uf-close-c"
|
||||
onClick={this.emptySearch}
|
||||
className="empty-search"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<InputGroup.Button onClick={this.handleSearch} shape="border">
|
||||
<Icon type="uf-search" />
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: userData
|
||||
};
|
||||
}
|
||||
|
||||
handleSearch = value => {
|
||||
if (value === "") {
|
||||
return this.setState({
|
||||
data: userData
|
||||
});
|
||||
}
|
||||
let regExp = new RegExp(value, "ig");
|
||||
let data = userData.filter(item => regExp.test(item.a));
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
handleEmpty = () => {
|
||||
this.setState({
|
||||
data: userData
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="clearfix">
|
||||
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
|
||||
</div>
|
||||
<Table columns={columns} data={this.state.data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo9;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -165,9 +165,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
@ -322,8 +322,8 @@
|
|||
.u-table-filter-column-filter-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
|
|
@ -358,7 +358,8 @@
|
|||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px; }
|
||||
margin: 0px;
|
||||
display: block; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
|
|
@ -369,6 +370,22 @@
|
|||
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;
|
||||
|
|
@ -583,28 +600,6 @@
|
|||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
|
|
@ -654,10 +649,13 @@
|
|||
right: 15px; }
|
||||
|
||||
.opt-btns .u-button {
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79; }
|
||||
background: #505F79;
|
||||
border-color: #505F79; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background: #344563; }
|
||||
background: #344563;
|
||||
border-color: #505F79; }
|
||||
|
||||
.demo04.u-table tr:nth-child(2n) {
|
||||
background: #f7f9fb; }
|
||||
|
|
@ -672,12 +670,16 @@
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
<<<<<<< HEAD
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button {
|
||||
border-radius: 5px; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button:first-child {
|
||||
margin-right: 10px; }
|
||||
|
||||
.demo0501 .u-table .u-table-row td {
|
||||
=======
|
||||
.demo0502 .u-table-row td {
|
||||
>>>>>>> master
|
||||
padding: 5px 8px; }
|
||||
.demo0501 .u-table .u-table-row td input {
|
||||
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
|
|
@ -70,6 +70,8 @@ import 'bee-table/build/Table.css';
|
|||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
| rowDraggAble | 是否增加行交换顺序功能 | boolean| false
|
||||
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
|
|
|
|||
157
package.json
157
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.13",
|
||||
"version": "2.0.15",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -14,82 +14,83 @@
|
|||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.5",
|
||||
"bee-loading": "^1.0.6",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^2.0.2",
|
||||
"bee-select": "^2.0.9",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
"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.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "^1.0.9",
|
||||
"bee-locale": "0.0.13",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.8",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
src/Table.js
24
src/Table.js
|
|
@ -54,6 +54,7 @@ const propTypes = {
|
|||
tabIndex:PropTypes.string,
|
||||
hoverContent:PropTypes.func,
|
||||
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -88,7 +89,8 @@ const defaultProps = {
|
|||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0',
|
||||
heightConsistent:false,
|
||||
size: 'md'
|
||||
size: 'md',
|
||||
rowDraggAble:false
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -522,10 +524,25 @@ class Table extends Component {
|
|||
indent={1}
|
||||
expandable={false}
|
||||
store={this.store}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
onDragRow={this.onDragRow}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
onDragRow = (currentIndex,targetIndex)=>{
|
||||
let {data} = this.state,
|
||||
currentObj = data[currentIndex],
|
||||
targetObj = data[targetIndex];
|
||||
console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex);
|
||||
data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
|
||||
console.log(" _data---- ",data);
|
||||
this.setState({
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -660,6 +677,9 @@ class Table extends Component {
|
|||
rootIndex = {rootIndex}
|
||||
syncHover = {props.syncHover}
|
||||
bodyDisplayInRow = {props.bodyDisplayInRow}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
onDragRow={this.onDragRow}
|
||||
contentTable={this.contentTable}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ $icon-color:#505F79;
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid $table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -297,9 +297,9 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
tr.u-table-expanded-row {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
}
|
||||
.u-table {
|
||||
// padding: 0 40px 0 20px;
|
||||
|
|
@ -546,8 +546,8 @@ $icon-color:#505F79;
|
|||
&-filter-icon{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 38px ;
|
||||
line-height: 38px;
|
||||
height: 39px ;
|
||||
line-height: 39px;
|
||||
right: 0px ;
|
||||
top:1px ;
|
||||
z-index: 2;
|
||||
|
|
@ -596,6 +596,7 @@ $icon-color:#505F79;
|
|||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
margin:0px;
|
||||
display: block;
|
||||
.u-checkbox-label{
|
||||
line-height: $checkbox-height;
|
||||
padding-left: 16px;
|
||||
|
|
@ -621,6 +622,31 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
// 滚动条样式复写
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.u-table:focus{
|
||||
outline: none;
|
||||
|
|
@ -901,31 +927,7 @@ $icon-color:#505F79;
|
|||
left: 100;
|
||||
}
|
||||
|
||||
// 滚动条样式复写
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 表格显示里面的内容显示在一行
|
||||
.header-dispaly-in-row{
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ class TableHeader extends Component {
|
|||
this.minWidth = 80;//确定最小宽度就是80
|
||||
this.table = null;
|
||||
this._thead = null;//当前对象
|
||||
this.event = false;//避免多次绑定问题
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -103,12 +104,20 @@ class TableHeader extends Component {
|
|||
* 事件初始化
|
||||
*/
|
||||
initEvent(){
|
||||
this.dragBorderEventInit();//列宽
|
||||
this.dragAbleEventInit();//交换列
|
||||
if(this.table && this.table.tr){
|
||||
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
|
||||
let {dragborder,draggable} = this.props;
|
||||
if(!this.event){ //避免多次绑定问题。
|
||||
this.event = true;
|
||||
if(dragborder){
|
||||
this.dragBorderEventInit();//列宽
|
||||
}
|
||||
if(dragborder){
|
||||
this.dragAbleEventInit();//交换列
|
||||
}
|
||||
if(this.table && this.table.tr){
|
||||
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
|
||||
}
|
||||
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
|
||||
}
|
||||
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -398,6 +407,7 @@ class TableHeader extends Component {
|
|||
};
|
||||
|
||||
onDragOver = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
|
@ -622,7 +632,7 @@ class TableHeader extends Component {
|
|||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => {
|
||||
let _rowLeng = (row.length-1);
|
||||
return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
|
|||
174
src/TableRow.js
174
src/TableRow.js
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Event,EventUtil} from "./utils";
|
||||
import TableCell from './TableCell';
|
||||
import ExpandIcon from './ExpandIcon';
|
||||
|
||||
|
|
@ -29,6 +30,8 @@ const propTypes = {
|
|||
expandIconAsCell: PropTypes.bool,
|
||||
expandRowByClick: PropTypes.bool,
|
||||
store: PropTypes.object.isRequired,
|
||||
rowDraggAble: PropTypes.bool,
|
||||
onDragRow: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -39,7 +42,9 @@ const defaultProps = {
|
|||
expandRowByClick: false,
|
||||
onHover() {},
|
||||
className:'',
|
||||
setRowParentIndex:()=>{}
|
||||
setRowParentIndex:()=>{},
|
||||
rowDraggAble:false,
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
class TableRow extends Component{
|
||||
|
|
@ -54,11 +59,12 @@ class TableRow extends Component{
|
|||
this.onMouseEnter = this.onMouseEnter.bind(this);
|
||||
this.onMouseLeave = this.onMouseLeave.bind(this);
|
||||
this.expandHeight = 0;
|
||||
this.event = false;
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
const { store, hoverKey,treeType } = this.props;
|
||||
const { store, hoverKey,treeType,rowDraggAble } = this.props;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
this.setState({ hovered: true });
|
||||
|
|
@ -71,23 +77,174 @@ class TableRow extends Component{
|
|||
if(treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
initEvent=()=>{
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
|
||||
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
|
||||
{key:'dragenter', fun:this.onDragEnter},
|
||||
{key:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
this.eventListen(events,'',this.element);
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
removeDragAbleEvent=()=>{
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},
|
||||
{key:'dragover', fun:this.onDragOver},
|
||||
{key:'drop', fun:this.onDrop},
|
||||
|
||||
{key:'dragenter', fun:this.onDragEnter},
|
||||
{key:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
this.eventListen(events,'remove',this.element);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
eventListen(events,type,eventSource){
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const _event = events[i];
|
||||
if(type === "remove"){
|
||||
EventUtil.removeHandler(eventSource,_event.key,_event.fun);
|
||||
}else{
|
||||
EventUtil.addHandler(eventSource,_event.key,_event.fun);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
onDragStart = (e) => {
|
||||
if (!this.props.rowDraggAble) return;
|
||||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", this.currentIndex);
|
||||
}
|
||||
|
||||
onDragOver = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onDrop = (e) => {
|
||||
let {rowDraggAble,onDragRow} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(this.currentIndex,null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
}
|
||||
let _currentIndex = event.dataTransfer.getData("text");
|
||||
onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--));
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
synchronizeTableTr = (currentIndex,type)=>{
|
||||
let {contentTable} = this.props;
|
||||
let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
this.synchronizeTrStyle(_table_trs,currentIndex,type);
|
||||
if(_table_fixed_left_trs){
|
||||
this.synchronizeTrStyle(_table_fixed_left_trs,currentIndex,type);
|
||||
}
|
||||
if(_table_fixed_right_trs){
|
||||
this.synchronizeTrStyle(_table_fixed_right_trs,currentIndex,type);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
synchronizeTrStyle = (_elementBody,id,type)=>{
|
||||
let {contentTable} = this.props,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj;
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
const element = trs[index];
|
||||
if(element.getAttribute("data-row-key") == id){
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if(type){
|
||||
currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
}else{
|
||||
currentObj && currentObj.setAttribute("style","");
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnter = (e) => {
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
}
|
||||
|
||||
onDragLeave = (e) => {
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,null);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { rowDraggAble } = this.props;
|
||||
if(!this.event){
|
||||
this.event = true;
|
||||
if(rowDraggAble){
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { record, onDestroy, index } = this.props;
|
||||
const { record, onDestroy, index,rowDraggAble } = this.props;
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if(rowDraggAble){
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -98,7 +255,6 @@ class TableRow extends Component{
|
|||
}
|
||||
setRowParentIndex(){
|
||||
const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
||||
|
||||
}
|
||||
|
|
@ -163,7 +319,7 @@ class TableRow extends Component{
|
|||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
|
|
@ -171,7 +327,6 @@ class TableRow extends Component{
|
|||
if (this.state.hovered) {
|
||||
className += ` ${clsPrefix}-hover`;
|
||||
}
|
||||
// console.log('className--'+className,index);
|
||||
//判断是否为合计行
|
||||
if(className.indexOf('sumrow')>-1){
|
||||
showSum = true;
|
||||
|
|
@ -223,14 +378,17 @@ class TableRow extends Component{
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble}
|
||||
onClick={this.onRowClick}
|
||||
onDoubleClick={this.onRowDoubleClick}
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
||||
style={style}
|
||||
data-row-key={record && record.key?record.key:"null"}
|
||||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -102,15 +102,15 @@ export default function filterColumn(Table, Popover) {
|
|||
this.checkedColumItemClick(da);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={da.key + "_" + i}
|
||||
className={`${prefixCls}-pop-cont-item`}
|
||||
onClick={paramObj.onClick?paramObj.onClick:null}
|
||||
>
|
||||
<Checkbox {...paramObj}>
|
||||
|
||||
<span>{da.title}</span>
|
||||
{da.title}
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,9 +14,13 @@ const scrollbarMeasure = {
|
|||
};
|
||||
|
||||
export function measureScrollbar(direction = 'vertical') {
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
const tableDom =document.querySelector('.u-table');
|
||||
let currentDom = tableDom?tableDom:document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
@ -24,7 +28,7 @@ export function measureScrollbar(direction = 'vertical') {
|
|||
Object.keys(scrollbarMeasure).forEach(scrollProp => {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
document.body.appendChild(scrollDiv);
|
||||
currentDom.appendChild(scrollDiv);
|
||||
let size = 0;
|
||||
if (direction === 'vertical') {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
|
|
@ -32,7 +36,7 @@ export function measureScrollbar(direction = 'vertical') {
|
|||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
}
|
||||
|
||||
document.body.removeChild(scrollDiv);
|
||||
currentDom.removeChild(scrollDiv);
|
||||
scrollbarSize = size;
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue