增加默认宽度200，固定列在主表中hidden
This commit is contained in:
wanghaoo
parent
a83d87bcfb
commit
49b7e0e0cd
|
|
@ -28,7 +28,8 @@ var propTypes = {
|
|||
width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
|
||||
fixed: _propTypes2["default"].oneOf([true, 'left', 'right']),
|
||||
render: _propTypes2["default"].func,
|
||||
onCellClick: _propTypes2["default"].func
|
||||
onCellClick: _propTypes2["default"].func,
|
||||
ifshow: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var Column = function (_Component) {
|
||||
|
|
@ -43,6 +44,12 @@ var Column = function (_Component) {
|
|||
return Column;
|
||||
}(_react.Component);
|
||||
|
||||
Column.defaultProps = {
|
||||
width: '200',
|
||||
ifshow: true
|
||||
};
|
||||
|
||||
|
||||
Column.propTypes = propTypes;
|
||||
|
||||
exports["default"] = Column;
|
||||
|
|
|
|||
|
|
@ -85,35 +85,53 @@ var ColumnManager = function () {
|
|||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
ColumnManager.prototype.centerColumns = function centerColumns() {
|
||||
var _this6 = this;
|
||||
|
||||
return this._cache('centerColumns', function () {
|
||||
return _this6.groupedColumns().filter(function (column) {
|
||||
return !column.fixed;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
var _this7 = this;
|
||||
|
||||
return this._cache('leafColumns', function () {
|
||||
return _this6._leafColumns(_this6.columns);
|
||||
return _this7._leafColumns(_this7.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() {
|
||||
var _this7 = this;
|
||||
var _this8 = this;
|
||||
|
||||
return this._cache('leftLeafColumns', function () {
|
||||
return _this7._leafColumns(_this7.leftColumns());
|
||||
return _this8._leafColumns(_this8.leftColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() {
|
||||
var _this8 = this;
|
||||
var _this9 = this;
|
||||
|
||||
return this._cache('rightLeafColumns', function () {
|
||||
return _this8._leafColumns(_this8.rightColumns());
|
||||
return _this9._leafColumns(_this9.rightColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.centerLeafColumns = function centerLeafColumns() {
|
||||
var _this10 = this;
|
||||
|
||||
return this._cache('centerLeafColumns', function () {
|
||||
return _this10._leafColumns(_this10.centerColumns());
|
||||
});
|
||||
};
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
|
||||
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns() {
|
||||
var _this9 = this;
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns(type) {
|
||||
var _this11 = this;
|
||||
|
||||
return this._cache('groupedColumns', function () {
|
||||
var _groupColumns = function _groupColumns(columns) {
|
||||
|
|
@ -132,7 +150,14 @@ var ColumnManager = function () {
|
|||
}
|
||||
};
|
||||
columns.forEach(function (column, index) {
|
||||
var newColumn = _extends({}, column);
|
||||
var defaultOpt = {
|
||||
ifshow: true,
|
||||
width: 200
|
||||
//获取非固定列
|
||||
};if (type == 'nofixed' && column.fixed) {
|
||||
return false;
|
||||
}
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
|
|
@ -153,22 +178,22 @@ var ColumnManager = function () {
|
|||
});
|
||||
return grouped;
|
||||
};
|
||||
return _groupColumns(_this9.columns);
|
||||
return _groupColumns(_this11.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.normalize = function normalize(elements) {
|
||||
var _this10 = this;
|
||||
var _this12 = this;
|
||||
|
||||
var columns = [];
|
||||
_react2["default"].Children.forEach(elements, function (element) {
|
||||
if (!_this10.isColumnElement(element)) return;
|
||||
if (!_this12.isColumnElement(element)) return;
|
||||
var column = _extends({}, element.props);
|
||||
if (element.key) {
|
||||
column.key = element.key;
|
||||
}
|
||||
if (element.type === _ColumnGroup2["default"]) {
|
||||
column.children = _this10.normalize(column.children);
|
||||
column.children = _this12.normalize(column.children);
|
||||
}
|
||||
columns.push(column);
|
||||
});
|
||||
|
|
@ -184,6 +209,46 @@ var ColumnManager = function () {
|
|||
this._cached = {};
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumnWidth = function getColumnWidth() {
|
||||
var computeWidth = 0;
|
||||
var columns = this.groupedColumns();
|
||||
columns.forEach(function (col) {
|
||||
//如果列显示，固定列也要去掉
|
||||
if (col.ifshow && !col.fixed) {
|
||||
computeWidth += parseInt(col.width);
|
||||
}
|
||||
});
|
||||
return computeWidth;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getLeftColumnsWidth = function getLeftColumnsWidth() {
|
||||
var _this13 = this;
|
||||
|
||||
return this._cache('leftColumnsWidth', function () {
|
||||
var leftColumnsWidth = 0;
|
||||
_this13.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'left' || column.fixed === true) {
|
||||
leftColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return leftColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getRightColumnsWidth = function getRightColumnsWidth() {
|
||||
var _this14 = this;
|
||||
|
||||
return this._cache('rightColumnsWidth', function () {
|
||||
var rightColumnsWidth = 0;
|
||||
_this14.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'right') {
|
||||
rightColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return rightColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype._cache = function _cache(name, fn) {
|
||||
if (name in this._cached) {
|
||||
return this._cached[name];
|
||||
|
|
@ -193,14 +258,22 @@ var ColumnManager = function () {
|
|||
};
|
||||
|
||||
ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
|
||||
var _this11 = this;
|
||||
var _this15 = this;
|
||||
|
||||
var leafColumns = [];
|
||||
var parWidth = 0;
|
||||
columns.forEach(function (column) {
|
||||
if (!column.children) {
|
||||
leafColumns.push(column);
|
||||
|
||||
var defaultOpt = {
|
||||
ifshow: true,
|
||||
width: 200
|
||||
};
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
parWidth += newColumn.width;
|
||||
leafColumns.push(newColumn);
|
||||
} else {
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this11._leafColumns(column.children)));
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this15._leafColumns(column.children)));
|
||||
}
|
||||
});
|
||||
return leafColumns;
|
||||
|
|
|
|||
|
|
@ -313,7 +313,10 @@
|
|||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
background: #f7f7f7;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: pointer; }
|
||||
.u-table-thead .th-drag-hover {
|
||||
|
|
@ -327,12 +330,13 @@
|
|||
top: 0;
|
||||
background: transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
z-index: 100; }
|
||||
.u-table-thead-th .th-drag-gap {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover {
|
||||
background: #ccc; }
|
||||
background: #ccc;
|
||||
cursor: col-resize; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
|
|
@ -366,6 +370,9 @@
|
|||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
.u-table-row-fixed-columns-in-body {
|
||||
visibility: hidden;
|
||||
pointer-events: none; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@ var propTypes = {
|
|||
rowRef: _propTypes2["default"].func,
|
||||
getBodyWrapper: _propTypes2["default"].func,
|
||||
children: _propTypes2["default"].node,
|
||||
|
||||
draggable: _propTypes2["default"].bool
|
||||
draggable: _propTypes2["default"].bool,
|
||||
minColumnWidth: _propTypes2["default"].number
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -125,7 +125,8 @@ var defaultProps = {
|
|||
},
|
||||
emptyText: function emptyText() {
|
||||
return 'No Data';
|
||||
}
|
||||
},
|
||||
minColumnWidth: 80
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -202,12 +203,16 @@ var Table = function (_Component) {
|
|||
_this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
|
||||
_this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
|
||||
_this.handleRowHover = _this.handleRowHover.bind(_this);
|
||||
|
||||
_this.computeTableWidth = _this.computeTableWidth.bind(_this);
|
||||
return _this;
|
||||
}
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
setTimeout(this.resetScrollY, 300);
|
||||
//后续也放在recevice里面
|
||||
if (!this.props.originWidth) {
|
||||
this.computeTableWidth();
|
||||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
|
||||
|
|
@ -233,6 +238,9 @@ var Table = function (_Component) {
|
|||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
|
|
@ -247,6 +255,16 @@ var Table = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
Table.prototype.computeTableWidth = function computeTableWidth() {
|
||||
//计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
|
||||
this.contentWidth = this.contentTable.clientWidth; //表格宽度
|
||||
this.computeWidth = this.columnManager.getColumnWidth();
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
var contentWidthDiff = this.contentWidth - this.computeWidth;
|
||||
this.setState({ contentWidthDiff: contentWidthDiff });
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
|
||||
if (!this.props.expandedRowKeys) {
|
||||
this.setState({ expandedRowKeys: expandedRowKeys });
|
||||
|
|
@ -311,7 +329,8 @@ var Table = function (_Component) {
|
|||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder,
|
||||
onThMouseMove = _props.onThMouseMove,
|
||||
dragborderKey = _props.dragborderKey;
|
||||
dragborderKey = _props.dragborderKey,
|
||||
minColumnWidth = _props.minColumnWidth;
|
||||
|
||||
var rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
|
|
@ -326,11 +345,19 @@ var Table = function (_Component) {
|
|||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
|
||||
|
||||
var contentWidthDiff = 0;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
if (!fixed) {
|
||||
contentWidthDiff = this.state.contentWidthDiff;
|
||||
}
|
||||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
|
||||
minColumnWidth: minColumnWidth,
|
||||
contentWidthDiff: contentWidthDiff,
|
||||
clsPrefix: clsPrefix,
|
||||
rows: rows,
|
||||
rowStyle: trStyle
|
||||
contentTable: this.contentTable,
|
||||
rowStyle: trStyle,
|
||||
fixed: fixed
|
||||
})) : null;
|
||||
};
|
||||
|
||||
|
|
@ -354,7 +381,8 @@ var Table = function (_Component) {
|
|||
className: column.className || '',
|
||||
children: column.title,
|
||||
drgHover: column.drgHover,
|
||||
width: column.width
|
||||
fixed: column.fixed,
|
||||
width: column.width ? column.width : 200
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
cell.onClick = column.onHeadCellClick;
|
||||
|
|
@ -513,7 +541,8 @@ var Table = function (_Component) {
|
|||
key: key,
|
||||
hoverKey: key,
|
||||
ref: rowRef,
|
||||
store: this.store
|
||||
store: this.store,
|
||||
fixed: fixed
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -537,6 +566,10 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
||||
var cols = [];
|
||||
var _state$contentWidthDi = this.state.contentWidthDiff,
|
||||
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi;
|
||||
|
||||
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(_react2["default"].createElement('col', {
|
||||
className: this.props.clsPrefix + '-expand-icon-col',
|
||||
|
|
@ -545,14 +578,20 @@ var Table = function (_Component) {
|
|||
}
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.leftLeafColumns();
|
||||
} else if (fixed === 'right') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.rightLeafColumns();
|
||||
} else {
|
||||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
cols = cols.concat(leafColumns.map(function (c) {
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: c.width, minWidth: c.width } });
|
||||
cols = cols.concat(leafColumns.map(function (c, i, arr) {
|
||||
var width = c.width;
|
||||
if (arr.length == i + 1) {
|
||||
width = parseInt(width) + contentWidthDiff;
|
||||
}
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width } });
|
||||
}));
|
||||
return _react2["default"].createElement(
|
||||
'colgroup',
|
||||
|
|
@ -862,6 +901,8 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this5 = this;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
||||
|
|
@ -886,7 +927,9 @@ var Table = function (_Component) {
|
|||
}
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style },
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this5.contentTable = el;
|
||||
} },
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
|
|
|
|||
|
|
@ -71,10 +71,11 @@ var TableCell = function (_Component) {
|
|||
indent = _props2.indent,
|
||||
index = _props2.index,
|
||||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column;
|
||||
column = _props2.column,
|
||||
fixed = _props2.fixed;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render,
|
||||
_column$className = column.className,
|
||||
render = column.render;
|
||||
var _column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
||||
|
|
@ -105,6 +106,10 @@ var TableCell = function (_Component) {
|
|||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
//不是固定表格并且当前列是固定，则隐藏当前列
|
||||
if (column.fixed && !fixed) {
|
||||
className = className + (clsPrefix + '-fixed-columns-in-body');
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -70,13 +70,21 @@ var TableHeader = function (_Component) {
|
|||
_this.props.onDrop(event, data);
|
||||
};
|
||||
|
||||
_this.onMouseMove = function (event, data) {
|
||||
if (_this.border) return;
|
||||
_this.onMouseOver = function (event, data) {
|
||||
//如果是固定列没有拖拽功能
|
||||
if (_this.border || data.fixed) return;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
|
||||
event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
|
||||
};
|
||||
|
||||
_this.onMouseMove = function (event, data) {
|
||||
//如果是固定列没有拖拽功能
|
||||
if (_this.border || data.fixed) return;
|
||||
// const {clsPrefix} = this.props;
|
||||
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
};
|
||||
|
||||
_this.onMouseOut = function (event, data) {
|
||||
if (_this.border) return;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
|
|
@ -86,7 +94,9 @@ var TableHeader = function (_Component) {
|
|||
|
||||
_this.onMouseDown = function (event, data) {
|
||||
_this.border = true;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
var _this$props = _this.props,
|
||||
clsPrefix = _this$props.clsPrefix,
|
||||
contentTable = _this$props.contentTable;
|
||||
|
||||
_this.drag.initPageLeftX = event.pageX;
|
||||
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
|
||||
|
|
@ -95,6 +105,8 @@ var TableHeader = function (_Component) {
|
|||
return da.key == data.key;
|
||||
});
|
||||
_this.drag.width = _this.drag.data[_this.drag.currIndex].width;
|
||||
|
||||
_this.contentTableWidth = contentTable.width;
|
||||
};
|
||||
|
||||
_this.onMouseUp = function (event, data) {
|
||||
|
|
@ -110,10 +122,23 @@ var TableHeader = function (_Component) {
|
|||
|
||||
_this.onThMouseMove = function (event, data) {
|
||||
if (!_this.border) return;
|
||||
var dragborderKey = _this.props.dragborderKey;
|
||||
var _this$props2 = _this.props,
|
||||
dragborderKey = _this$props2.dragborderKey,
|
||||
contentTable = _this$props2.contentTable;
|
||||
|
||||
console.log(data);
|
||||
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
|
||||
if (!_this.contentTableWidth) {
|
||||
_this.contentTableWidth = contentTable.clientWidth;
|
||||
}
|
||||
var newTableWidth = _this.contentTableWidth + x;
|
||||
var newWidth = _this.drag.width + x;
|
||||
if (newWidth < _this.props.minColumnWidth) {
|
||||
//清楚样式
|
||||
var moveDom = event.target.querySelector('.th-drag-gap-hover');
|
||||
moveDom && moveDom.classList.remove('th-drag-gap-hover');
|
||||
// event.target.classList.remove('th-drag-gap-hover');
|
||||
return;
|
||||
}
|
||||
//设置hiden的left
|
||||
//"u-table-drag-hide-table"
|
||||
var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
|
||||
|
|
@ -135,9 +160,11 @@ var TableHeader = function (_Component) {
|
|||
|
||||
//设置当前的宽度
|
||||
var currentData = _this.drag.data[_this.drag.currIndex];
|
||||
currentData.width = _this.drag.width + x;
|
||||
currentData.width = newWidth;
|
||||
var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
|
||||
currentDom.style.width = currentData.width + "px";
|
||||
currentDom.style.width = newWidth + "px";
|
||||
// this.contentTableWidth = newTableWidth;
|
||||
contentTable.style.width = newTableWidth + 'px';
|
||||
_this.drag.x = x;
|
||||
};
|
||||
|
||||
|
|
@ -187,7 +214,9 @@ var TableHeader = function (_Component) {
|
|||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder,
|
||||
onMouseOut = _props.onMouseOut;
|
||||
onMouseOut = _props.onMouseOut,
|
||||
contentWidthDiff = _props.contentWidthDiff,
|
||||
fixed = _props.fixed;
|
||||
|
||||
var attr = dragborder ? { id: 'u-table-drag-thead-' + this.theadKey } : {};
|
||||
return _react2["default"].createElement(
|
||||
|
|
@ -197,9 +226,16 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{ key: index, style: rowStyle },
|
||||
row.map(function (da, i) {
|
||||
row.map(function (da, i, arr) {
|
||||
var thHover = da.drgHover ? ' ' + clsPrefix + '-thead th-drag-hover' : "";
|
||||
delete da.drgHover;
|
||||
var fixedStyle = '';
|
||||
if (!fixed && da.fixed) {
|
||||
fixedStyle = clsPrefix + '-row-fixed-columns-in-body';
|
||||
}
|
||||
if (arr.length == i + 1) {
|
||||
da.width = parseInt(da.width) + contentWidthDiff;
|
||||
}
|
||||
if (draggable) {
|
||||
return _react2["default"].createElement('th', _extends({}, da, {
|
||||
onDragStart: function onDragStart(event) {
|
||||
|
|
@ -215,20 +251,21 @@ var TableHeader = function (_Component) {
|
|||
_this2.onDragEnter(event, da);
|
||||
},
|
||||
draggable: draggable,
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover,
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover + ' ' + fixedStyle,
|
||||
key: da.key }));
|
||||
} else if (dragborder) {
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'th',
|
||||
{
|
||||
style: { width: da.width, minWidth: da.width },
|
||||
style: { width: da.width },
|
||||
onMouseMove: function onMouseMove(event) {
|
||||
_this2.onThMouseMove(event, da);
|
||||
},
|
||||
onMouseUp: function onMouseUp(event) {
|
||||
_this2.onThMouseUp(event, da);
|
||||
},
|
||||
className: da.className + ' ' + clsPrefix + '-thead-th ',
|
||||
className: da.className + ' ' + clsPrefix + '-thead-th ' + fixedStyle,
|
||||
key: i },
|
||||
da.children,
|
||||
_react2["default"].createElement('div', { ref: function ref(el) {
|
||||
|
|
@ -246,12 +283,15 @@ var TableHeader = function (_Component) {
|
|||
onMouseUp: function onMouseUp(event) {
|
||||
_this2.onMouseUp(event, da);
|
||||
},
|
||||
onMouseOver: function onMouseOver(event) {
|
||||
_this2.onMouseOver(event, da);
|
||||
},
|
||||
className: clsPrefix + '-thead-th-drag-gap ' })
|
||||
);
|
||||
} else {
|
||||
var th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { key: i, onClick: function onClick(event) {
|
||||
var th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { className: ' ' + fixedStyle, key: i, onClick: function onClick(event) {
|
||||
da.onClick(da, event);
|
||||
} })) : _react2["default"].createElement('th', _extends({}, da, { key: i }));
|
||||
} })) : _react2["default"].createElement('th', _extends({}, da, { key: i, className: ' ' + fixedStyle }));
|
||||
return th;
|
||||
}
|
||||
})
|
||||
|
|
@ -263,6 +303,9 @@ var TableHeader = function (_Component) {
|
|||
return TableHeader;
|
||||
}(_react.Component);
|
||||
|
||||
TableHeader.defaultProps = {
|
||||
contentWidthDiff: 0
|
||||
};
|
||||
;
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
|
|
|||
|
|
@ -185,7 +185,8 @@ var TableRow = function (_Component) {
|
|||
needIndentSpaced = _props7.needIndentSpaced,
|
||||
indent = _props7.indent,
|
||||
indentSize = _props7.indentSize,
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon;
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon,
|
||||
fixed = _props7.fixed;
|
||||
var className = this.props.className;
|
||||
|
||||
|
||||
|
|
@ -225,6 +226,7 @@ var TableRow = function (_Component) {
|
|||
index: index,
|
||||
column: columns[i],
|
||||
key: columns[i].key,
|
||||
fixed: fixed,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,10 +156,10 @@ function dragColumn(Table) {
|
|||
onDragOver: this.onDragOver,
|
||||
onDrop: this.onDrop,
|
||||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable
|
||||
// dragborder={dragborder}
|
||||
, dragborder: false,
|
||||
dragborderKey: key
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
// dragborder={false}
|
||||
, dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ function multiSelect(Table, Checkbox) {
|
|||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "100px",
|
||||
width: "100",
|
||||
render: function render(text, record, index) {
|
||||
var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
|
|
|
|||
|
|
@ -192,7 +192,8 @@ function sum(Table) {
|
|||
footerScroll: true,
|
||||
columns: this.props.columns,
|
||||
data: this.props.data,
|
||||
footer: this.setFooterRender
|
||||
footer: this.setFooterRender,
|
||||
originWidth: true
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ exports.warningOnce = warningOnce;
|
|||
exports.addClass = addClass;
|
||||
exports.removeClass = removeClass;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
exports.closest = closest;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
|
|
@ -145,3 +146,20 @@ function ObjectAssign(obj) {
|
|||
}
|
||||
return tagObj;
|
||||
}
|
||||
/**
|
||||
* 获取某个父元素
|
||||
* */
|
||||
|
||||
function closest(ele, selector) {
|
||||
var matches = ele.matches || ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.msMatchesSelector;
|
||||
if (matches) {
|
||||
while (ele) {
|
||||
if (matches.call(ele, selector)) {
|
||||
return ele;
|
||||
} else {
|
||||
ele = ele.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -8528,7 +8528,10 @@ ul {
|
|||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
background: #f7f7f7;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: pointer; }
|
||||
.u-table-thead .th-drag-hover {
|
||||
|
|
@ -8542,12 +8545,13 @@ ul {
|
|||
top: 0;
|
||||
background: transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
z-index: 100; }
|
||||
.u-table-thead-th .th-drag-gap {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover {
|
||||
background: #ccc; }
|
||||
background: #ccc;
|
||||
cursor: col-resize; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
|
|
@ -8581,6 +8585,9 @@ ul {
|
|||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
.u-table-row-fixed-columns-in-body {
|
||||
visibility: hidden;
|
||||
pointer-events: none; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9187,8 +9187,8 @@
|
|||
rowRef: _propTypes2['default'].func,
|
||||
getBodyWrapper: _propTypes2['default'].func,
|
||||
children: _propTypes2['default'].node,
|
||||
|
||||
draggable: _propTypes2['default'].bool
|
||||
draggable: _propTypes2['default'].bool,
|
||||
minColumnWidth: _propTypes2['default'].number
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -9225,7 +9225,8 @@
|
|||
},
|
||||
emptyText: function emptyText() {
|
||||
return 'No Data';
|
||||
}
|
||||
},
|
||||
minColumnWidth: 80
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -9256,7 +9257,7 @@
|
|||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2['default'](props.columns, props.children);
|
||||
_this.columnManager = new _ColumnManager2['default'](props.columns, props.children, props.originWidth);
|
||||
_this.store = (0, _createStore2['default'])({ currentHoverKey: null });
|
||||
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -9302,12 +9303,16 @@
|
|||
_this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
|
||||
_this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
|
||||
_this.handleRowHover = _this.handleRowHover.bind(_this);
|
||||
|
||||
_this.computeTableWidth = _this.computeTableWidth.bind(_this);
|
||||
return _this;
|
||||
}
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
setTimeout(this.resetScrollY, 300);
|
||||
//后续也放在recevice里面
|
||||
if (!this.props.originWidth) {
|
||||
this.computeTableWidth();
|
||||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = (0, _addEventListener2['default'])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
|
||||
|
|
@ -9333,6 +9338,9 @@
|
|||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
|
|
@ -9347,6 +9355,27 @@
|
|||
}
|
||||
};
|
||||
|
||||
Table.prototype.computeTableWidth = function computeTableWidth() {
|
||||
//计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
|
||||
this.contentWidth = this.contentTable.clientWidth; //表格宽度
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
var setWidthParam = this.props.scroll.x;
|
||||
if (setWidthParam) {
|
||||
if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
||||
} else {
|
||||
this.contentWidth = parseInt(setWidthParam);
|
||||
}
|
||||
}
|
||||
var computeObj = this.columnManager.getColumnWidth();
|
||||
var lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
var contentWidthDiff = this.contentWidth - this.computeWidth;
|
||||
this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
|
||||
if (!this.props.expandedRowKeys) {
|
||||
this.setState({ expandedRowKeys: expandedRowKeys });
|
||||
|
|
@ -9411,7 +9440,8 @@
|
|||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder,
|
||||
onThMouseMove = _props.onThMouseMove,
|
||||
dragborderKey = _props.dragborderKey;
|
||||
dragborderKey = _props.dragborderKey,
|
||||
minColumnWidth = _props.minColumnWidth;
|
||||
|
||||
var rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
|
|
@ -9426,11 +9456,20 @@
|
|||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
|
||||
|
||||
var contentWidthDiff = 0;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
if (!fixed) {
|
||||
contentWidthDiff = this.state.contentWidthDiff;
|
||||
}
|
||||
return showHeader ? _react2['default'].createElement(_TableHeader2['default'], _extends({}, drop, dragBorder, {
|
||||
minColumnWidth: minColumnWidth,
|
||||
contentWidthDiff: contentWidthDiff,
|
||||
lastShowIndex: this.state.lastShowIndex,
|
||||
clsPrefix: clsPrefix,
|
||||
rows: rows,
|
||||
rowStyle: trStyle
|
||||
contentTable: this.contentTable,
|
||||
rowStyle: trStyle,
|
||||
fixed: fixed
|
||||
})) : null;
|
||||
};
|
||||
|
||||
|
|
@ -9454,6 +9493,7 @@
|
|||
className: column.className || '',
|
||||
children: column.title,
|
||||
drgHover: column.drgHover,
|
||||
fixed: column.fixed,
|
||||
width: column.width
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
|
|
@ -9613,7 +9653,8 @@
|
|||
key: key,
|
||||
hoverKey: key,
|
||||
ref: rowRef,
|
||||
store: this.store
|
||||
store: this.store,
|
||||
fixed: fixed
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -9637,6 +9678,12 @@
|
|||
|
||||
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
||||
var cols = [];
|
||||
var _state = this.state,
|
||||
_state$contentWidthDi = _state.contentWidthDiff,
|
||||
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
|
||||
_state$lastShowIndex = _state.lastShowIndex,
|
||||
lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
|
||||
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(_react2['default'].createElement('col', {
|
||||
className: this.props.clsPrefix + '-expand-icon-col',
|
||||
|
|
@ -9645,14 +9692,20 @@
|
|||
}
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.leftLeafColumns();
|
||||
} else if (fixed === 'right') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.rightLeafColumns();
|
||||
} else {
|
||||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
cols = cols.concat(leafColumns.map(function (c) {
|
||||
return _react2['default'].createElement('col', { key: c.key, style: { width: c.width, minWidth: c.width } });
|
||||
cols = cols.concat(leafColumns.map(function (c, i, arr) {
|
||||
var width = c.width;
|
||||
if (lastShowIndex == i) {
|
||||
width = parseInt(width) + contentWidthDiff;
|
||||
}
|
||||
return _react2['default'].createElement('col', { key: c.key, style: { width: width, minWidth: c.width } });
|
||||
}));
|
||||
return _react2['default'].createElement(
|
||||
'colgroup',
|
||||
|
|
@ -9962,6 +10015,8 @@
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this5 = this;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
||||
|
|
@ -9986,7 +10041,9 @@
|
|||
}
|
||||
return _react2['default'].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style },
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this5.contentTable = el;
|
||||
} },
|
||||
this.getTitle(),
|
||||
_react2['default'].createElement(
|
||||
'div',
|
||||
|
|
@ -10217,7 +10274,8 @@
|
|||
needIndentSpaced = _props7.needIndentSpaced,
|
||||
indent = _props7.indent,
|
||||
indentSize = _props7.indentSize,
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon;
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon,
|
||||
fixed = _props7.fixed;
|
||||
var className = this.props.className;
|
||||
|
||||
|
||||
|
|
@ -10257,6 +10315,7 @@
|
|||
index: index,
|
||||
column: columns[i],
|
||||
key: columns[i].key,
|
||||
fixed: fixed,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
|
|
@ -10367,10 +10426,11 @@
|
|||
indent = _props2.indent,
|
||||
index = _props2.index,
|
||||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column;
|
||||
column = _props2.column,
|
||||
fixed = _props2.fixed;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render,
|
||||
_column$className = column.className,
|
||||
render = column.render;
|
||||
var _column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
||||
|
|
@ -10401,6 +10461,10 @@
|
|||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
//不是固定表格并且当前列是固定，则隐藏当前列
|
||||
if (column.fixed && !fixed) {
|
||||
className = className + (clsPrefix + '-fixed-columns-in-body');
|
||||
}
|
||||
return _react2['default'].createElement(
|
||||
'td',
|
||||
{
|
||||
|
|
@ -10939,13 +11003,21 @@
|
|||
_this.props.onDrop(event, data);
|
||||
};
|
||||
|
||||
_this.onMouseMove = function (event, data) {
|
||||
if (_this.border) return;
|
||||
_this.onMouseOver = function (event, data) {
|
||||
//如果是固定列没有拖拽功能
|
||||
if (_this.border || data.fixed) return;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
|
||||
event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
|
||||
};
|
||||
|
||||
_this.onMouseMove = function (event, data) {
|
||||
//如果是固定列没有拖拽功能
|
||||
if (_this.border || data.fixed) return;
|
||||
// const {clsPrefix} = this.props;
|
||||
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
};
|
||||
|
||||
_this.onMouseOut = function (event, data) {
|
||||
if (_this.border) return;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
|
|
@ -10955,7 +11027,9 @@
|
|||
|
||||
_this.onMouseDown = function (event, data) {
|
||||
_this.border = true;
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
var _this$props = _this.props,
|
||||
clsPrefix = _this$props.clsPrefix,
|
||||
contentTable = _this$props.contentTable;
|
||||
|
||||
_this.drag.initPageLeftX = event.pageX;
|
||||
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
|
||||
|
|
@ -10964,6 +11038,8 @@
|
|||
return da.key == data.key;
|
||||
});
|
||||
_this.drag.width = _this.drag.data[_this.drag.currIndex].width;
|
||||
|
||||
_this.contentTableWidth = contentTable.width;
|
||||
};
|
||||
|
||||
_this.onMouseUp = function (event, data) {
|
||||
|
|
@ -10979,10 +11055,23 @@
|
|||
|
||||
_this.onThMouseMove = function (event, data) {
|
||||
if (!_this.border) return;
|
||||
var dragborderKey = _this.props.dragborderKey;
|
||||
var _this$props2 = _this.props,
|
||||
dragborderKey = _this$props2.dragborderKey,
|
||||
contentTable = _this$props2.contentTable;
|
||||
|
||||
console.log(data);
|
||||
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
|
||||
if (!_this.contentTableWidth) {
|
||||
_this.contentTableWidth = contentTable.clientWidth;
|
||||
}
|
||||
var newTableWidth = _this.contentTableWidth + x;
|
||||
var newWidth = _this.drag.width + x;
|
||||
if (newWidth < _this.props.minColumnWidth) {
|
||||
//清楚样式
|
||||
var moveDom = event.target.querySelector('.th-drag-gap-hover');
|
||||
moveDom && moveDom.classList.remove('th-drag-gap-hover');
|
||||
// event.target.classList.remove('th-drag-gap-hover');
|
||||
return;
|
||||
}
|
||||
//设置hiden的left
|
||||
//"u-table-drag-hide-table"
|
||||
var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
|
||||
|
|
@ -11004,9 +11093,11 @@
|
|||
|
||||
//设置当前的宽度
|
||||
var currentData = _this.drag.data[_this.drag.currIndex];
|
||||
currentData.width = _this.drag.width + x;
|
||||
currentData.width = newWidth;
|
||||
var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
|
||||
currentDom.style.width = currentData.width + "px";
|
||||
currentDom.style.width = newWidth + "px";
|
||||
// this.contentTableWidth = newTableWidth;
|
||||
contentTable.style.width = newTableWidth + 'px';
|
||||
_this.drag.x = x;
|
||||
};
|
||||
|
||||
|
|
@ -11056,7 +11147,10 @@
|
|||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder,
|
||||
onMouseOut = _props.onMouseOut;
|
||||
onMouseOut = _props.onMouseOut,
|
||||
contentWidthDiff = _props.contentWidthDiff,
|
||||
fixed = _props.fixed,
|
||||
lastShowIndex = _props.lastShowIndex;
|
||||
|
||||
var attr = dragborder ? { id: 'u-table-drag-thead-' + this.theadKey } : {};
|
||||
return _react2['default'].createElement(
|
||||
|
|
@ -11066,9 +11160,16 @@
|
|||
return _react2['default'].createElement(
|
||||
'tr',
|
||||
{ key: index, style: rowStyle },
|
||||
row.map(function (da, i) {
|
||||
row.map(function (da, i, arr) {
|
||||
var thHover = da.drgHover ? ' ' + clsPrefix + '-thead th-drag-hover' : "";
|
||||
delete da.drgHover;
|
||||
var fixedStyle = '';
|
||||
if (!fixed && da.fixed) {
|
||||
fixedStyle = clsPrefix + '-row-fixed-columns-in-body';
|
||||
}
|
||||
if (lastShowIndex == i) {
|
||||
da.width = parseInt(da.width) + contentWidthDiff;
|
||||
}
|
||||
if (draggable) {
|
||||
return _react2['default'].createElement('th', _extends({}, da, {
|
||||
onDragStart: function onDragStart(event) {
|
||||
|
|
@ -11084,20 +11185,21 @@
|
|||
_this2.onDragEnter(event, da);
|
||||
},
|
||||
draggable: draggable,
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover,
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover + ' ' + fixedStyle,
|
||||
key: da.key }));
|
||||
} else if (dragborder) {
|
||||
|
||||
return _react2['default'].createElement(
|
||||
'th',
|
||||
{
|
||||
style: { width: da.width, minWidth: da.width },
|
||||
style: { width: da.width },
|
||||
onMouseMove: function onMouseMove(event) {
|
||||
_this2.onThMouseMove(event, da);
|
||||
},
|
||||
onMouseUp: function onMouseUp(event) {
|
||||
_this2.onThMouseUp(event, da);
|
||||
},
|
||||
className: da.className + ' ' + clsPrefix + '-thead-th ',
|
||||
className: da.className + ' ' + clsPrefix + '-thead-th ' + fixedStyle,
|
||||
key: i },
|
||||
da.children,
|
||||
_react2['default'].createElement('div', { ref: function ref(el) {
|
||||
|
|
@ -11115,12 +11217,15 @@
|
|||
onMouseUp: function onMouseUp(event) {
|
||||
_this2.onMouseUp(event, da);
|
||||
},
|
||||
onMouseOver: function onMouseOver(event) {
|
||||
_this2.onMouseOver(event, da);
|
||||
},
|
||||
className: clsPrefix + '-thead-th-drag-gap ' })
|
||||
);
|
||||
} else {
|
||||
var th = da.onClick ? _react2['default'].createElement('th', _extends({}, da, { key: i, onClick: function onClick(event) {
|
||||
var th = da.onClick ? _react2['default'].createElement('th', _extends({}, da, { className: ' ' + fixedStyle, key: i, onClick: function onClick(event) {
|
||||
da.onClick(da, event);
|
||||
} })) : _react2['default'].createElement('th', _extends({}, da, { key: i }));
|
||||
} })) : _react2['default'].createElement('th', _extends({}, da, { key: i, className: ' ' + fixedStyle }));
|
||||
return th;
|
||||
}
|
||||
})
|
||||
|
|
@ -11132,6 +11237,9 @@
|
|||
return TableHeader;
|
||||
}(_react.Component);
|
||||
|
||||
TableHeader.defaultProps = {
|
||||
contentWidthDiff: 0
|
||||
};
|
||||
;
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
|
@ -11158,6 +11266,7 @@
|
|||
exports.addClass = addClass;
|
||||
exports.removeClass = removeClass;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
exports.closest = closest;
|
||||
|
||||
var _warning = __webpack_require__(31);
|
||||
|
||||
|
|
@ -11290,6 +11399,23 @@
|
|||
}
|
||||
return tagObj;
|
||||
}
|
||||
/**
|
||||
* 获取某个父元素
|
||||
* */
|
||||
|
||||
function closest(ele, selector) {
|
||||
var matches = ele.matches || ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.msMatchesSelector;
|
||||
if (matches) {
|
||||
while (ele) {
|
||||
if (matches.call(ele, selector)) {
|
||||
return ele;
|
||||
} else {
|
||||
ele = ele.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 101 */
|
||||
|
|
@ -11731,12 +11857,13 @@
|
|||
//行控制管理
|
||||
|
||||
var ColumnManager = function () {
|
||||
function ColumnManager(columns, elements) {
|
||||
function ColumnManager(columns, elements, originWidth) {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
this._cached = {};
|
||||
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
|
||||
|
|
@ -11789,35 +11916,53 @@
|
|||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
ColumnManager.prototype.centerColumns = function centerColumns() {
|
||||
var _this6 = this;
|
||||
|
||||
return this._cache('centerColumns', function () {
|
||||
return _this6.groupedColumns().filter(function (column) {
|
||||
return !column.fixed;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
var _this7 = this;
|
||||
|
||||
return this._cache('leafColumns', function () {
|
||||
return _this6._leafColumns(_this6.columns);
|
||||
return _this7._leafColumns(_this7.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() {
|
||||
var _this7 = this;
|
||||
var _this8 = this;
|
||||
|
||||
return this._cache('leftLeafColumns', function () {
|
||||
return _this7._leafColumns(_this7.leftColumns());
|
||||
return _this8._leafColumns(_this8.leftColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() {
|
||||
var _this8 = this;
|
||||
var _this9 = this;
|
||||
|
||||
return this._cache('rightLeafColumns', function () {
|
||||
return _this8._leafColumns(_this8.rightColumns());
|
||||
return _this9._leafColumns(_this9.rightColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.centerLeafColumns = function centerLeafColumns() {
|
||||
var _this10 = this;
|
||||
|
||||
return this._cache('centerLeafColumns', function () {
|
||||
return _this10._leafColumns(_this10.centerColumns());
|
||||
});
|
||||
};
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
|
||||
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns() {
|
||||
var _this9 = this;
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns(type) {
|
||||
var _this11 = this;
|
||||
|
||||
return this._cache('groupedColumns', function () {
|
||||
var _groupColumns = function _groupColumns(columns) {
|
||||
|
|
@ -11836,7 +11981,17 @@
|
|||
}
|
||||
};
|
||||
columns.forEach(function (column, index) {
|
||||
var newColumn = _extends({}, column);
|
||||
var defaultOpt = {
|
||||
ifshow: true
|
||||
};
|
||||
if (!_this11.originWidth) {
|
||||
defaultOpt.width = 200;
|
||||
}
|
||||
//获取非固定列
|
||||
if (type == 'nofixed' && column.fixed) {
|
||||
return false;
|
||||
}
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
|
|
@ -11857,22 +12012,22 @@
|
|||
});
|
||||
return grouped;
|
||||
};
|
||||
return _groupColumns(_this9.columns);
|
||||
return _groupColumns(_this11.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.normalize = function normalize(elements) {
|
||||
var _this10 = this;
|
||||
var _this12 = this;
|
||||
|
||||
var columns = [];
|
||||
_react2['default'].Children.forEach(elements, function (element) {
|
||||
if (!_this10.isColumnElement(element)) return;
|
||||
if (!_this12.isColumnElement(element)) return;
|
||||
var column = _extends({}, element.props);
|
||||
if (element.key) {
|
||||
column.key = element.key;
|
||||
}
|
||||
if (element.type === _ColumnGroup2['default']) {
|
||||
column.children = _this10.normalize(column.children);
|
||||
column.children = _this12.normalize(column.children);
|
||||
}
|
||||
columns.push(column);
|
||||
});
|
||||
|
|
@ -11888,6 +12043,49 @@
|
|||
this._cached = {};
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumnWidth = function getColumnWidth() {
|
||||
var columns = this.groupedColumns();
|
||||
var res = { computeWidth: 0, lastShowIndex: 0 };
|
||||
columns.forEach(function (col, index) {
|
||||
//如果列显示
|
||||
if (col.ifshow) {
|
||||
res.computeWidth += parseInt(col.width);
|
||||
if (!col.fixed) {
|
||||
res.lastShowIndex = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
return res;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getLeftColumnsWidth = function getLeftColumnsWidth() {
|
||||
var _this13 = this;
|
||||
|
||||
return this._cache('leftColumnsWidth', function () {
|
||||
var leftColumnsWidth = 0;
|
||||
_this13.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'left' || column.fixed === true) {
|
||||
leftColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return leftColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getRightColumnsWidth = function getRightColumnsWidth() {
|
||||
var _this14 = this;
|
||||
|
||||
return this._cache('rightColumnsWidth', function () {
|
||||
var rightColumnsWidth = 0;
|
||||
_this14.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'right') {
|
||||
rightColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return rightColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype._cache = function _cache(name, fn) {
|
||||
if (name in this._cached) {
|
||||
return this._cached[name];
|
||||
|
|
@ -11896,15 +12094,27 @@
|
|||
return this._cached[name];
|
||||
};
|
||||
|
||||
//todo 含有children的宽度计算
|
||||
|
||||
|
||||
ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
|
||||
var _this11 = this;
|
||||
var _this15 = this;
|
||||
|
||||
var leafColumns = [];
|
||||
|
||||
columns.forEach(function (column) {
|
||||
if (!column.children) {
|
||||
leafColumns.push(column);
|
||||
|
||||
var defaultOpt = {
|
||||
ifshow: true
|
||||
};
|
||||
if (!_this15.originWidth) {
|
||||
defaultOpt.width = 200;
|
||||
}
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
leafColumns.push(newColumn);
|
||||
} else {
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this11._leafColumns(column.children)));
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this15._leafColumns(column.children)));
|
||||
}
|
||||
});
|
||||
return leafColumns;
|
||||
|
|
@ -11950,7 +12160,8 @@
|
|||
width: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string]),
|
||||
fixed: _propTypes2['default'].oneOf([true, 'left', 'right']),
|
||||
render: _propTypes2['default'].func,
|
||||
onCellClick: _propTypes2['default'].func
|
||||
onCellClick: _propTypes2['default'].func,
|
||||
ifshow: _propTypes2['default'].bool
|
||||
};
|
||||
|
||||
var Column = function (_Component) {
|
||||
|
|
@ -11965,6 +12176,11 @@
|
|||
return Column;
|
||||
}(_react.Component);
|
||||
|
||||
Column.defaultProps = {
|
||||
ifshow: true
|
||||
};
|
||||
|
||||
|
||||
Column.propTypes = propTypes;
|
||||
|
||||
exports['default'] = Column;
|
||||
|
|
@ -13365,7 +13581,7 @@
|
|||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "100px",
|
||||
width: "100",
|
||||
render: function render(text, record, index) {
|
||||
var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
|
|
@ -13764,7 +13980,7 @@
|
|||
}
|
||||
return item;
|
||||
});
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj, originWidth: true }));
|
||||
};
|
||||
|
||||
_this.currentTreeFooter = function () {
|
||||
|
|
@ -13816,7 +14032,7 @@
|
|||
|
||||
var _sumArray = [_extends({ key: "sumData", showSum: "合计" }, _countObj)];
|
||||
columns[0] = _extends({}, columns[0], columns2);
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray }));
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray, originWidth: true }));
|
||||
};
|
||||
|
||||
_this.getNodeItem = function (array, newArray) {
|
||||
|
|
@ -13882,7 +14098,8 @@
|
|||
footerScroll: true,
|
||||
columns: this.props.columns,
|
||||
data: this.props.data,
|
||||
footer: this.setFooterRender
|
||||
footer: this.setFooterRender,
|
||||
originWidth: true
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
@ -57354,10 +57571,10 @@
|
|||
onDragOver: this.onDragOver,
|
||||
onDrop: this.onDrop,
|
||||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable
|
||||
// dragborder={dragborder}
|
||||
, dragborder: false,
|
||||
dragborderKey: key
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
// dragborder={false}
|
||||
, dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -16,11 +16,14 @@ const propTypes = {
|
|||
'right',
|
||||
]),
|
||||
render: PropTypes.func,
|
||||
onCellClick: PropTypes.func
|
||||
onCellClick: PropTypes.func,
|
||||
ifshow:PropTypes.bool
|
||||
}
|
||||
|
||||
class Column extends Component {
|
||||
|
||||
static defaultProps = {
|
||||
ifshow:true
|
||||
}
|
||||
}
|
||||
|
||||
Column.propTypes = propTypes;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import ColumnGroup from './ColumnGroup';
|
|||
export default class ColumnManager {
|
||||
_cached = {}
|
||||
|
||||
constructor(columns, elements) {
|
||||
constructor(columns, elements,originWidth) {
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
||||
isAnyColumnsFixed() {
|
||||
|
|
@ -49,6 +50,14 @@ export default class ColumnManager {
|
|||
});
|
||||
}
|
||||
|
||||
centerColumns() {
|
||||
return this._cache('centerColumns', () => {
|
||||
return this.groupedColumns().filter(
|
||||
column => !column.fixed
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
leafColumns() {
|
||||
return this._cache('leafColumns', () =>
|
||||
this._leafColumns(this.columns)
|
||||
|
|
@ -66,9 +75,14 @@ export default class ColumnManager {
|
|||
this._leafColumns(this.rightColumns())
|
||||
);
|
||||
}
|
||||
centerLeafColumns() {
|
||||
return this._cache('centerLeafColumns', () =>
|
||||
this._leafColumns(this.centerColumns())
|
||||
);
|
||||
}
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
groupedColumns() {
|
||||
groupedColumns(type) {
|
||||
return this._cache('groupedColumns', () => {
|
||||
const _groupColumns = (columns, currentRow = 0, parentColumn = {}, rows = []) => {
|
||||
// track how many rows we got
|
||||
|
|
@ -85,7 +99,17 @@ export default class ColumnManager {
|
|||
}
|
||||
};
|
||||
columns.forEach((column, index) => {
|
||||
const newColumn = { ...column };
|
||||
let defaultOpt= {
|
||||
ifshow:true
|
||||
}
|
||||
if(!this.originWidth){
|
||||
defaultOpt.width = 200
|
||||
}
|
||||
//获取非固定列
|
||||
if(type=='nofixed' && column.fixed){
|
||||
return false;
|
||||
}
|
||||
const newColumn = { ...defaultOpt,...column };
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
|
|
@ -134,6 +158,44 @@ export default class ColumnManager {
|
|||
this.columns = columns || this.normalize(elements);
|
||||
this._cached = {};
|
||||
}
|
||||
getColumnWidth(){
|
||||
let columns = this.groupedColumns();
|
||||
let res={computeWidth:0,lastShowIndex:0};
|
||||
columns.forEach((col,index)=>{
|
||||
//如果列显示
|
||||
if(col.ifshow){
|
||||
res.computeWidth += parseInt(col.width);
|
||||
if(!col.fixed){
|
||||
res.lastShowIndex = index;
|
||||
}
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
|
||||
getLeftColumnsWidth() {
|
||||
return this._cache('leftColumnsWidth', () => {
|
||||
let leftColumnsWidth =0;
|
||||
this.groupedColumns().forEach(column =>{
|
||||
if (column.fixed === 'left' || column.fixed === true){
|
||||
leftColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return leftColumnsWidth;
|
||||
});
|
||||
}
|
||||
|
||||
getRightColumnsWidth() {
|
||||
return this._cache('rightColumnsWidth', () => {
|
||||
let rightColumnsWidth =0;
|
||||
this.groupedColumns().forEach(column =>{
|
||||
if (column.fixed === 'right'){
|
||||
rightColumnsWidth += column.width;
|
||||
}
|
||||
});
|
||||
return rightColumnsWidth;
|
||||
});
|
||||
}
|
||||
|
||||
_cache(name, fn) {
|
||||
if (name in this._cached) {
|
||||
|
|
@ -143,11 +205,21 @@ export default class ColumnManager {
|
|||
return this._cached[name];
|
||||
}
|
||||
|
||||
//todo 含有children的宽度计算
|
||||
_leafColumns(columns) {
|
||||
const leafColumns = [];
|
||||
|
||||
columns.forEach(column => {
|
||||
if (!column.children) {
|
||||
leafColumns.push(column);
|
||||
|
||||
let defaultOpt= {
|
||||
ifshow:true
|
||||
}
|
||||
if(!this.originWidth){
|
||||
defaultOpt.width = 200
|
||||
}
|
||||
const newColumn = { ...defaultOpt,...column };
|
||||
leafColumns.push(newColumn);
|
||||
} else {
|
||||
leafColumns.push(...this._leafColumns(column.children));
|
||||
}
|
||||
|
|
|
|||
67
src/Table.js
67
src/Table.js
|
|
@ -40,8 +40,8 @@ const propTypes = {
|
|||
rowRef: PropTypes.func,
|
||||
getBodyWrapper: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
|
||||
draggable: PropTypes.bool,
|
||||
minColumnWidth:PropTypes.number
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -68,6 +68,7 @@ const defaultProps = {
|
|||
rowRef: () => null,
|
||||
getBodyWrapper: body => body,
|
||||
emptyText: () => 'No Data',
|
||||
minColumnWidth:80
|
||||
};
|
||||
|
||||
class Table extends Component{
|
||||
|
|
@ -75,7 +76,7 @@ class Table extends Component{
|
|||
super(props);
|
||||
let expandedRowKeys = [];
|
||||
let rows = [...props.data];
|
||||
this.columnManager = new ColumnManager(props.columns, props.children);
|
||||
this.columnManager = new ColumnManager(props.columns, props.children,props.originWidth);
|
||||
this.store = createStore({ currentHoverKey: null });
|
||||
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -121,17 +122,22 @@ class Table extends Component{
|
|||
this.detectScrollTarget = this.detectScrollTarget.bind(this);
|
||||
this.handleBodyScroll = this.handleBodyScroll.bind(this);
|
||||
this.handleRowHover = this.handleRowHover.bind(this);
|
||||
|
||||
this.computeTableWidth = this.computeTableWidth.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(this.resetScrollY,300);
|
||||
//后续也放在recevice里面
|
||||
if(!this.props.originWidth){
|
||||
this.computeTableWidth();
|
||||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = addEventListener(
|
||||
window, 'resize', debounce(this.syncFixedTableRowHeight, 150)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
|
@ -153,6 +159,10 @@ class Table extends Component{
|
|||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
}
|
||||
if(!nextProps.originWidth){
|
||||
this.computeTableWidth();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
|
|
@ -167,6 +177,27 @@ class Table extends Component{
|
|||
}
|
||||
}
|
||||
|
||||
computeTableWidth(){
|
||||
//计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
|
||||
this.contentWidth = this.contentTable.clientWidth//表格宽度
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
let setWidthParam = this.props.scroll.x
|
||||
if(setWidthParam){
|
||||
if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
|
||||
}else{
|
||||
this.contentWidth = parseInt(setWidthParam);
|
||||
}
|
||||
}
|
||||
const computeObj = this.columnManager.getColumnWidth();
|
||||
let lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
if(this.computeWidth < this.contentWidth){
|
||||
let contentWidthDiff = this.contentWidth - this.computeWidth;
|
||||
this.setState({contentWidthDiff,lastShowIndex});
|
||||
}
|
||||
|
||||
}
|
||||
onExpandedRowsChange(expandedRowKeys) {
|
||||
if (!this.props.expandedRowKeys) {
|
||||
this.setState({ expandedRowKeys });
|
||||
|
|
@ -223,7 +254,7 @@ class Table extends Component{
|
|||
|
||||
getHeader(columns, fixed) {
|
||||
const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey} = this.props;
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey,minColumnWidth} = this.props;
|
||||
const rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
rows[0].unshift({
|
||||
|
|
@ -237,14 +268,23 @@ class Table extends Component{
|
|||
const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
|
||||
let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey}:{};
|
||||
|
||||
let contentWidthDiff = 0;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
if(!fixed){
|
||||
contentWidthDiff = this.state.contentWidthDiff
|
||||
}
|
||||
return showHeader ? (
|
||||
<TableHeader
|
||||
{...drop}
|
||||
{...dragBorder}
|
||||
minColumnWidth={minColumnWidth}
|
||||
contentWidthDiff = {contentWidthDiff}
|
||||
lastShowIndex = {this.state.lastShowIndex}
|
||||
clsPrefix={clsPrefix}
|
||||
rows={rows}
|
||||
contentTable = {this.contentTable}
|
||||
rowStyle={trStyle}
|
||||
fixed={fixed}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
|
@ -264,6 +304,7 @@ class Table extends Component{
|
|||
className: column.className || '',
|
||||
children: column.title,
|
||||
drgHover: column.drgHover,
|
||||
fixed:column.fixed,
|
||||
width:column.width
|
||||
};
|
||||
if(column.onHeadCellClick){
|
||||
|
|
@ -420,6 +461,7 @@ class Table extends Component{
|
|||
hoverKey={key}
|
||||
ref={rowRef}
|
||||
store={this.store}
|
||||
fixed={fixed}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -448,6 +490,7 @@ class Table extends Component{
|
|||
|
||||
getColGroup(columns, fixed) {
|
||||
let cols = [];
|
||||
let {contentWidthDiff=0,lastShowIndex=0} = this.state;
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(
|
||||
<col
|
||||
|
|
@ -458,14 +501,20 @@ class Table extends Component{
|
|||
}
|
||||
let leafColumns;
|
||||
if (fixed === 'left') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.leftLeafColumns();
|
||||
} else if (fixed === 'right') {
|
||||
contentWidthDiff = 0;
|
||||
leafColumns = this.columnManager.rightLeafColumns();
|
||||
} else {
|
||||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
cols = cols.concat(leafColumns.map(c => {
|
||||
return <col key={c.key} style={{ width: c.width, minWidth: c.width }} />;
|
||||
cols = cols.concat(leafColumns.map((c,i,arr) => {
|
||||
let width = c.width;
|
||||
if(lastShowIndex == i ){
|
||||
width = parseInt(width) + contentWidthDiff;
|
||||
}
|
||||
return <col key={c.key} style={{ width: width, minWidth: c.width }} />;
|
||||
}));
|
||||
return <colgroup>{cols}</colgroup>;
|
||||
}
|
||||
|
|
@ -549,7 +598,7 @@ class Table extends Component{
|
|||
) : null;
|
||||
let _drag_class = this.props.dragborder?"table-drag-bordered":""
|
||||
return (
|
||||
<table className={` ${tableClassName} table table-bordered ${_drag_class} `} style={tableStyle}>
|
||||
<table className={` ${tableClassName} table table-bordered ${_drag_class} `} style={tableStyle} >
|
||||
{this.props.dragborder?null:this.getColGroup(columns, fixed)}
|
||||
{hasHead ? this.getHeader(columns, fixed) : null}
|
||||
{tableBody}
|
||||
|
|
@ -774,7 +823,7 @@ class Table extends Component{
|
|||
};
|
||||
}
|
||||
return (
|
||||
<div className={className} style={props.style}>
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}>
|
||||
{this.getTitle()}
|
||||
<div className={`${clsPrefix}-content`}>
|
||||
{this.columnManager.isAnyColumnsLeftFixed() &&
|
||||
|
|
|
|||
|
|
@ -268,6 +268,9 @@ $table-move-in-color: $bg-color-base;
|
|||
|
||||
th{
|
||||
background: $table-head-background-color;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.th-drag{
|
||||
cursor: pointer;
|
||||
|
|
@ -289,14 +292,16 @@ $table-move-in-color: $bg-color-base;
|
|||
top: 0;
|
||||
background:transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
}
|
||||
.th-drag-gap{
|
||||
background:transparent;
|
||||
}
|
||||
.th-drag-gap-hover{
|
||||
background: #ccc;
|
||||
cursor: col-resize;
|
||||
}
|
||||
}
|
||||
&-th:last-child {
|
||||
|
|
@ -349,6 +354,10 @@ $table-move-in-color: $bg-color-base;
|
|||
}
|
||||
}
|
||||
//拖拽宽度代码
|
||||
&-row-fixed-columns-in-body{
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.u-table.bordered {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,9 @@ class TableCell extends Component{
|
|||
}
|
||||
render() {
|
||||
const { record, indentSize, clsPrefix, indent,
|
||||
index, expandIcon, column } = this.props;
|
||||
const { dataIndex, render, className = '' } = column;
|
||||
index, expandIcon, column ,fixed} = this.props;
|
||||
const { dataIndex, render } = column;
|
||||
let {className = ''} = column;
|
||||
|
||||
let text = objectPath.get(record, dataIndex);
|
||||
let tdProps;
|
||||
|
|
@ -63,6 +64,10 @@ class TableCell extends Component{
|
|||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
//不是固定表格并且当前列是固定，则隐藏当前列
|
||||
if(column.fixed && !fixed){
|
||||
className = className+`${clsPrefix}-fixed-columns-in-body`;
|
||||
}
|
||||
return (
|
||||
<td
|
||||
colSpan={colSpan}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@ class TableHeader extends Component{
|
|||
this.drag.data = _row;//JSON.parse(JSON.stringify(this.props.rows[0]));
|
||||
|
||||
}
|
||||
static defaultProps = {
|
||||
contentWidthDiff:0
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !shallowequal(nextProps, this.props);
|
||||
|
|
@ -71,12 +74,19 @@ class TableHeader extends Component{
|
|||
this.props.onDrop(event,data);
|
||||
}
|
||||
|
||||
|
||||
onMouseMove=(event,data)=>{
|
||||
if(this.border)return;
|
||||
onMouseOver=(event,data)=>{
|
||||
//如果是固定列没有拖拽功能
|
||||
if(this.border || data.fixed)return;
|
||||
const {clsPrefix} = this.props;
|
||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
}
|
||||
|
||||
onMouseMove=(event,data)=>{
|
||||
//如果是固定列没有拖拽功能
|
||||
if(this.border || data.fixed)return;
|
||||
// const {clsPrefix} = this.props;
|
||||
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
}
|
||||
onMouseOut=(event,data)=>{
|
||||
if(this.border)return;
|
||||
const {clsPrefix} = this.props;
|
||||
|
|
@ -84,12 +94,14 @@ class TableHeader extends Component{
|
|||
}
|
||||
onMouseDown=(event,data)=>{
|
||||
this.border = true;
|
||||
const {clsPrefix} = this.props;
|
||||
const {clsPrefix,contentTable} = this.props;
|
||||
this.drag.initPageLeftX = event.pageX;
|
||||
this.drag.initLeft = tryParseInt(event.target.style.left);
|
||||
this.drag.x = this.drag.initLeft;
|
||||
this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
|
||||
this.drag.width = this.drag.data[this.drag.currIndex].width;
|
||||
|
||||
this.contentTableWidth = contentTable.width;
|
||||
}
|
||||
onMouseUp=(event,data)=>{
|
||||
this.border = false;
|
||||
|
|
@ -102,9 +114,20 @@ class TableHeader extends Component{
|
|||
|
||||
onThMouseMove=(event,data)=>{
|
||||
if(!this.border)return;
|
||||
const {dragborderKey} = this.props;
|
||||
console.log(data);
|
||||
const {dragborderKey,contentTable} = this.props;
|
||||
let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
|
||||
if(!this.contentTableWidth){
|
||||
this.contentTableWidth = contentTable.clientWidth;
|
||||
}
|
||||
const newTableWidth = this.contentTableWidth + x;
|
||||
const newWidth = this.drag.width + x;
|
||||
if(newWidth<this.props.minColumnWidth){
|
||||
//清楚样式
|
||||
let moveDom = event.target.querySelector('.th-drag-gap-hover');
|
||||
moveDom && moveDom.classList.remove('th-drag-gap-hover');
|
||||
// event.target.classList.remove('th-drag-gap-hover');
|
||||
return
|
||||
}
|
||||
//设置hiden的left
|
||||
//"u-table-drag-hide-table"
|
||||
let currentHideDom = document.getElementById("u-table-drag-hide-table-"+dragborderKey).getElementsByTagName("div")[this.drag.currIndex];
|
||||
|
|
@ -126,15 +149,18 @@ class TableHeader extends Component{
|
|||
|
||||
//设置当前的宽度
|
||||
let currentData = this.drag.data[this.drag.currIndex];
|
||||
currentData.width = this.drag.width + x;
|
||||
currentData.width = newWidth;
|
||||
let currentDom = document.getElementById("u-table-drag-thead-"+this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
|
||||
currentDom.style.width = (currentData.width)+"px";
|
||||
currentDom.style.width = newWidth+"px";
|
||||
// this.contentTableWidth = newTableWidth;
|
||||
contentTable.style.width = newTableWidth+'px';
|
||||
this.drag.x = x;
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows,
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder,onMouseOut
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder,onMouseOut,contentWidthDiff,fixed,lastShowIndex
|
||||
} = this.props;
|
||||
let attr = dragborder?{id:`u-table-drag-thead-${this.theadKey}`}:{}
|
||||
return (
|
||||
|
|
@ -142,9 +168,16 @@ class TableHeader extends Component{
|
|||
{
|
||||
rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle}>
|
||||
{row.map((da, i) => {
|
||||
{row.map((da, i,arr) => {
|
||||
let thHover = da.drgHover?` ${clsPrefix}-thead th-drag-hover`:"";
|
||||
delete da.drgHover;
|
||||
let fixedStyle='';
|
||||
if(!fixed && da.fixed){
|
||||
fixedStyle=`${clsPrefix}-row-fixed-columns-in-body`;
|
||||
}
|
||||
if(lastShowIndex == i){
|
||||
da.width = parseInt(da.width) + contentWidthDiff;
|
||||
}
|
||||
if(draggable){
|
||||
return ( <th {...da}
|
||||
onDragStart={(event)=>{this.onDragStart(event,da)}}
|
||||
|
|
@ -152,14 +185,15 @@ class TableHeader extends Component{
|
|||
onDrop={(event)=>{this.onDrop(event,da)}}
|
||||
onDragEnter={(event)=>{this.onDragEnter(event,da)}}
|
||||
draggable={draggable}
|
||||
className={`${da.className} ${clsPrefix}-thead th-drag ${thHover}`}
|
||||
className={`${da.className} ${clsPrefix}-thead th-drag ${thHover} ${fixedStyle}`}
|
||||
key={da.key} />)
|
||||
}else if(dragborder){
|
||||
|
||||
return(<th
|
||||
style={{width:da.width,minWidth:da.width}}
|
||||
style={{width:da.width}}
|
||||
onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
|
||||
onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
|
||||
className={`${da.className} ${clsPrefix}-thead-th `}
|
||||
className={`${da.className} ${clsPrefix}-thead-th ${fixedStyle}`}
|
||||
key={i} >
|
||||
{da.children}
|
||||
<div ref={el=>this.gap = el }
|
||||
|
|
@ -167,10 +201,11 @@ class TableHeader extends Component{
|
|||
onMouseOut={(event)=>{this.onMouseOut(event,da)}}
|
||||
onMouseDown={(event)=>{this.onMouseDown(event,da)}}
|
||||
onMouseUp={(event)=>{this.onMouseUp(event,da)}}
|
||||
onMouseOver={(event)=>{this.onMouseOver(event,da)}}
|
||||
className={`${clsPrefix}-thead-th-drag-gap `}></div>
|
||||
</th>)
|
||||
}else{
|
||||
let th = da.onClick?(<th {...da} key={i} onClick={(event)=>{da.onClick(da,event)}}/>):(<th {...da} key={i} />);
|
||||
let th = da.onClick?(<th {...da} className={` ${fixedStyle}`} key={i} onClick={(event)=>{da.onClick(da,event)}}/>):(<th {...da} key={i} className={` ${fixedStyle}`} />);
|
||||
return (th);
|
||||
}
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ class TableRow extends Component{
|
|||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
|
||||
} = this.props;
|
||||
|
||||
let { className } = this.props;
|
||||
|
|
@ -168,6 +168,7 @@ class TableRow extends Component{
|
|||
index={index}
|
||||
column={columns[i]}
|
||||
key={columns[i].key}
|
||||
fixed= {fixed}
|
||||
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@ export default function dragColumn(Table) {
|
|||
onDrop={this.onDrop}
|
||||
onDragEnter={this.onDragEnter}
|
||||
draggable={draggable}
|
||||
// dragborder={dragborder}
|
||||
dragborder={false}
|
||||
dragborder={dragborder}
|
||||
// dragborder={false}
|
||||
dragborderKey={key}
|
||||
/>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export default function multiSelect(Table, Checkbox) {
|
|||
),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "100px",
|
||||
width: "100",
|
||||
render: (text, record, index) => {
|
||||
let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
|
||||
let bool = checkedObj.hasOwnProperty(rowKey);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default function sum(Table) {
|
|||
}
|
||||
return item;
|
||||
});
|
||||
return <Table{...this.props} loading={false} footerScroll showHeader={false} columns={columns_sum} data={obj} />;
|
||||
return <Table{...this.props} loading={false} footerScroll showHeader={false} columns={columns_sum} data={obj} originWidth={true}/>;
|
||||
};
|
||||
|
||||
currentTreeFooter =()=>{
|
||||
|
|
@ -84,7 +84,7 @@ export default function sum(Table) {
|
|||
}
|
||||
let _sumArray = [{key:"sumData",showSum:"合计",..._countObj}];
|
||||
columns[0] = Object.assign({}, columns[0], columns2);
|
||||
return <Table{...this.props} bordered={false} loading={false} footerScroll showHeader={false} columns={columns} data={_sumArray} />;
|
||||
return <Table{...this.props} bordered={false} loading={false} footerScroll showHeader={false} columns={columns} data={_sumArray} originWidth={true}/>;
|
||||
}
|
||||
|
||||
getNodeItem =(array,newArray)=>{
|
||||
|
|
@ -132,6 +132,7 @@ export default function sum(Table) {
|
|||
columns={this.props.columns}
|
||||
data={this.props.data}
|
||||
footer={this.setFooterRender}
|
||||
originWidth={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
17
src/utils.js
17
src/utils.js
|
|
@ -126,3 +126,20 @@ export function ObjectAssign(obj){
|
|||
}
|
||||
return tagObj;
|
||||
}
|
||||
/**
|
||||
* 获取某个父元素
|
||||
* */
|
||||
|
||||
export function closest(ele, selector) {
|
||||
const matches = ele.matches || ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.msMatchesSelector;
|
||||
if (matches) {
|
||||
while (ele) {
|
||||
if (matches.call(ele, selector)) {
|
||||
return ele;
|
||||
} else {
|
||||
ele = ele.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
Loading…
Reference in New Issue