Merge remote-tracking branch 'origin/master'

# Conflicts:
#	dist/demo.js
#	dist/demo.js.map

CHANGELOG.md

@@ -1,10 +1,10 @@
+<a name="2.1.14"></a>
+## [2.1.14](https://github.com/tinper-bee/bee-table/compare/v2.1.13...v2.1.14) (2019-08-17)
+
+
+
 <a name="2.1.13"></a>
-## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.12...v2.1.13) (2019-08-07)
+## [2.1.13](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.13) (2019-08-07)
-
-
-
-<a name="2.1.12"></a>
-## [2.1.12](https://github.com/tinper-bee/bee-table/compare/v2.1.11...v2.1.12) (2019-08-07)
 
 
 
@@ -75,7 +75,7 @@
 
 
 <a name="2.1.0"></a>
-# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.1.0) (2019-06-01)
+# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
 
 
 ### Bug Fixes
@@ -84,6 +84,11 @@
 
 
 
+<a name="2.0.25"></a>
+## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
+
+
+
 <a name="2.0.24"></a>
 ## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
 

README.md

@@ -241,6 +241,9 @@ import multiSelect from "bee-table/lib/multiSelect.js";
 | draggable | 可拖拽交换列 | boolean | false |
 | dragborder | 可拖拽改变列宽 | boolean | false |
 | checkMinSize | 当前表格显示最少列数 | boolean | false |
+| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
+| onDrop | 交换列的回调函数 | function | (event,data,columns) |
+
 
  
 

build/Table.css

@@ -304,7 +304,7 @@
   .u-table-fixed-left .u-table-body-inner {
     margin-right: -20px;
     padding-right: 20px; }
