复杂表头拖拽

src/Table.js

@@ -124,6 +124,10 @@ class Table extends Component {
     } else {
       expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
     }
+
+    this.columnsChildrenList = [];//复杂表头、所有叶子节点
+    this.getColumnsChildrenList(props.columns);//复杂表头、所有叶子节点
+
     this.state = {
       expandedRowKeys,
       data: props.data,
@@ -164,7 +168,7 @@ class Table extends Component {
     this.tableUid = null;
     this.contentTable = null;
     this.leftColumnsLength  //左侧固定列的长度
-    this.centerColumnsLength  //非固定列的长度
+    this.centerColumnsLength  //非固定列的长度 
   }
   componentWillMount() {
     this.centerColumnsLength = this.columnManager.centerColumns().length
@@ -418,6 +422,13 @@ class Table extends Component {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   }
 
+  //todo 后续改进
+  getColumnsChildrenList = (columns)=>{ 
+    columns.forEach(da=>{
+      da.children?this.getColumnsChildrenList(da.children):this.columnsChildrenList.push(da);
+    })
+  }
+
   getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
@@ -430,11 +441,10 @@ class Table extends Component {
         rowSpan: rows.length,
       });
     }
-
     const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
     let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
     let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
-    let contentWidthDiff = 0;
+    let contentWidthDiff = 0; 
     //非固定表格,宽度不够时自动扩充
     if (!fixed) {
       contentWidthDiff = this.state.contentWidthDiff
@@ -443,6 +453,7 @@ class Table extends Component {
       <TableHeader
         {...drop}
         {...dragBorder}
+        columnsChildrenList={this.columnsChildrenList}
         locale={this.props.locale}
         minColumnWidth={minColumnWidth}
         contentWidthDiff={contentWidthDiff}

src/Table.scss

@@ -87,7 +87,7 @@ $icon-color:#505F79;
       border-bottom: 1px solid $table-th-bottom-border;
     }
     tr>th:last-child{
-      border-right: none; 
+      // border-right: none; 
     }
   }
   tr {
@@ -590,10 +590,13 @@ $icon-color:#505F79;
 
         .online{
           height: 100%;
-          width: 1px;
+          width: 4px;
-          background:transparent;//兼容火狐浏览器，如果table设置border，
+          // background:transparent;//兼容火狐浏览器，如果table设置border，
           margin: 0 auto;
         }
+        .online:hover{
+          background:#000000;
+        }
         .online-hover{
           background:#000000;
         }

src/TableHeader.js

@@ -60,7 +60,10 @@ class TableHeader extends Component {
     if(this.props.dragborder){
       this.removeDragBorderEvent();
     }
-    this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
+    this.doEventList(this.table.tr,(tr)=>{
+      this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',tr);  
+    })
+    // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
     this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'remove',document.body);
   }
 
@@ -124,12 +127,22 @@ class TableHeader extends Component {
         this.dragAbleEventInit();//交换列
       }
       if(this.table && this.table.tr){
-        this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
+        // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
+        this.doEventList(this.table.tr,(tr)=>{
+          this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',tr);//body mouseup
+        })
       }
       this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
     }
   }
 
+
+  doEventList(trs,action){
+    for (let index = 0; index < trs.length; index++) {
+      action(trs[index]);
+    }
+  }
+
   /**
    * 拖拽列宽事件的监听
    */
@@ -140,7 +153,10 @@ class TableHeader extends Component {
       {key:'mousemove', fun:this.onTrMouseMove},
       // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
     ];
-    this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
+    this.doEventList(this.table.tr,(tr)=>{
+      this.eventListen(events,'',tr);//表示把事件添加到th元素上
+    })
+    // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
   }
 
   /**
@@ -151,7 +167,10 @@ class TableHeader extends Component {
       {key:'mouseup', fun:this.onTrMouseUp},
       {key:'mousemove', fun:this.onTrMouseMove},
     ];
-    this.eventListen(events,'remove',this.table.tr[0]);
+    // this.eventListen(events,'remove',this.table.tr[0]);
+    this.doEventList(this.table.tr,(tr)=>{
+      this.eventListen(events,'remove',this.table.tr);
+    })
   }
 
   eventListen(events,type,eventSource){
@@ -197,7 +216,7 @@ class TableHeader extends Component {
     Event.stopPropagation(e);
     let event = Event.getEvent(e) ,
     targetEvent = Event.getTarget(event);
-    const { clsPrefix, contentTable,lastShowIndex } = this.props;
+    const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props;
     // let currentElement = this.getOnLineObject(targetEvent);
     let currentElement = this.getTargetToType(targetEvent);
     if(!currentElement)return;
@@ -207,18 +226,23 @@ class TableHeader extends Component {
       if(!this.props.dragborder)return;
       targetEvent.setAttribute('draggable',false);//添加交换列效果
       let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
-      let defaultWidth = currentElement.getAttribute("data-th-width");
+      let defaultWidth = currentElement.getAttribute("data-th-width"); 
-      let currentObj = this.table.cols[currentIndex];
       this.drag.option = "border";//拖拽操作
+      if(columnsChildrenList){
+        let columnKey = currentElement.getAttribute("data-line-key");
+        if(columnKey){
+          currentIndex = columnsChildrenList.findIndex(da=>da.key.toLowerCase() === columnKey.toLowerCase());
+        }
+      }
+      console.log("currentIndex :",currentIndex);
+      let currentObj = this.table.cols[currentIndex];
       this.drag.currIndex = currentIndex;
       this.drag.oldLeft = event.x;
       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);
@@ -727,10 +751,10 @@ class TableHeader extends Component {
 
   render() {
     const { clsPrefix, rowStyle,draggable,
-        dragborder, rows,filterable,fixed,lastShowIndex,
+        dragborder, rows,filterable,fixed,lastShowIndex,columnsChildrenList
     } = this.props;
-
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
+    let lastObj = columnsChildrenList[columnsChildrenList.length-1];
     return (
       <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
         {rows.map((row, index) => {
@@ -794,7 +818,8 @@ class TableHeader extends Component {
                       {da.required ? <span className='required'>*</span>:''}
                       {da.children}
                       {
-                        dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}
+                        // && columIndex != _rowLeng
+                        dragborder && da.key != lastObj.key ? <div ref={el => (this.gap = el)} data-line-key={da.key}
                         data-line-index={columIndex} data-th-width={da.width}
                         data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
                         <div className='online' /></div>:""