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

解决NCC提出的拖动列宽时,有固定列出现表格中间断开问题

This commit is contained in:
jonyshi 2019-06-26 16:18:39 +08:00
parent 5604daa355
commit 6427080647
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/TableHeader.js
View File

@ -31,6 +31,7 @@ class TableHeader extends Component {
this.table = null;
this._thead = null;//当前对象
this.event = false;//避免多次绑定问题
this.lastColumWidth = null;//非固定列最后一列的初始化宽度
}
static defaultProps = {
@ -185,7 +186,7 @@ class TableHeader extends Component {
Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable } = this.props;
const { clsPrefix, contentTable,lastShowIndex } = this.props;
let currentElement = this.getOnLineObject(targetEvent);
if(!currentElement)return;
let type = currentElement.getAttribute('data-type');
@ -202,6 +203,14 @@ class TableHeader extends Component {
this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
console.log(" ----- ",this.drag);
if(!this.tableOldWidth){
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
}
if(!this.lastColumWidth){
this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
}
}else if(type != 'online' && this.props.draggable){
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
@ -217,6 +226,15 @@ class TableHeader extends Component {
}
};
getTableWidth = ()=>{
let tableWidth = 0,offWidth = 0;//this.table.cols.length;
for (let index = 0; index < this.table.cols.length; index++) {
let da = this.table.cols[index];
tableWidth += parseInt((da).style.width);
}
return (tableWidth-offWidth);
}
/**
* 判断当前的target 是否是 th，如果不是，直接递归查找。
* @memberof TableHeader
@ -235,7 +253,7 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
@ -252,13 +270,20 @@ class TableHeader extends Component {
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width
if(this.table.innerTableBody){//TODO 后续需要处理此处
this.table.innerTableBody.style.width = newTableWidth ;
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px'; ;
// }
let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
if(newDiff > 0){//缩小
let lastWidth = this.lastColumWidth + newDiff;
this.table.cols[lastShowIndex].style.width = lastWidth +"px";
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
if(headerScroll){
if(showScroll < 0){