JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix(fix:拖拽列宽，滚动条动态改变；fix:两个滚动条联动bug；fix:拖拽追后一列超出内容隐藏):

This commit is contained in:
wanghaoo 2019-02-26 16:57:47 +08:00
parent ff3b5196c3
commit bc6841b82d
4 changed files with 57 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/Table.css
View File

@ -199,8 +199,6 @@
.u-table td {
padding: 12px 8px;
word-break: break-all; }
.u-table tr th:last-child {
overflow: hidden; }
.u-table tr.filterable th {
padding-top: 4px;
padding-bottom: 4px; }
@ -221,6 +219,8 @@
.u-table-bordered td {
border-right: 1px solid rgb(233,233,233);
box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; }
.u-table-header {
overflow: hidden;
background: rgb(247,247,247);

10
build/Table.js
View File

@ -144,8 +144,7 @@ var defaultProps = {
syncHover: true,
setRowHeight: function setRowHeight() {},
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
noExpandedRowKeys: []
tabIndex: '0'
};
var Table = function (_Component) {
@ -729,11 +728,6 @@ var Table = function (_Component) {
if (rootIndex == -1) {
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({
indent: indent,
indentSize: props.indentSize,
@ -746,7 +740,7 @@ var Table = function (_Component) {
visible: visible,
expandRowByClick: expandRowByClick,
onExpand: this.onExpanded,
expandable: !noexpandable && (childrenColumn || expandedRowRender),
expandable: childrenColumn || expandedRowRender,
expanded: isRowExpanded,
clsPrefix: props.clsPrefix + '-row',
childrenColumnName: childrenColumnName,

67
build/TableHeader.js
View File

@ -50,6 +50,24 @@ var TableHeader = function (_Component) {
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) {
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
@ -77,30 +95,43 @@ var TableHeader = function (_Component) {
if (_this.fixedTable.cols) {
_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) {
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) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
_this.optTableMargin(fixedLeftHeaderTable, scrollbarWidth);
_this.optTableMargin(fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
contentTableHeader.style.overflowX = 'hidden';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
_this.optTableMargin(fixedLeftHeaderTable, 0);
_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事件

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.6.43",
"version": "1.6.44",
"description": "Table ui component for react",
"keywords": [
"react",