forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TableHeader拖拽时 横向滚动条动态显示

This commit is contained in:
wanghaoo 2018-12-02 16:15:01 +08:00
parent feb04ab634
commit 1c5c94238b
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/TableHeader.js
View File

@ -153,7 +153,7 @@ class TableHeader extends Component {
//---拖拽列宽代码逻辑----start----- //---拖拽列宽代码逻辑----start-----
onLineMouseMove = (e) => { onLineMouseMove = (e) => {
const { clsPrefix ,dragborder} = this.props; const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e); Event.stopPropagation(e);
let event = Event.getEvent(e); let event = Event.getEvent(e);
if (!this.props.dragborder) return; if (!this.props.dragborder) return;
@ -166,11 +166,39 @@ class TableHeader extends Component {
let newWidth = this.drag.oldWidth + diff; let newWidth = this.drag.oldWidth + diff;
if(newWidth > this.drag.minWidth){ if(newWidth > this.drag.minWidth){
currentCols.style.width = newWidth +'px'; currentCols.style.width = newWidth +'px';
//hao 修改表体的width //hao 支持固定表头拖拽 修改表体的width
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px"; if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
//表头滚动条处理
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");
}else{
contentTableHeader.style.overflowX = 'hidden';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
}
}
} }
//hao todo
this.table.table.style.width = (parseInt(this.table.table.style.width) + diff);//改变table的width
}; };
onLineMouseDown = (e) => { onLineMouseDown = (e) => {