-  .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
+  .u-table-fixed-header:not(.u-table-hide-header) .u-table-fixed-left .u-table-body-inner {
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
     height: 100%;
@@ -438,8 +438,8 @@
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

build/Table.js

@@ -469,7 +469,7 @@ var Table = function (_Component) {
       this.domWidthDiff = this.contentDomWidth - this.contentWidth;
     }
 
-    if (this.computeWidth <= this.contentWidth) {
+    if (this.computeWidth < this.contentWidth) {
       var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
       //bordered的表格需要减去边框的差值1
       if (this.props.bordered) {
@@ -560,7 +560,7 @@ var Table = function (_Component) {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   };
 
-  Table.prototype.getHeader = function getHeader(columns, fixed) {
+  Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     var _props = this.props,
         filterDelay = _props.filterDelay,
         onFilterChange = _props.onFilterChange,
@@ -573,6 +573,7 @@ var Table = function (_Component) {
         onDragEnter = _props.onDragEnter,
         onDragOver = _props.onDragOver,
         onDrop = _props.onDrop,
+        onDragEnd = _props.onDragEnd,
         draggable = _props.draggable,
         onMouseDown = _props.onMouseDown,
         onMouseMove = _props.onMouseMove,
@@ -599,7 +600,7 @@ var Table = function (_Component) {
     }
 
     var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
-    var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
+    var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
     var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
     var contentWidthDiff = 0;
     //非固定表格,宽度不够时自动扩充
@@ -625,7 +626,9 @@ var Table = function (_Component) {
       contentDomWidth: this.contentDomWidth,
       scrollbarWidth: this.scrollbarWidth,
       headerScroll: headerScroll,
-      bordered: bordered
+      bordered: bordered,
+      leftFixedWidth: leftFixedWidth,
+      rightFixedWidth: rightFixedWidth
     })) : null;
   };
 
@@ -1050,6 +1053,8 @@ var Table = function (_Component) {
     var bodyStyle = _extends({}, this.props.bodyStyle);
     var headStyle = {};
     var innerBodyStyle = {};
+    var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
 
     var tableClassName = '';
     //表格元素的宽度大于容器的宽度也显示滚动条
@@ -1150,7 +1155,7 @@ var Table = function (_Component) {
         'table',
         { className: ' ' + tableClassName + '  table-bordered ' + _drag_class + ' ', style: tableStyle },
         _this4.getColGroup(columns, fixed),
-        hasHead ? _this4.getHeader(columns, fixed) : null,
+        hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
         tableBody
       );
     };
@@ -1219,8 +1224,8 @@ var Table = function (_Component) {
         )
       );
     }
-    var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    // const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
-    var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    // const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
     var expandIconWidth = expandIconAsCell ? 33 : 0;
     var parStyle = {};
     if (!fixed) {
@@ -1501,6 +1506,9 @@ var Table = function (_Component) {
     if (props.useFixedHeader || props.scroll && props.scroll.y) {
       className += ' ' + clsPrefix + '-fixed-header';
     }
+    if (!props.showHeader) {
+      className += ' ' + clsPrefix + '-hide-header';
+    }
     if (props.bordered) {
       className += ' ' + clsPrefix + '-bordered';
     }

build/TableHeader.js

@@ -157,7 +157,9 @@ var TableHeader = function (_Component) {
           contentTable = _this$props2.contentTable,
           headerScroll = _this$props2.headerScroll,
           lastShowIndex = _this$props2.lastShowIndex,
-          onDraggingBorder = _this$props2.onDraggingBorder;
+          onDraggingBorder = _this$props2.onDraggingBorder,
+          leftFixedWidth = _this$props2.leftFixedWidth,
+          rightFixedWidth = _this$props2.rightFixedWidth;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
@@ -189,11 +191,11 @@ var TableHeader = function (_Component) {
             _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
             _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
           }
-
+          var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth;
-          var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
           //表头滚动条处理
           if (headerScroll) {
             if (showScroll < 0) {
+              //小于 0 出现滚动条
               //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
               _this.table.contentTableHeader.style.overflowX = 'scroll';
               _this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
@@ -202,17 +204,20 @@ var TableHeader = function (_Component) {
               // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
               //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
             } else {
+              //大于 0 不显示滚动条
               _this.table.contentTableHeader.style.overflowX = 'hidden';
               _this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
               _this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
             }
           } else {
             if (showScroll < 0) {
+              _this.table.tableBody.style.overflowX = 'auto';
               _this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
               _this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
               _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
               _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
             } else {
+              _this.table.tableBody.style.overflowX = 'hidden';
               _this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
               _this.optTableMargin(_this.table.fixedRightBodyTable, 0);
               _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
@@ -263,7 +268,7 @@ var TableHeader = function (_Component) {
         var innerTable = table.querySelector('.u-table-body-inner');
         if (innerTable) {
           //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-          // overflow.x && (innerTable.style.overflowX = overflow.x);
+          overflow.x && (innerTable.style.overflowX = overflow.x);
           overflow.y && (innerTable.style.overflowY = overflow.y);
         }
       }
@@ -310,6 +315,12 @@ var TableHeader = function (_Component) {
       var event = _utils.Event.getEvent(e),
           target = _utils.Event.getTarget(event);
       _this.currentDome.setAttribute('draggable', false); //添加交换列效果
+
+      var data = _this.getCurrentEventData(_this._dragCurrent);
+      if (!data) return;
+      if (!_this.props.onDrop) return;
+      // this.props.onDrop(event,target);
+      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
     };
 
     _this.onDragEnter = function (e) {
@@ -335,8 +346,8 @@ var TableHeader = function (_Component) {
       var data = _this.getCurrentEventData(_this._dragCurrent);
       if (!data) return;
       if (!_this.currentObj || _this.currentObj.key == data.key) return;
-      if (!_this.props.onDrop) return;
+      if (!_this.props.onDragEnd) return;
-      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
+      _this.props.onDragEnd(event, { dragSource: _this.currentObj, dragTarg: data });
     };
 
     _this.onDragLeave = function (e) {
@@ -531,6 +542,7 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      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");
     }
 

build/TableRow.js

@@ -646,7 +646,7 @@ var TableRow = function (_Component) {
         // key={hoverKey}
         , ref: this.bindElement
       },
-      cells.length > 0 ? cells : _react2["default"].createElement('td', null)
+      cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
     );
   };
 

build/lib/bigData.js

@@ -83,7 +83,8 @@ function bigData(Table) {
         _this.startIndex = _this.currentIndex; //数据开始位置
         _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
       }
-      if (nextProps.data !== props.data) {
+      if (nextProps.data.toString() !== props.data.toString()) {
+        //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
         _this.cachedRowHeight = []; //缓存每行的高度
         _this.cachedRowParentIndex = [];
         _this.computeCachedRowParentIndex(nextProps.data);

build/lib/dragColumn.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -35,126 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function dragColumn(Table) {
 
-    return function (_Component) {
+  return function (_Component) {
-        _inherits(DragColumn, _Component);
+    _inherits(DragColumn, _Component);
 
-        function DragColumn(props) {
+    function DragColumn(props) {
-            _classCallCheck(this, DragColumn);
+      _classCallCheck(this, DragColumn);
 
-            var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-            _this.setColumOrderByIndex = function (_column) {
+      _this.setColumOrderByIndex = function (_column) {
-                _column.forEach(function (da, i) {
+        _column.forEach(function (da, i) {
-                    da.dragIndex = i;
+          da.dragIndex = i;
-                    da.drgHover = false;
+          da.drgHover = false;
-                });
-                return _column;
-            };
-
-            _this.onDrop = function (event, data) {
-                var dragSource = data.dragSource,
-                    dragTarg = data.dragTarg;
-                var columns = _this.state.columns;
-
-                var sourceIndex = -1,
-                    targetIndex = -1;
-
-                sourceIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragSource.key;
-                });
-                targetIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragTarg.key;
-                });
-                // 向前移动
-                if (targetIndex < sourceIndex) {
-                    targetIndex = targetIndex + 1;
-                }
-                columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
-                var _newColumns = [];
-                columns.forEach(function (da, i) {
-                    var newDate = _extends(da, {});
-                    newDate.title = da.title;
-                    _newColumns.push(newDate);
-                });
-                // console.log(" onDrop-------columns--- ",columns);
-                _this.setState({
-                    columns: _newColumns //cloneDeep(columns)
-                });
-                // console.log(" onDrop-------columns--- ",_newColumns);
-                // console.log(columns === _newColumns);
-                if (_this.props.onDrop) {
-                    _this.props.onDrop(event, data, columns);
-                }
-            };
-
-            _this.getTarget = function (evt) {
-                return evt.target || evt.srcElement;
-            };
-
-            _this.state = {
-                columns: _this.setColumOrderByIndex(props.columns)
-            };
-            return _this;
-        }
-
-        DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-            if (nextProps.columns != this.props.columns) {
-                this.setState({
-                    columns: this.setColumOrderByIndex(nextProps.columns)
-                });
-            }
-        };
-
-        DragColumn.prototype.recursion = function (_recursion) {
-            function recursion(_x) {
-                return _recursion.apply(this, arguments);
-            }
-
-            recursion.toString = function () {
-                return _recursion.toString();
-            };
-
-            return recursion;
-        }(function (obj) {
-            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-            for (key in obj) {
-                if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
-                    data[key] = recursion(obj[key]);
-                } else {
-                    data[key] = obj[key];
-                }
-            }
-            return data;
         });
+        return _column;
+      };
 
-        DragColumn.prototype.render = function render() {
+      _this.onDragEnd = function (event, data) {
-            var _props = this.props,
+        var dragSource = data.dragSource,
-                data = _props.data,
+            dragTarg = data.dragTarg;
-                dragborder = _props.dragborder,
+        var columns = _this.state.columns;
-                draggable = _props.draggable,
-                className = _props.className,
-                columns = _props.columns,
-                onDragStart = _props.onDragStart,
-                onDragEnter = _props.onDragEnter,
-                onDragOver = _props.onDragOver,
-                onDrop = _props.onDrop,
-                others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
 
-            return _react2["default"].createElement(Table, _extends({}, others, {
+        var sourceIndex = -1,
-                columns: this.state.columns,
+            targetIndex = -1;
-                data: data,
-                className: className + ' u-table-drag-border',
-                onDragStart: this.onDragStart,
-                onDragOver: this.onDragOver,
-                onDrop: this.onDrop,
-                onDragEnter: this.onDragEnter,
-                draggable: draggable,
-                dragborder: dragborder
-            }));
-        };
 
-        return DragColumn;
+        sourceIndex = columns.findIndex(function (da, i) {
-    }(_react.Component);
+          return da.key == dragSource.key;
+        });
+        targetIndex = columns.findIndex(function (da, i) {
+          return da.key == dragTarg.key;
+        });
+        // 向前移动
+        if (targetIndex < sourceIndex) {
+          targetIndex = targetIndex + 1;
+        }
+        columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+        var _newColumns = [];
+        columns.forEach(function (da, i) {
+          var newDate = _extends(da, {});
+          newDate.title = da.title;
+          _newColumns.push(newDate);
+        });
+        _this.setState({
+          columns: _newColumns //cloneDeep(columns)
+        });
+        if (_this.props.onDragEnd) {
+          _this.props.onDragEnd(event, data, columns);
+        }
+      };
+
+      _this.getTarget = function (evt) {
+        return evt.target || evt.srcElement;
+      };
+
+      _this.state = {
+        columns: _this.setColumOrderByIndex(props.columns)
+      };
+      return _this;
+    }
+
+    DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (nextProps.columns != this.props.columns) {
+        this.setState({
+          columns: this.setColumOrderByIndex(nextProps.columns)
+        });
+      }
+    };
+
+    DragColumn.prototype.recursion = function (_recursion) {
+      function recursion(_x) {
+        return _recursion.apply(this, arguments);
+      }
+
+      recursion.toString = function () {
+        return _recursion.toString();
+      };
+
+      return recursion;
+    }(function (obj) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      for (key in obj) {
+        if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
+          data[key] = recursion(obj[key]);
+        } else {
+          data[key] = obj[key];
+        }
+      }
+      return data;
+    });
+
+    DragColumn.prototype.render = function render() {
+      var _props = this.props,
+          data = _props.data,
+          dragborder = _props.dragborder,
+          draggable = _props.draggable,
+          className = _props.className,
+          others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
+
+      return _react2["default"].createElement(Table, _extends({}, others, {
+        columns: this.state.columns,
+        data: data,
+        className: className + ' u-table-drag-border',
+        onDragEnd: this.onDragEnd,
+        draggable: draggable,
+        dragborder: dragborder
+      }));
+    };
+
+    return DragColumn;
+  }(_react.Component);
 }
 module.exports = exports['default'];

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-  var props = [],
+    var props = [],
-      ret = [],
+        ret = [],
-      i = 0,
+        i = 0,
-      len = arr.length;
+        len = arr.length;
-  if (typeof prop == 'string') {
+    if (typeof prop == 'string') {
-    for (; i < len; i++) {
+        for (; i < len; i++) {
-      var oI = arr[i];
+            var oI = arr[i];
-      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+        }
+    } else if (typeof prop == 'function') {
+        for (; i < len; i++) {
+            var _oI = arr[i];
+            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+        }
+    } else {
+        throw '参数类型错误';
     }
-  } else if (typeof prop == 'function') {
+    props.sort();
-    for (; i < len; i++) {
+    for (i = 0; i < len; i++) {
-      var _oI = arr[i];
+        ret[i] = props[i]._obj;
-      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
     }
-  } else {
+    if (desc) ret.reverse();
-    throw '参数类型错误';
+    return ret;
-  }
-  props.sort();
-  for (i = 0; i < len; i++) {
-    ret[i] = props[i]._obj;
-  }
-  if (desc) ret.reverse();
-  return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-  return function (a, b) {
+    return function (a, b) {
-    var value1 = a[property];
+        var value1 = a[property];
-    var value2 = b[property];
+        var value2 = b[property];
-    return value1 - value2;
+        return value1 - value2;
-  };
+    };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-  var b = obj instanceof Array;
+    var b = obj instanceof Array;
-  var tagObj = b ? [] : {};
+    var tagObj = b ? [] : {};
-  if (b) {
+    if (b) {
-    //数组
+        //数组
-    obj.forEach(function (da) {
+        obj.forEach(function (da) {
-      var _da = {};
+            var _da = {};
-      _extends(_da, da);
+            _extends(_da, da);
-      tagObj.push(_da);
+            tagObj.push(_da);
-    });
+        });
-  } else {
+    } else {
-    _extends(tagObj, obj);
+        _extends(tagObj, obj);
-  }
+    }
-  return tagObj;
+    return tagObj;
 }

demo/demolist/Demo0101.js

@@ -7,7 +7,6 @@
 */
 
 import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [

demo/demolist/Demo0602.js

@@ -18,6 +18,7 @@ const columns = [
         dataIndex: "index",
         key: "index",
         width: 80, 
+        fixed: 'left',
         render(text, record, index){return index + 1}
     },
     {
@@ -131,12 +132,48 @@ const data = [
       confirmState_name:"终止",
       closeState_name:"已关闭",
       key: "3"
-    }
+    },
+    { 
+        orderCode:"NU0391025", 
+        supplierName: "xx供应商",
+        type_name: "1",
+        purchasing:'组织c', 
+        purchasingGroup:"aa",
+        voucherDate:"2018年03月18日",
+        approvalState_name:"已审批",
+        confirmState_name:"执行中",
+        closeState_name:"未关闭",
+        key: "4"
+      }, 
+      { 
+        orderCode:"NU0391026", 
+        supplierName: "xx供应商",
+        type_name: "2",
+        purchasing:'组织a', 
+        purchasingGroup:"bb",
+        voucherDate:"2018年02月05日",
+        approvalState_name:"已审批",
+        confirmState_name:"待确认",
+        closeState_name:"未关闭",
+        key: "5"
+      },
+      { 
+        orderCode:"NU0391027", 
+        supplierName: "xx供应商",
+        type_name: "3",
+        purchasing:'组织b', 
+        purchasingGroup:"aa",
+        voucherDate:"2018年07月01日",
+        approvalState_name:"已审批",
+        confirmState_name:"终止",
+        closeState_name:"已关闭",
+        key: "6"
+      }
 ];
 
 class Demo52 extends Component {
   render() {
-    return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }}  />;
+    return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }}  />;
   }
 }
 

