fix: rebind events when rowDraggable changes

build/Table.js

@@ -241,6 +241,9 @@ var Table = function (_Component) {
         }
       });
       if (currentIndex > -1) {
+        if (_this.contentTable.dragType == 'top') {
+          targetIndex = targetIndex - 1;
+        }
         data = _this.swapArray(data, currentIndex, targetIndex);
         _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
         _this.setState({
@@ -478,7 +481,19 @@ var Table = function (_Component) {
     // if (prevProps.data.length === 0  || this.props.data.length === 0 ) {
     //   this.resetScrollX();
     // }
-
+    // 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部
+    var prevScrollY = prevProps.scroll.y;
+    var currentScrollY = this.props.scroll.y;
+    if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
+      this.bodyTable.scrollTop = 0;
+    } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && prevScrollY !== currentScrollY) {
+      var distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY);
+      if (distance < 0) {
+        this.bodyTable.scrollTop = 0;
+      } else {
+        this.bodyTable.scrollTop = distance;
+      }
+    }
     // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
     this.isShowScrollY();
   };
@@ -1416,8 +1431,6 @@ var Table = function (_Component) {
   };
 
   Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
-    var _this5 = this;
-
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
     var _props9 = this.props,
         clsPrefix = _props9.clsPrefix,
@@ -1451,13 +1464,13 @@ var Table = function (_Component) {
               rightHeight = void 0,
               currentHeight = void 0,
               maxHeight = void 0;
-          leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
+          leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
-          rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
+          rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
-          currentHeight = parseInt(row.getBoundingClientRect().height);
+          currentHeight = Number(row.getBoundingClientRect().height).toFixed(2);
           maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
           return maxHeight || 'auto';
         } else {
-          return parseInt(row.getBoundingClientRect().height) || 'auto';
+          return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
         }
       }
     });
@@ -1465,17 +1478,16 @@ var Table = function (_Component) {
     // expandedRows为NodeList  Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
     expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
       var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
-      var exHeight = height;
+      var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
-      if (!exHeight) {
+      // fix: ie 展开表格计算渲染bug
-        exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
+      // try {//子表数据减少时，动态计算高度
-        try {
+      //   let td = row.querySelector('td');
-          //子表数据减少时，动态计算高度
+      //   let tdPadding = this.getTdPadding(td);
-          var td = row.querySelector('td');
+      //   let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
-          var tdPadding = _this5.getTdPadding(td);
+      //   exHeight = trueheight+tdPadding;
-          var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
+      // } catch (error) {
-          exHeight = trueheight + tdPadding;
+
-        } catch (error) {}
+      // }
-      }
       fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
     });
     if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
@@ -1499,10 +1511,10 @@ var Table = function (_Component) {
   };
 
   Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
-    var _this6 = this;
+    var _this5 = this;
 
     var rows = this.getExpandedRows().filter(function (i) {
-      return i === _this6.getRowKey(record, index);
+      return i === _this5.getRowKey(record, index);
     });
     return rows[0];
   };
