固定表头增加拖拽

demo/demolist/Demo6.js

@@ -8,7 +8,8 @@
 
 import React, { Component } from 'react';
 import Table from '../../src';
-
+import dragColumn from "../../src/lib/dragColumn";;
+const DragColumnTable = dragColumn(Table);
 
 const columns6 = [
   {
@@ -73,7 +74,7 @@ const data6 = [
 
 class Demo6 extends Component {
   render() {
-    return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;
+    return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true}  />;
   }
 }
 

src/Table.js

@@ -609,7 +609,8 @@ class Table extends Component{
       let _drag_class = this.props.dragborder?"table-drag-bordered":""
       return (
         <table className={` ${tableClassName}  table-bordered ${_drag_class} `} style={tableStyle}  >
-          {this.props.dragborder?null:this.getColGroup(columns, fixed)}
+          {/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
+          {this.getColGroup(columns, fixed)}
           {hasHead ? this.getHeader(columns, fixed) : null}
           {tableBody}
         </table>
@@ -772,7 +773,7 @@ class Table extends Component{
       if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
           return;
       }
-    if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) {
+    if ( e.target.scrollLeft !== this.lastScrollLeft) {
       if (e.target === bodyTable && headTable) {
         headTable.scrollLeft = e.target.scrollLeft;
       } else if (e.target === headTable && bodyTable) {

src/TableHeader.js

@@ -101,8 +101,12 @@ class TableHeader extends Component{
     this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
     this.drag.width = this.drag.data[this.drag.currIndex].width;
     let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
-    
-    this.contentTableWidth = contentTableDom.style.width?parseInt(contentTableDom.style.width):parseInt(contentTableDom.scrollWidth);
+    const styleWidth = contentTableDom.style.width;
+    if(styleWidth  && (typeof (styleWidth)=='number'|| styleWidth.includes('px') )){
+       this.contentTableWidth = parseInt(styleWidth);
+    }else{
+       this.contentTableWidth = parseInt(contentTableDom.scrollWidth)
+    }
   }
   onMouseUp=(event,data)=>{
     this.border = false;
@@ -111,20 +115,41 @@ class TableHeader extends Component{
   }
   onThMouseUp=(event,data)=>{
     this.border = false;
+    const {clsPrefix} = this.props; 
+    let eventDom = event.target;
+    let optDom ;
+    if(eventDom.classList.contains('.th-drag-gap-hover')){
+
+      optDom = eventDom;
+      
+    }else{
+      optDom = eventDom.querySelector(`.${clsPrefix}-thead-th-drag-gap`);
+    }
+    if(optDom){
+      optDom.classList.remove('th-drag-gap-hover');
+      optDom.classList.add('th-drag-gap');
+    }
+    
+    
   }
    
   onThMouseMove=(event,data)=>{ 
     if(!this.border)return;
+    //固定表头拖拽
+
     const {dragborderKey,contentTable} = this.props;
     let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
     let contentTableDom = document.getElementById("u-table-drag-thead-"+this.theadKey).parentNode;
     
     if(!this.contentTableWidth){
-      this.contentTableWidth = contentTableDom.style.width?parseInt(contentTableDom.style.width):parseInt(contentTableDom.scrollWidth);
+      const styleWidth = contentTableDom.style.width;
+      if(styleWidth  && (typeof (styleWidth)=='number'|| styleWidth.includes('px') )){
+        this.contentTableWidth = parseInt(styleWidth);
+      }else{
+        this.contentTableWidth = parseInt(contentTableDom.scrollWidth)
+      }
     }
-    // console.log(this.contentTableWidth,x);
     const newTableWidth = this.contentTableWidth + x;
-    // console.log(newTableWidth);
     const newWidth = this.drag.width + x;
     if(newWidth<this.props.minColumnWidth){
       //清楚样式
@@ -158,10 +183,21 @@ class TableHeader extends Component{
     let  currentDom = document.getElementById("u-table-drag-thead-"+this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
     currentDom.style.width = newWidth+"px"; 
     // this.contentTableWidth = newTableWidth;
-   
     contentTableDom.style.width = newTableWidth+'px';
-    
     this.drag.x = x; 
+    //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
+    const siblingDom = contentTableDom.parentNode.nextElementSibling;
+    if(siblingDom){
+      const bodyTableDom = siblingDom.querySelector('table')
+      //2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
+      bodyTableDom.style.width = newTableWidth+'px';
+      //3、对应的col也要跟这变
+      let colDomArr = bodyTableDom.querySelectorAll('colgroup col')
+      colDomArr[this.drag.currIndex].style.width = newWidth+"px" ;
+      //4、设置overflow属性
+
+    }
+
 
   }