demo/demolist/Demo1001.js

@@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
-* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
+* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
 * demo1001
 */
 import React, { Component } from 'react';
@@ -69,8 +69,16 @@ class Demo22 extends Component {
             columns={columns} 
             data={data} 
             bordered
-            draggable={true} 
+            draggable={true}
+
             onDrop ={(event,data,columns)=>{
+              console.log("--拖拽交换列onDrop触发事件");
+              console.log("event.target:",event.target);
+              console.log("data:",data);
+              console.log("拖拽完成后的columns:",columns);
+            }}
+
+            onDragEnd ={(event,data,columns)=>{
               console.log("--拖拽交换列后触发事件");
               console.log("event.target:",event.target);
               console.log("data:",data);

demo/demolist/Demo1101.js

@@ -29,7 +29,7 @@ const columns16 = [
   },
   { title: "订单编号", dataIndex: "a", key: "a", width: 250 },
   { id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
-  { title: "供应商", dataIndex: "c", key: "c", width: 200 },
+  { title: "供应商", dataIndex: "c", key: "c", width: 200, fixed:'right' },
   
 ];
 const columns17 = [

demo/demolist/Demo1401.js

@@ -64,16 +64,16 @@ class Demo30 extends Component {
 
   render() {
     return (
+      <div>
         <BigDataTable
           columns={columns}
-          data={data}
+          data={this.state.data}
           scroll={{y:300}}
           onRowClick={(record, index, indent) => {
             console.log('currentIndex--'+index);
           }}
         />
-
+      </div>
-     
     );
   }
 }

dist/demo.css

@@ -291,7 +291,7 @@
   .u-table-fixed-left .u-table-body-inner {
     margin-right: -20px;
     padding-right: 20px; }
-  .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {
+  .u-table-fixed-header:not(.u-table-hide-header) .u-table-fixed-left .u-table-body-inner {
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
     height: 100%;

docs/api.md

@@ -105,7 +105,7 @@ import 'bee-table/build/Table.css';
 |:--|:---|:--|:---|
 |key|列的键|string|-|
 |className|传入列的classname|String	|-|
-|colSpan|该列的colSpan，设置列合并|Number|-|
+|colSpan|表头列合并,设置为 0 时，不渲染|Number|-|
 |title|列的标题|node|-|
 |dataIndex|	显示数据记录的字段|String|-|
 |width|宽度的特定比例根据列的宽度计算|String/Number|-|
@@ -126,6 +126,7 @@ import 'bee-table/build/Table.css';
 | filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
 | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
+| mergeEndIndex | 大数据量滚动加载场景，合并表格行时，设置合并结束位置的行 index 值，设置在列 render 函数中的 props 属性上 | Number |
 
 
 ### 高阶函数

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.1.13",
+ "version": "2.2.0",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -92,4 +92,4 @@
   "reqwest": "^2.0.5",
   "tinper-bee": "latest"
  }
-}
+}

src/Table.js

@@ -304,7 +304,7 @@ class Table extends Component {
       this.domWidthDiff = this.contentDomWidth - this.contentWidth;
     }
 
-    if (this.computeWidth <= this.contentWidth) {
+    if (this.computeWidth < this.contentWidth) {
       let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
       //bordered的表格需要减去边框的差值1
       if(this.props.bordered){
@@ -400,8 +400,8 @@ class Table extends Component {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   }
 
-  getHeader(columns, fixed) {
+  getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
-    const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
+    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;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -414,7 +414,7 @@ class Table extends Component {
     }
 
     const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
-    let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
+    let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
     let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
     let contentWidthDiff = 0;
     //非固定表格,宽度不够时自动扩充
@@ -444,6 +444,8 @@ class Table extends Component {
         scrollbarWidth = {this.scrollbarWidth}
         headerScroll = {headerScroll}
         bordered = {bordered}
+        leftFixedWidth = {leftFixedWidth}
+        rightFixedWidth = {rightFixedWidth}
       />
     ) : null;
   }
@@ -894,6 +896,8 @@ class Table extends Component {
     const bodyStyle = { ...this.props.bodyStyle };
     const headStyle = {};
     const innerBodyStyle = {};
+    const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
 
     let tableClassName = '';
     //表格元素的宽度大于容器的宽度也显示滚动条
@@ -994,7 +998,7 @@ class Table extends Component {
         <table className={` ${tableClassName}  table-bordered ${_drag_class} `} style={tableStyle}  >
           {/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
           {this.getColGroup(columns, fixed)}
-          {hasHead ? this.getHeader(columns, fixed) : null}
+          {hasHead ? this.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null}
           {tableBody}
         </table>
       );
@@ -1059,8 +1063,8 @@ class Table extends Component {
         </div>
       );
     }
-    const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    // const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
-    const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    // const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
     let expandIconWidth = expandIconAsCell ? 33 : 0;
     let parStyle = {}
     if(!fixed){
@@ -1332,6 +1336,9 @@ class Table extends Component {
     if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
       className += ` ${clsPrefix}-fixed-header`;
     }
+    if (!props.showHeader) {
+      className += ` ${clsPrefix}-hide-header`;
+    }
     if (props.bordered) {
       className += ` ${clsPrefix}-bordered`;
     }

src/Table.scss

@@ -244,7 +244,7 @@ $icon-color:#505F79;
     padding-right: 20px;
   }
 
-   &-fixed-header &-fixed-left &-body-inner {
+   &-fixed-header:not(.u-table-hide-header) &-fixed-left &-body-inner {
     padding-right: 0px;
   }
 

src/TableHeader.js

@@ -79,6 +79,7 @@ class TableHeader extends Component {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      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");
     }
 
@@ -277,7 +278,7 @@ class TableHeader extends Component {
    */
   onTrMouseMove = (e) => {
     if(!this.props.dragborder && !this.props.draggable)return;
-    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
+    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props;
     Event.stopPropagation(e);
     let event = Event.getEvent(e);
     if(this.props.dragborder && this.drag.option == "border"){
@@ -307,11 +308,10 @@ class TableHeader extends Component {
           this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
           this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
         }
-
+        let showScroll =  contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
-        let showScroll =  contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
         //表头滚动条处理
         if(headerScroll){
-            if(showScroll < 0){
+            if(showScroll < 0){ //小于 0 出现滚动条
                 //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
                 this.table.contentTableHeader.style.overflowX = 'scroll';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
@@ -319,18 +319,20 @@ class TableHeader extends Component {
                 // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
                 // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
               //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
-              }else{
+              }else{ //大于 0 不显示滚动条
                 this.table.contentTableHeader.style.overflowX = 'hidden';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,0);
                 this.optTableMargin( this.table.fixedRighHeadertTable,0);
             }
         }else{
           if(showScroll < 0){
+                this.table.tableBody.style.overflowX = 'auto';
                 this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
                 this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
                 this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
                 this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
           }else{
+            this.table.tableBody.style.overflowX = 'hidden';
             this.optTableMargin( this.table.fixedLeftBodyTable,0);
             this.optTableMargin( this.table.fixedRightBodyTable,0);
             this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
@@ -407,7 +409,7 @@ class TableHeader extends Component {
       const innerTable = table.querySelector('.u-table-body-inner');
       if(innerTable){
         //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-        // overflow.x && (innerTable.style.overflowX = overflow.x);
+        overflow.x && (innerTable.style.overflowX = overflow.x);
         overflow.y && (innerTable.style.overflowY = overflow.y);
       }
 
@@ -490,6 +492,12 @@ class TableHeader extends Component {
     let event = Event.getEvent(e) ,
     target = Event.getTarget(event);
     this.currentDome.setAttribute('draggable',false);//添加交换列效果
+
+    let data = this.getCurrentEventData(this._dragCurrent);
+    if(!data)return;
+    if(!this.props.onDrop)return;
+    // this.props.onDrop(event,target);
+    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
   };
 
 
@@ -516,8 +524,8 @@ class TableHeader extends Component {
     let data = this.getCurrentEventData(this._dragCurrent);
     if(!data)return;
     if (!this.currentObj || this.currentObj.key == data.key) return;
-    if(!this.props.onDrop)return;
+    if(!this.props.onDragEnd)return;
-    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
+    this.props.onDragEnd(event,{dragSource:this.currentObj,dragTarg:data});
   }
 
 

src/TableRow.js

@@ -531,7 +531,7 @@ class TableRow extends Component{
         // key={hoverKey}
         ref={this.bindElement}
       >
-        {cells.length>0?cells:<td></td>}
+        {cells.length>0?cells:<td style={{width:0,padding:0}}></td>}
       </tr>
     );
   }

src/lib/bigData.js

@@ -60,7 +60,8 @@ export default function bigData(Table) {
           _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
         
       }
-      if (nextProps.data !== props.data) {
+      if (nextProps.data.toString() !== props.data.toString()) {
+        //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
         _this.cachedRowHeight = []; //缓存每行的高度
         _this.cachedRowParentIndex = [];
         _this.computeCachedRowParentIndex(nextProps.data);

src/lib/dragColumn.js

@@ -43,7 +43,7 @@ export default function dragColumn(Table) {
         return data
     }
 
-    onDrop=(event,data)=>{
+    onDragEnd=(event,data)=>{
       let {dragSource,dragTarg} = data;
       let {columns} = this.state; 
       let sourceIndex = -1,targetIndex = -1;
@@ -65,14 +65,11 @@ export default function dragColumn(Table) {
         newDate.title = da.title;
         _newColumns.push(newDate);
       });
-      // console.log(" onDrop-------columns--- ",columns);
       this.setState({
         columns:_newColumns//cloneDeep(columns)
       });
-      // console.log(" onDrop-------columns--- ",_newColumns);
+      if(this.props.onDragEnd){
-      // console.log(columns === _newColumns);
+        this.props.onDragEnd(event,data,columns);
-      if(this.props.onDrop){
-        this.props.onDrop(event,data,columns);
       }
     }
  
@@ -86,11 +83,6 @@ export default function dragColumn(Table) {
           dragborder,
           draggable,
           className,
-          columns,
-          onDragStart,
-          onDragEnter,
-          onDragOver,
-          onDrop,
           ...others
       } = this.props;
       return (
@@ -99,10 +91,7 @@ export default function dragColumn(Table) {
               columns={this.state.columns}
               data={data}
               className={`${className} u-table-drag-border`}
-              onDragStart={this.onDragStart}
+              onDragEnd={this.onDragEnd}
-              onDragOver={this.onDragOver}
-              onDrop={this.onDrop}
-              onDragEnter={this.onDragEnter}
               draggable={draggable}
               dragborder={dragborder}
           />)