@@ -1646,7 +1658,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.render = function render() {
-    var _this7 = this;
+    var _this6 = this;
 
     var _state3 = this.state,
         currentHoverRecord = _state3.currentHoverRecord,
@@ -1700,7 +1712,7 @@ var Table = function (_Component) {
     return _react2["default"].createElement(
       'div',
       { className: className, style: props.style, ref: function ref(el) {
-          return _this7.contentTable = el;
+          return _this6.contentTable = el;
         },
         tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
       this.getTitle(),
@@ -1732,7 +1744,7 @@ var Table = function (_Component) {
         'div',
         { className: 'u-row-hover',
           onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
-            return _this7.hoverDom = el;
+            return _this6.hoverDom = el;
           } },
         props.hoverContent(currentHoverRecord, currentHoverIndex)
       )

build/TableCell.js

@@ -356,70 +356,74 @@ var TableCell = function (_Component) {
     var colSpan = void 0;
     var rowSpan = void 0,
         title = void 0;
-
-    if (render && !showSum) {
-      text = render(text, record, index, _extends({
-        dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
-      if (this.isInvalidRenderCellText(text)) {
-        tdProps = text.props || {};
-        rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
-        colSpan = tdProps.colSpan;
-        text = text.children;
-      }
-    }
-
     var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
-    // 根据 fieldType 来渲染数据
+    // 如果是固定列在主表格上就渲染null
-    if (!render) {
+    if (column.fixed && !fixed) {
-      switch (column.fieldType) {
+      text = null;
-        case 'link':
+    } else {
-          {
+      if (render && !showSum) {
-            text = this.renderLinkType(text, record, index, column.linkConfig);
+        text = render(text, record, index, _extends({
-            break;
+          dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
-          }
+        if (this.isInvalidRenderCellText(text)) {
-        case 'bool':
+          tdProps = text.props || {};
-          {
+          rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
-            text = this.renderBoolType(text, column.boolConfig);
+          colSpan = tdProps.colSpan;
-            break;
+          text = text.children;
-          }
+        }
-        case 'currency':
+      }
-          {
+
-            var config = {
+      // 根据 fieldType 来渲染数据
-              precision: 2, // 精度值,需要大于0
+      if (!render) {
-              thousand: true, // 是否显示千分符号
+        switch (column.fieldType) {
-              makeUp: true, // 末位是否补零
+          case 'link':
-              preSymbol: '', // 前置符号
+            {
-              nextSymbol: '' // 后置符号
+              text = this.renderLinkType(text, record, index, column.linkConfig);
-            };
+              break;
-            text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
+            }
-            break;
+          case 'bool':
-          }
+            {
-        case 'number':
+              text = this.renderBoolType(text, column.boolConfig);
-          {
+              break;
-            var _config = {
+            }
-              precision: 0, // 精度值,需要大于0
+          case 'currency':
-              thousand: true, // 是否显示千分符号
+            {
-              makeUp: false, // 末位是否补零
+              var config = {
-              preSymbol: '', // 前置符号
+                precision: 2, // 精度值,需要大于0
-              nextSymbol: '' // 后置符号
+                thousand: true, // 是否显示千分符号
-            };
+                makeUp: true, // 末位是否补零
-            text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
+                preSymbol: '', // 前置符号
-            break;
+                nextSymbol: '' // 后置符号
-          }
+              };
-        case 'date':
+              text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
-          {
+              break;
-            text = this.renderDate(text, column.dateConfig);
+            }
-            break;
+          case 'number':
-          }
+            {
-        case 'select':
+              var _config = {
-          {
+                precision: 0, // 精度值,需要大于0
-            text = this.renderSelect(text, column.selectConfig);
+                thousand: true, // 是否显示千分符号
-            break;
+                makeUp: false, // 末位是否补零
-          }
+                preSymbol: '', // 前置符号
-        default:
+                nextSymbol: '' // 后置符号
-          {
+              };
-            break;
+              text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
-          }
+              break;
+            }
+          case 'date':
+            {
+              text = this.renderDate(text, column.dateConfig);
+              break;
+            }
+          case 'select':
+            {
+              text = this.renderSelect(text, column.selectConfig);
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
       }
     }
 

build/TableHeader.js

@@ -142,6 +142,7 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableHeaderCols = contentTable.querySelector('.u-table-scroll .u-table-header') && contentTable.querySelector('.u-table-scroll .u-table-header').getElementsByTagName("col");
       table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
       table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
       table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
@@ -230,13 +231,18 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
-    var _this5 = this;
-
     if (!this.props.dragborder) return;
-    var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
+    this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body);
-    this.doEventList(this.table.tr, function (tr) {
+    this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body);
-      _this5.eventListen(events, '', tr); //表示把事件添加到th元素上
+
-    });
+    // let  events = [
+    //   {key:'mouseup', fun:this.onTrMouseUp},
+    //   {key:'mousemove', fun:this.onTrMouseMove},
+    //   // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
+    // ];
+    // this.doEventList(this.table.tr,(tr)=>{
+    //   this.eventListen(events,'',tr);//表示把事件添加到th元素上
+    // })
     // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
   };
 
@@ -246,12 +252,12 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
-    var _this6 = this;
+    var _this5 = this;
 
     var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
     // this.eventListen(events,'remove',this.table.tr[0]);
     this.doEventList(this.table.tr, function (tr) {
-      _this6.eventListen(events, 'remove', _this6.table.tr);
+      _this5.eventListen(events, 'remove', _this5.table.tr);
     });
   };
 
@@ -431,7 +437,7 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.render = function render() {
-    var _this7 = this;
+    var _this6 = this;
 
     var _props2 = this.props,
         clsPrefix = _props2.clsPrefix,
@@ -449,7 +455,7 @@ var TableHeader = function (_Component) {
     return _react2["default"].createElement(
       "thead",
       _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
-          return _this7._thead = _thead;
+          return _this6._thead = _thead;
         } }),
       rows.map(function (row, index) {
         var _rowLeng = row.length - 1;
@@ -495,7 +501,7 @@ var TableHeader = function (_Component) {
 
             // }
             if (filterable && index == rows.length - 1) {
-              da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
+              da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
               if (da.key === undefined) {
                 keyTemp.key = keyTemp.key + '-filterable';
               }
@@ -516,7 +522,7 @@ var TableHeader = function (_Component) {
                 "th",
                 _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
                   "data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable", onCopy: function onCopy(event) {
-                    _this7.onCopy(da, columIndex, event);
+                    _this6.onCopy(da, columIndex, event);
                   } }),
                 da.children,
 
@@ -524,10 +530,10 @@ var TableHeader = function (_Component) {
                 dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
                   "div",
                   { ref: function ref(el) {
-                      return _this7.gap = el;
+                      return _this6.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" },
+                    "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
                   _react2["default"].createElement("div", { className: "online" })
                 ) : ""
               );
@@ -538,7 +544,22 @@ var TableHeader = function (_Component) {
               da.onClick ? thDefaultObj.onClick = function (e) {
                 da.onClick(da, e);
               } : "";
-              return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this7.onCopy }));
+              return _react2["default"].createElement(
+                "th",
+                _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this6.onCopy }),
+                da.children,
+
+                // && columIndex != _rowLeng
+                dragborder ? _react2["default"].createElement(
+                  "div",
+                  { ref: function ref(el) {
+                      return _this6.gap = el;
+                    }, "data-line-key": da.key,
+                    "data-line-index": columIndex, "data-th-width": da.width,
+                    "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
+                  _react2["default"].createElement("div", { className: "online" })
+                ) : ""
+              );
             }
           })
         );
@@ -554,7 +575,7 @@ TableHeader.defaultProps = {
 };
 
 var _initialiseProps = function _initialiseProps() {
-  var _this8 = this;
+  var _this7 = this;
 
   this.getOnLineObject = function (_element) {
     var type = _element.getAttribute('data-type'),
@@ -571,28 +592,29 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onTrMouseDown = function (e) {
-    var eventNoStop = _this8.props.eventNoStop;
+    var eventNoStop = _this7.props.eventNoStop;
 
     !eventNoStop && _utils.Event.stopPropagation(e);
     var event = _utils.Event.getEvent(e),
         targetEvent = _utils.Event.getTarget(event);
-    var _props3 = _this8.props,
+    var _props3 = _this7.props,
         clsPrefix = _props3.clsPrefix,
         contentTable = _props3.contentTable,
         lastShowIndex = _props3.lastShowIndex,
         columnsChildrenList = _props3.columnsChildrenList;
     // let currentElement = this.getOnLineObject(targetEvent);
 
-    var currentElement = _this8.getTargetToType(targetEvent);
+    var currentElement = _this7.getTargetToType(targetEvent);
     if (!currentElement) return;
     var type = currentElement.getAttribute('data-type');
-    if (!_this8.props.dragborder && !_this8.props.draggable) return;
+    var fixedType = currentElement.getAttribute('data-th-fixed');
-    if (type == 'online' && _this8.props.dragborder) {
+    if (!_this7.props.dragborder && !_this7.props.draggable) return;
+    if (type == 'online' && _this7.props.dragborder) {
       // if(!this.props.dragborder)return;
       targetEvent.setAttribute('draggable', false); //添加交换列效果
       var currentIndex = -1;
       var defaultWidth = currentElement.getAttribute("data-th-width");
-      _this8.drag.option = "border"; //拖拽操作
+      _this7.drag.option = "border"; //拖拽操作
       if (columnsChildrenList) {
         var columnKey = currentElement.getAttribute("data-line-key");
         if (columnKey) {
@@ -605,27 +627,44 @@ var _initialiseProps = function _initialiseProps() {
         console.log('Key must be set for column!');
         return;
       }
-      var currentObj = _this8.table.cols[currentIndex];
+      var currentObj = _this7.table.cols[currentIndex];
-      _this8.drag.currIndex = currentIndex;
+      _this7.drag.currIndex = currentIndex;
-      _this8.drag.oldLeft = event.clientX;
+      _this7.drag.oldLeft = event.clientX;
-      _this8.drag.oldWidth = parseInt(currentObj.style.width);
+      _this7.drag.oldWidth = parseInt(currentObj.style.width);
-      _this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
+      _this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
-      _this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth);
+      _this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
-      if (!_this8.tableOldWidth) {
+      if (!_this7.tableOldWidth) {
-        _this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
+        _this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
       }
-      if (!_this8.lastColumWidth) {
+
-        _this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
+      // if(!this.lastColumWidth){
+      var contentT = _this7.table.tableHeaderCols || _this7.table.cols;
+      _this7.lastColumWidth = parseInt(contentT[lastShowIndex].style.width);
+      // console.log('begin--lastColumnWidth',this.lastColumWidth);
+      // }
+      _this7.drag.contentTableCWidth = _this7.table.contentTableHeader.clientWidth;
+      _this7.drag.contentTableSWidth = _this7.table.contentTableHeader.scrollWidth;
+      if (fixedType) {
+        var contentTablePar = _this7.table.contentTableHeader.parentNode;
+
+        if (contentTablePar) {
+          var originL = parseInt(contentTablePar.style.marginLeft);
+          var originR = parseInt(contentTablePar.style.marginRight);
+          // 内容区表格marginLef
+          _this7.drag.contentTableML = originL;
+          _this7.drag.contentTableMR = originR;
+        }
       }
-    } else if (type != 'online' && _this8.props.draggable) {
+      _this7.drag.fixedType = fixedType;
+    } else if (type != 'online' && _this7.props.draggable) {
       // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
-      if (!_this8.props.draggable) return;
+      if (!_this7.props.draggable) return;
-      var th = _this8.getTargetToType(targetEvent);
+      var th = _this7.getTargetToType(targetEvent);
       th.setAttribute('draggable', true); //添加交换列效果
-      _this8.drag.option = 'dragAble';
+      _this7.drag.option = 'dragAble';
-      _this8.currentDome = th;
+      _this7.currentDome = th;
       var _currentIndex = parseInt(th.getAttribute("data-line-index"));
-      _this8.drag.currIndex = _currentIndex;
+      _this7.drag.currIndex = _currentIndex;
     } else {
       // console.log("onTrMouseDown dragborder or draggable is all false !");
       return;
@@ -635,8 +674,8 @@ var _initialiseProps = function _initialiseProps() {
   this.getTableWidth = function () {
     var tableWidth = 0,
         offWidth = 0; //this.table.cols.length;
-    for (var index = 0; index < _this8.table.cols.length; index++) {
+    for (var index = 0; index < _this7.table.cols.length; index++) {
-      var da = _this8.table.cols[index];
+      var da = _this7.table.cols[index];
       tableWidth += parseInt(da.style.width);
     }
     return tableWidth - offWidth;
@@ -645,7 +684,7 @@ var _initialiseProps = function _initialiseProps() {
   this.getTargetToType = function (targetEvent) {
     var tag = targetEvent;
     if (targetEvent && !targetEvent.getAttribute("data-type")) {
-      tag = _this8.getTargetToType(targetEvent.parentElement);
+      tag = _this7.getTargetToType(targetEvent.parentElement);
     }
     return tag;
   };
@@ -653,15 +692,15 @@ var _initialiseProps = function _initialiseProps() {
   this.getTargetToTh = function (targetEvent) {
     var th = targetEvent;
     if (targetEvent.nodeName.toUpperCase() != "TH") {
-      th = _this8.getThDome(targetEvent);
+      th = _this7.getThDome(targetEvent);
     }
     // console.log(" getTargetToTh: ", th);
     return th;
   };
 
   this.onTrMouseMove = function (e) {
-    if (!_this8.props.dragborder && !_this8.props.draggable) return;
+    if (!_this7.props.dragborder && !_this7.props.draggable) return;
-    var _props4 = _this8.props,
+    var _props4 = _this7.props,
         clsPrefix = _props4.clsPrefix,
         dragborder = _props4.dragborder,
         contentDomWidth = _props4.contentDomWidth,
@@ -677,20 +716,20 @@ var _initialiseProps = function _initialiseProps() {
 
     !eventNoStop && _utils.Event.stopPropagation(e);
     var event = _utils.Event.getEvent(e);
-    if (_this8.props.dragborder && _this8.drag.option == "border") {
+    if (_this7.props.dragborder && _this7.drag.option == "border") {
       //移动改变宽度
-      var currentCols = _this8.table.cols[_this8.drag.currIndex];
+      var currentCols = _this7.table.cols[_this7.drag.currIndex];
-      var diff = event.clientX - _this8.drag.oldLeft;
+      var diff = event.clientX - _this7.drag.oldLeft;
-      var newWidth = _this8.drag.oldWidth + diff;
+      var newWidth = _this7.drag.oldWidth + diff;
-      _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
+      _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
-      if (newWidth > _this8.minWidth) {
+      if (newWidth > _this7.minWidth) {
         currentCols.style.width = newWidth + 'px';
 
         // displayinrow 判断、 固定行高判断 
         if (!bodyDisplayInRow) {
-          _this8.table.bodyRows.forEach(function (row, index) {
+          _this7.table.bodyRows.forEach(function (row, index) {
-            var leftRow = _this8.table.fixedLeftBodyRows[index];
+            var leftRow = _this7.table.fixedLeftBodyRows[index];
-            var rightRow = _this8.table.fixedRightBodyRows[index];
+            var rightRow = _this7.table.fixedRightBodyRows[index];
             if (leftRow || rightRow) {
               var height = row.getBoundingClientRect().height;
               leftRow && (leftRow.style.height = height + "px");
@@ -700,74 +739,113 @@ var _initialiseProps = function _initialiseProps() {
         }
 
         //hao 支持固定表头拖拽 修改表体的width
-        if (_this8.fixedTable.cols) {
+        if (_this7.fixedTable.cols) {
-          _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
+          _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
         }
 
-        var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
+        var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
-        if (newDiff > 0) {
+        // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
-          //缩小
+        if (diff < 0 && contentTableSWidth + diff < 0) {
-          var lastWidth = _this8.lastColumWidth + newDiff;
+          var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
-          _this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
+          var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
-          _this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
+          // console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
+          headerCols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
+          _this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
         }
-        var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
+        // 内容区非固定列场景拖拽
-        //表头滚动条处理
+        if (!_this7.drag.fixedType) {
-        if (headerScroll) {
+
-          if (showScroll < 0) {
+          // let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
-            //小于 0 出现滚动条
+          // if(newDiff > 0){//缩小
-            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+          //   let lastWidth = this.lastColumWidth + newDiff;
-            _this8.table.contentTableHeader.style.overflowX = 'scroll';
+          //   this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
+          //   this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
+
+          // }
+
+          var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth;
+
+          //表头滚动条处理
+          if (headerScroll) {
+            if (showScroll < 0) {
+              //小于 0 出现滚动条
+              //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+              _this7.table.contentTableHeader.style.overflowX = 'scroll';
+              _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
+              _this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
+            } else {
+              //大于 0 不显示滚动条
+              _this7.table.contentTableHeader.style.overflowX = 'hidden';
+              _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
+            }
           } else {
-            //大于 0 不显示滚动条
+            if (showScroll < 0) {
-            _this8.table.contentTableHeader.style.overflowX = 'hidden';
+              _this7.table.tableBody.style.overflowX = 'auto';
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
+              _this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
+              _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
+              _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
+            } else {
+              _this7.table.tableBody.style.overflowX = 'hidden';
+              _this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
+              _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
+              _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
+            }
           }
-        } else {
+        } else if (_this7.drag.fixedType) {
-          if (showScroll < 0) {
+          if (_this7.table.ths[_this7.drag.currIndex]) {
-            _this8.table.tableBody.style.overflowX = 'auto';
+            _this7.table.ths[_this7.drag.currIndex].width = newWidth;
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
+          }
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
+          // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
+          // debugger
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
+
+          var contentTablePar = _this7.table.contentTableHeader.parentNode;
+          // left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
+          // diff<0 往里拖，
+          // const  contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth;
+          // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
+          // if(diff<0 && contentTableSWidth+diff < 0) {
+          //   const headerCols = this.table.tableHeaderCols || this.table.cols;
+          //   const lastWidth =this.lastColumWidth - (contentTableSWidth+diff);
+          //   console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
+          //   headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头
+          //   this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
+          // }
+          if (_this7.drag.fixedType == 'left') {
+            contentTablePar.style.marginLeft = _this7.drag.contentTableML + diff + 'px';
           } else {
-            _this8.table.tableBody.style.overflowX = 'hidden';
+            contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
           }
         }
       } else {
-        _this8.drag.newWidth = _this8.minWidth;
+        _this7.drag.newWidth = _this7.minWidth;
       }
     }
     // 增加拖拽列宽动作的回调函数
-    _this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
+    _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
   };
 
   this.onTrMouseUp = function (e) {
     var event = _utils.Event.getEvent(e);
-    var width = _this8.drag.newWidth;
+    var width = _this7.drag.newWidth;
-    var opt = _this8.drag.option;
+    var opt = _this7.drag.option;
-    _this8.mouseClear();
+    _this7.mouseClear();
     if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
-    _this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
+    _this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
   };
 
   this.clearThsDr = function () {
-    var ths = _this8.table.ths;
+    var ths = _this7.table.ths;
     for (var index = 0; index < ths.length; index++) {
       ths[index].setAttribute('draggable', false); //去掉交换列效果
     }
   };
 
   this.bodyonLineMouseUp = function (events, type) {
-    if (!_this8.drag || !_this8.drag.option) return;
+    if (!_this7.drag || !_this7.drag.option) return;
-    _this8.mouseClear();
+    _this7.mouseClear();
   };
 
   this.optTableMargin = function (table, scrollbarWidth) {
@@ -790,31 +868,31 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onDragStart = function (e) {
-    if (!_this8.props.draggable) return;
+    if (!_this7.props.draggable) return;
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
+    if (_this7.drag && _this7.drag.option != 'dragAble') {
       return;
     }
     var event = _utils.Event.getEvent(e),
 
     // target = Event.getTarget(event);
-    target = _this8.getTargetToTh(_utils.Event.getTarget(event));
+    target = _this7.getTargetToTh(_utils.Event.getTarget(event));
     var currentIndex = parseInt(target.getAttribute("data-line-index"));
     var currentKey = target.getAttribute('data-line-key');
 
     if (event.dataTransfer.setDragImage) {
       var crt = target.cloneNode(true);
       crt.style.backgroundColor = "#ebecf0";
-      crt.style.width = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
+      crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
       crt.style.height = "40px";
       // crt.style['line-height'] = "40px";
       // document.body.appendChild(crt);
-      document.getElementById(_this8._table_none_cont_id).appendChild(crt);
+      document.getElementById(_this7._table_none_cont_id).appendChild(crt);
       event.dataTransfer.setDragImage(crt, 0, 0);
     }
 
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("Text", currentKey);
-    _this8.currentObj = _this8.props.rows[0][currentIndex];
+    _this7.currentObj = _this7.props.rows[0][currentIndex];
   };
 
   this.onDragOver = function (e) {
@@ -823,34 +901,34 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onDrop = function (e) {
-    if (!_this8.props.draggable) return;
+    if (!_this7.props.draggable) return;
-    var props = _this8.getCurrentEventData(_this8._dragCurrent);
+    var props = _this7.getCurrentEventData(_this7._dragCurrent);
     e.column = { props: props };
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
+    if (_this7.drag && _this7.drag.option != 'dragAble') {
-      _this8.props.onDrop(e);
+      _this7.props.onDrop(e);
       return;
     }
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
     event.preventDefault();
     event.stopPropagation();
-    _this8.currentDome.setAttribute('draggable', false); //添加交换列效果
+    _this7.currentDome.setAttribute('draggable', false); //添加交换列效果
     // let data = this.getCurrentEventData(this._dragCurrent);
     // if(!data){
     //   this.props.onDrop(e);
     //   return;
     // }
-    if (!_this8.props.onDrop) return;
+    if (!_this7.props.onDrop) return;
     // this.props.onDrop(event,target);
-    _this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
+    _this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
   };
 
   this.onDragEnter = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
-    _this8._dragCurrent = target;
+    _this7._dragCurrent = target;
     var currentIndex = target.getAttribute("data-line-index");
-    if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
+    if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
     if (target.nodeName.toUpperCase() === "TH") {
       // target.style.border = "2px dashed rgba(5,0,0,0.25)";
       target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
@@ -861,24 +939,24 @@ var _initialiseProps = function _initialiseProps() {
   this.onDragEnd = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
-    _this8._dragCurrent.setAttribute("style", "");
+    _this7._dragCurrent.setAttribute("style", "");
     event.preventDefault();
     event.stopPropagation();
     // this._dragCurrent.style = "";
-    document.getElementById(_this8._table_none_cont_id).innerHTML = "";
+    document.getElementById(_this7._table_none_cont_id).innerHTML = "";
 
-    var data = _this8.getCurrentEventData(_this8._dragCurrent);
+    var data = _this7.getCurrentEventData(_this7._dragCurrent);
     if (!data) return;
-    if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
+    if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
-    if (!_this8.props.onDragEnd) return;
+    if (!_this7.props.onDragEnd) return;
-    _this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
+    _this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data });
   };
 
   this.onDragLeave = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
     var currentIndex = target.getAttribute("data-line-index");
-    if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
+    if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
     if (target.nodeName.toUpperCase() === "TH") {
       target.setAttribute("style", "");
       // this._dragCurrent.style = "";
@@ -886,7 +964,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.handlerFilterChange = function (key, value, condition) {
-    var onFilterChange = _this8.props.onFilterChange;
+    var onFilterChange = _this7.props.onFilterChange;
 
     if (onFilterChange) {
       onFilterChange(key, value, condition);
@@ -894,7 +972,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.handlerFilterClear = function (field) {
-    var onFilterClear = _this8.props.onFilterClear;
+    var onFilterClear = _this7.props.onFilterClear;
 
     if (onFilterClear) {
       onFilterClear(field);
@@ -902,7 +980,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.filterRenderType = function (type, dataIndex, index) {
-    var _props5 = _this8.props,
+    var _props5 = _this7.props,
         clsPrefix = _props5.clsPrefix,
         rows = _props5.rows,
         filterDelay = _props5.filterDelay,
@@ -917,8 +995,8 @@ var _initialiseProps = function _initialiseProps() {
           , clsPrefix: clsPrefix //css前缀
           , className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
           , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -931,8 +1009,8 @@ var _initialiseProps = function _initialiseProps() {
           clsPrefix: clsPrefix,
           className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -966,8 +1044,8 @@ var _initialiseProps = function _initialiseProps() {
           data: selectDataSource,
           notFoundContent: "Loading" //没有数据显示的默认字
           , dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           onFocus: rows[1][index]["filterdropdownfocus"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
@@ -982,8 +1060,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -997,8 +1075,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1012,8 +1090,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1027,8 +1105,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-Wo",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1042,8 +1120,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1055,8 +1133,8 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onCopy = function (data, index, event) {
-    if (_this8.props.onCopy) {
+    if (_this7.props.onCopy) {
-      _this8.props.onCopy(_extends(data, { col: index }), event);
+      _this7.props.onCopy(_extends(data, { col: index }), event);
     }
   };
 };

build/TableRow.js

@@ -122,6 +122,9 @@ var TableRow = function (_Component) {
         target = target.parentNode;
       }
       _this.currentIndex = target.getAttribute("data-row-key");
+
+      // 拖拽其实index
+      _this.props.contentTable.startI = target.getAttribute("data-row-index");
       _this._dragCurrent = target;
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", _this.currentIndex);
@@ -134,7 +137,9 @@ var TableRow = function (_Component) {
     };
 
     _this.onDrop = function (e) {
-      var onDragRow = _this.props.onDragRow;
+      var _this$props = _this.props,
+          onDragRow = _this$props.onDragRow,
+          contentTable = _this$props.contentTable;
 
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
@@ -224,9 +229,9 @@ var TableRow = function (_Component) {
     };
 
     _this.synchronizeTableTrShadow = function () {
-      var _this$props = _this.props,
+      var _this$props2 = _this.props,
-          contentTable = _this$props.contentTable,
+          contentTable = _this$props2.contentTable,
-          index = _this$props.index;
+          index = _this$props2.index;
 
 
       var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
@@ -277,21 +282,29 @@ var TableRow = function (_Component) {
           currentObj = element;
         }
       }
-      if (type) {
+      if (type == 'down') {
         currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
+      } else if (type) {
+        currentObj && currentObj.setAttribute("style", "border-top:2px solid #02B1FD");
       } else {
         currentObj && currentObj.setAttribute("style", "");
       }
     };
 
     _this.onDragEnter = function (e) {
+      var contentTable = _this.props.contentTable;
+
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
           target = _target.parentNode;
       var currentIndex = target.getAttribute("data-row-key");
+      var dragEnterIndex = target.getAttribute("data-row-index");
       if (!currentIndex || currentIndex === _this.currentIndex) return;
+      var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top';
+
+      contentTable.dragType = dragType;
       if (target.nodeName.toUpperCase() === "TR") {
-        _this.synchronizeTableTr(currentIndex, true);
+        _this.synchronizeTableTr(currentIndex, dragType);
       }
     };
 
@@ -347,6 +360,15 @@ var TableRow = function (_Component) {
     return _this;
   }
 
+  TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var rowDraggAble = this.props.rowDraggAble;
+
+    if (rowDraggAble !== nextProps.rowDraggAble) {
+      this.event = false;
+      this.initEvent();
+    }
+  };
+
   TableRow.prototype.componentDidMount = function componentDidMount() {
     var _this2 = this;
 
@@ -678,7 +700,8 @@ var TableRow = function (_Component) {
         onMouseLeave: this.onMouseLeave,
         className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
         style: style,
-        'data-row-key': record && record.key ? record.key : hoverKey
+        'data-row-key': record && record.key ? record.key : hoverKey,
+        'data-row-index': this.props.index
         // key={hoverKey}
         , ref: this.bindElement
       },

build/lib/sort.js

@@ -228,8 +228,13 @@ function sort(Table, Icon) {
 
     this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
       var currentCol = orderCols[currentIndex];
+      var getMultiSorterValueFunc = currentCol.getMultiSorterValue;
       var preKey = pre[currentCol.key];
       var afterKey = after[currentCol.key];
+      if (getMultiSorterValueFunc) {
+        preKey = getMultiSorterValueFunc(pre, currentCol);
+        afterKey = getMultiSorterValueFunc(after, currentCol);
+      }
       var colSortFun = currentCol.sorter;
       if (typeof colSortFun !== 'function') {
         colSortFun = function colSortFun() {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.3.14",
+ "version": "2.3.14-beta.2",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/TableRow.js

@@ -67,6 +67,13 @@ class TableRow extends Component{
      this.canBeTouch = true  //受否允许拖动该行
  }
 
+  componentWillReceiveProps (nextProps) {
+    const { rowDraggAble } = this.props;
+    if(rowDraggAble !== nextProps.rowDraggAble) {
+      this.event = false
+      this.initEvent();
+    }
+  }
 
   componentDidMount() {
     const { store, hoverKey,treeType,rowDraggAble } = this.props;