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

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

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

4
build/Table.js
View File

@ -911,7 +911,7 @@ var Table = function (_Component) {
//显示表头滚动条
if (headerScroll) {
if (fixed) {
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@ -1179,7 +1179,7 @@ var Table = function (_Component) {
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
if (e.currentTarget !== e.target) {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {

1
build/TableHeader.js
View File

@ -96,6 +96,7 @@ var TableHeader = function (_Component) {
contentTableHeader.style.overflowX = 'scroll';
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');

4
dist/demo.css vendored
View File

@ -8640,8 +8640,6 @@ ul {
.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; }
@ -8662,6 +8660,8 @@ ul {
.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);

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

79
dist/demo.js vendored
View File

@ -11001,8 +11001,7 @@
syncHover: true,
setRowHeight: function setRowHeight() {},
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
noExpandedRowKeys: []
tabIndex: '0'
};
var Table = function (_Component) {
@ -11586,11 +11585,6 @@
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,
@ -11603,7 +11597,7 @@
visible: visible,
expandRowByClick: expandRowByClick,
onExpand: this.onExpanded,
expandable: !noexpandable && (childrenColumn || expandedRowRender),
expandable: childrenColumn || expandedRowRender,
expanded: isRowExpanded,
clsPrefix: props.clsPrefix + '-row',
childrenColumnName: childrenColumnName,
@ -12036,7 +12030,7 @@
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
if (e.currentTarget !== e.target) {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
@ -13167,6 +13161,24 @@
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,
@ -13194,30 +13206,43 @@
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' });
}
}
}
@ -13577,6 +13602,12 @@
}
}
};
/**
*相关滚动条联动操作
*
* @memberof TableHeader
*/
/**
* 调整列宽的move事件

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

12
src/Table.js
View File

@ -84,8 +84,7 @@ const defaultProps = {
syncHover: true,
setRowHeight:()=>{},
setRowParentIndex:()=>{},
tabIndex:'0',
noExpandedRowKeys:[]
tabIndex:'0'
};
class Table extends Component {
@ -594,11 +593,6 @@ class Table extends Component {
if(rootIndex ==-1){
index = i+lazyParentIndex
}
let noexpandable;
if(props.noExpandedRowKeys.indexOf(key) >= 0){
noexpandable = true;
isHiddenExpandIcon = true;
}
rst.push(
<TableRow
indent={indent}
@ -612,7 +606,7 @@ class Table extends Component {
visible={visible}
expandRowByClick={expandRowByClick}
onExpand={this.onExpanded}
expandable={!noexpandable && (childrenColumn || expandedRowRender)}
expandable={childrenColumn || expandedRowRender}
expanded={isRowExpanded}
clsPrefix={`${props.clsPrefix}-row`}
childrenColumnName={childrenColumnName}
@ -1014,7 +1008,7 @@ class Table extends Component {
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
if (e.currentTarget !== e.target) {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {

11
src/Table.scss
View File

@ -97,9 +97,7 @@ $checkbox-height:16px;
word-break: break-all;
}
tr {
th:last-child{ //拖拽tag影响了表格整体宽度
overflow: hidden;
}
&.filterable{
th{
padding-top: 4px;
@ -134,6 +132,13 @@ $checkbox-height:16px;
box-sizing: border-box;
}
}
&-drag-border{
tr {
th.th-can-not-drag{ //拖拽tag影响了表格整体宽度
overflow: hidden;
}
}
}
&-header {
overflow: hidden;
background: $table-head-background-color;

67
src/TableHeader.js
View File

@ -157,6 +157,30 @@ class TableHeader extends Component {
}
}
}
/**
*相关滚动条联动操作
*
* @memberof TableHeader
*/
optTableMargin =(table,scrollbarWidth)=>{
if(table){
table.style.marginBottom = scrollbarWidth + "px"
}
}
optTableScroll = (table,overflow ={})=>{
if(table){
const innerTable = table.querySelector('.u-table-body-inner');
if(innerTable){
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
}
/**
* 调整列宽的move事件
@ -182,31 +206,44 @@ class TableHeader extends Component {
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
const newTableWidth = oldTableWidth + diff ;
this.table.table.style.width = newTableWidth;//改变table的width
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
const fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
const fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
//表头滚动条处理
if(headerScroll){
let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
const newTableWidth = oldTableWidth + diff ;
this.table.table.style.width = newTableWidth;//改变table的width
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
// if(bordered){
// showScroll = showScroll -1;
// }
const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
const 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'});
}
}
}