fix(fix:拖拽列宽,滚动条动态改变;fix:两个滚动条联动bug;fix:拖拽追后一列超出内容隐藏):
This commit is contained in:
parent
ff3b5196c3
commit
bc6841b82d
|
@ -199,8 +199,6 @@
|
||||||
.u-table td {
|
.u-table td {
|
||||||
padding: 12px 8px;
|
padding: 12px 8px;
|
||||||
word-break: break-all; }
|
word-break: break-all; }
|
||||||
.u-table tr th:last-child {
|
|
||||||
overflow: hidden; }
|
|
||||||
.u-table tr.filterable th {
|
.u-table tr.filterable th {
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
padding-bottom: 4px; }
|
padding-bottom: 4px; }
|
||||||
|
@ -221,6 +219,8 @@
|
||||||
.u-table-bordered td {
|
.u-table-bordered td {
|
||||||
border-right: 1px solid rgb(233,233,233);
|
border-right: 1px solid rgb(233,233,233);
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
|
.u-table-drag-border tr th.th-can-not-drag {
|
||||||
|
overflow: hidden; }
|
||||||
.u-table-header {
|
.u-table-header {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: rgb(247,247,247);
|
background: rgb(247,247,247);
|
||||||
|
|
|
@ -144,8 +144,7 @@ var defaultProps = {
|
||||||
syncHover: true,
|
syncHover: true,
|
||||||
setRowHeight: function setRowHeight() {},
|
setRowHeight: function setRowHeight() {},
|
||||||
setRowParentIndex: function setRowParentIndex() {},
|
setRowParentIndex: function setRowParentIndex() {},
|
||||||
tabIndex: '0',
|
tabIndex: '0'
|
||||||
noExpandedRowKeys: []
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var Table = function (_Component) {
|
var Table = function (_Component) {
|
||||||
|
@ -729,11 +728,6 @@ var Table = function (_Component) {
|
||||||
if (rootIndex == -1) {
|
if (rootIndex == -1) {
|
||||||
index = i + lazyParentIndex;
|
index = i + lazyParentIndex;
|
||||||
}
|
}
|
||||||
var noexpandable = void 0;
|
|
||||||
if (props.noExpandedRowKeys.indexOf(key) >= 0) {
|
|
||||||
noexpandable = true;
|
|
||||||
isHiddenExpandIcon = true;
|
|
||||||
}
|
|
||||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||||
indent: indent,
|
indent: indent,
|
||||||
indentSize: props.indentSize,
|
indentSize: props.indentSize,
|
||||||
|
@ -746,7 +740,7 @@ var Table = function (_Component) {
|
||||||
visible: visible,
|
visible: visible,
|
||||||
expandRowByClick: expandRowByClick,
|
expandRowByClick: expandRowByClick,
|
||||||
onExpand: this.onExpanded,
|
onExpand: this.onExpanded,
|
||||||
expandable: !noexpandable && (childrenColumn || expandedRowRender),
|
expandable: childrenColumn || expandedRowRender,
|
||||||
expanded: isRowExpanded,
|
expanded: isRowExpanded,
|
||||||
clsPrefix: props.clsPrefix + '-row',
|
clsPrefix: props.clsPrefix + '-row',
|
||||||
childrenColumnName: childrenColumnName,
|
childrenColumnName: childrenColumnName,
|
||||||
|
|
|
@ -50,6 +50,24 @@ var TableHeader = function (_Component) {
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
|
_this.optTableMargin = function (table, scrollbarWidth) {
|
||||||
|
if (table) {
|
||||||
|
table.style.marginBottom = scrollbarWidth + "px";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.optTableScroll = function (table) {
|
||||||
|
var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||||
|
|
||||||
|
if (table) {
|
||||||
|
var innerTable = table.querySelector('.u-table-body-inner');
|
||||||
|
if (innerTable) {
|
||||||
|
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||||
|
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
_this.onLineMouseMove = function (e) {
|
_this.onLineMouseMove = function (e) {
|
||||||
var _this$props = _this.props,
|
var _this$props = _this.props,
|
||||||
clsPrefix = _this$props.clsPrefix,
|
clsPrefix = _this$props.clsPrefix,
|
||||||
|
@ -77,30 +95,43 @@ var TableHeader = function (_Component) {
|
||||||
if (_this.fixedTable.cols) {
|
if (_this.fixedTable.cols) {
|
||||||
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
|
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
|
||||||
}
|
}
|
||||||
|
var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
|
||||||
|
var newTableWidth = oldTableWidth + diff;
|
||||||
|
_this.table.table.style.width = newTableWidth; //改变table的width
|
||||||
|
|
||||||
|
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
|
||||||
|
var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
||||||
|
var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
||||||
|
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
||||||
|
var fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
|
||||||
|
var fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
|
||||||
|
|
||||||
//表头滚动条处理
|
//表头滚动条处理
|
||||||
if (headerScroll) {
|
if (headerScroll) {
|
||||||
var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
|
|
||||||
var newTableWidth = oldTableWidth + diff;
|
|
||||||
_this.table.table.style.width = newTableWidth; //改变table的width
|
|
||||||
|
|
||||||
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
|
|
||||||
// if(bordered){
|
|
||||||
// showScroll = showScroll -1;
|
|
||||||
// }
|
|
||||||
var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
|
||||||
var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
|
||||||
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
|
||||||
if (showScroll < 0) {
|
if (showScroll < 0) {
|
||||||
//找到固定列表格,设置表头的marginBottom值为scrollbarWidth;
|
//找到固定列表格,设置表头的marginBottom值为scrollbarWidth;
|
||||||
contentTableHeader.style.overflowX = 'scroll';
|
contentTableHeader.style.overflowX = 'scroll';
|
||||||
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
|
_this.optTableMargin(fixedLeftHeaderTable, scrollbarWidth);
|
||||||
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
_this.optTableMargin(fixedRighHeadertTable, scrollbarWidth);
|
||||||
|
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
|
||||||
|
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
|
||||||
//todo inner scroll-x去掉;outer marginbottom 设置成-15px】
|
//todo inner scroll-x去掉;outer marginbottom 设置成-15px】
|
||||||
} else {
|
} else {
|
||||||
contentTableHeader.style.overflowX = 'hidden';
|
contentTableHeader.style.overflowX = 'hidden';
|
||||||
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
|
_this.optTableMargin(fixedLeftHeaderTable, 0);
|
||||||
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
|
_this.optTableMargin(fixedRighHeadertTable, 0);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (showScroll < 0) {
|
||||||
|
_this.optTableMargin(fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||||
|
_this.optTableMargin(fixedRightBodyTable, '-' + scrollbarWidth);
|
||||||
|
_this.optTableScroll(fixedLeftBodyTable, { x: 'scroll' });
|
||||||
|
_this.optTableScroll(fixedRightBodyTable, { x: 'scroll' });
|
||||||
|
} else {
|
||||||
|
_this.optTableMargin(fixedLeftBodyTable, 0);
|
||||||
|
_this.optTableMargin(fixedRightBodyTable, 0);
|
||||||
|
_this.optTableScroll(fixedLeftBodyTable, { x: 'auto' });
|
||||||
|
_this.optTableScroll(fixedRightBodyTable, { x: 'auto' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -460,6 +491,12 @@ var TableHeader = function (_Component) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
/**
|
||||||
|
*相关滚动条联动操作
|
||||||
|
*
|
||||||
|
* @memberof TableHeader
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 调整列宽的move事件
|
* 调整列宽的move事件
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "bee-table",
|
"name": "bee-table",
|
||||||
"version": "1.6.43",
|
"version": "1.6.44",
|
||||||
"description": "Table ui component for react",
|
"description": "Table ui component for react",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
|
|
Loading…
Reference in New Issue