merge

build/Table.css

@@ -20,13 +20,15 @@
     text-align: left; }
   .u-table th {
     font-weight: bold;
-    text-align: left; }
+    text-align: left;
+    line-height: 16px; }
     .u-table th[colspan] {
       text-align: center; }
     .u-table th ::last-child {
       overflow: hidden; }
   .u-table td {
-    border-bottom: 1px solid rgb(193, 199, 208); }
+    border-bottom: 1px solid rgb(193, 199, 208);
+    line-height: 1.33; }
     .u-table td a {
       color: #2196F3; }
       .u-table td a:hover {
@@ -35,6 +37,8 @@
         color: #1565c0; }
   .u-table thead tr:last-child {
     border-bottom: 1px solid #C1C7D0; }
+  .u-table thead tr > th:last-child {
+    border-right: none; }
   .u-table tr:hover td .uf-eye {
     visibility: visible !important; }
   .u-table tr tr a {
@@ -47,7 +51,7 @@
     background: rgb(235, 236, 240); }
   .u-table th,
   .u-table td {
-    padding: 12px 16px;
+    padding: 12px 8px;
     word-break: break-all; }
     .u-table th.text-center,
     .u-table td.text-center {
@@ -55,6 +59,10 @@
     .u-table th.text-right,
     .u-table td.text-right {
       text-align: right; }
+  .u-table-sm td {
+    padding: 8px 8px; }
+  .u-table-lg td {
+    padding: 16px 8px; }
   .u-table tr.filterable th {
     padding-top: 5px !important;
     padding-bottom: 5px !important; }
@@ -88,7 +96,7 @@
     background: rgb(241, 242, 245);
     color: rgb(33, 33, 33); }
   .u-table.fixed-height td {
-    padding: 0px 16px; }
+    padding: 0px 8px; }
   .u-table-fixed-header .u-table-body {
     background: #fff;
     position: relative; }
@@ -106,17 +114,17 @@
     overflow-y: scroll;
     box-sizing: border-box; }
   .u-table-title {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-top: 1px solid rgb(193, 199, 208); }
   .u-table-content {
     position: relative; }
   .u-table-footer {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-bottom: 1px solid rgb(193, 199, 208); }
     .u-table-footer .u-table-scroll {
       overflow-x: hidden; }
   .u-table-footer .u-table {
-    margin: -12px -16px; }
+    margin: -12px -8px; }
   .u-table-placeholder {
     padding: 12px 8px;
     background: #fff;
@@ -323,6 +331,7 @@
       color: #505F79; }
   .u-table-filter-column-pop-cont-item {
     margin-top: 8px;
+    font-size: 12px;
     cursor: pointer; }
     .u-table-filter-column-pop-cont-item .u-checkbox {
       margin: 0px; }
@@ -352,6 +361,10 @@
       .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
         width: 14px;
         height: 14px; }
+  .u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
+    padding-left: 12px; }
+  .u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
+    padding-left: 8px; }
 
 .u-table:focus {
   outline: none;
@@ -585,3 +598,25 @@
 
 ::-webkit-scrollbar-track-piece {
   display: none; }
+
+.header-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.header-dispaly-in-row th {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
+.body-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.body-dispaly-in-row td {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
+.u-table-drag-hidden-cont {
+  position: absolute;
+  top: -1000px; }

build/Table.js

@@ -100,7 +100,8 @@ var propTypes = {
   onFilterClear: _propTypes2["default"].func,
   syncHover: _propTypes2["default"].bool,
   tabIndex: _propTypes2["default"].string,
-  hoverContent: _propTypes2["default"].func
+  hoverContent: _propTypes2["default"].func,
+  size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
 };
 
 var defaultProps = {
@@ -145,7 +146,8 @@ var defaultProps = {
   setRowHeight: function setRowHeight() {},
   setRowParentIndex: function setRowParentIndex() {},
   tabIndex: '0',
-  heightConsistent: false
+  heightConsistent: false,
+  size: 'md'
 };
 
 var Table = function (_Component) {
@@ -156,6 +158,15 @@ var Table = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+    _this.resize = function () {
+      (0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
+      _this.computeTableWidth();
+      var renderFlag = _this.state.renderFlag;
+      _this.setState({
+        renderFlag: !renderFlag
+      });
+    };
+
     _this.renderDragHideTable = function () {
       var _this$props = _this.props,
           columns = _this$props.columns,
@@ -270,7 +281,7 @@ var Table = function (_Component) {
     }
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
-      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
+      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
     }
   };
 
@@ -785,7 +796,8 @@ var Table = function (_Component) {
         treeType: childrenColumn || this.treeType ? true : false,
         fixedIndex: fixedIndex + lazyCurrentIndex,
         rootIndex: rootIndex,
-        syncHover: props.syncHover
+        syncHover: props.syncHover,
+        bodyDisplayInRow: props.bodyDisplayInRow
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;
@@ -1309,7 +1321,7 @@ var Table = function (_Component) {
 
     var props = this.props;
     var clsPrefix = props.clsPrefix;
-
+    var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
     var className = props.clsPrefix;
     if (props.className) {
       className += ' ' + props.className;
@@ -1325,6 +1337,12 @@ var Table = function (_Component) {
     if (props.height) {
       className += ' fixed-height';
     }
+    if (props.bodyDisplayInRow) {
+      className += ' body-dispaly-in-row';
+    }
+    if (props.headerDisplayInRow) {
+      className += ' header-dispaly-in-row';
+    }
     var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
     var loading = props.loading;
     if (typeof loading === 'boolean') {
@@ -1332,6 +1350,12 @@ var Table = function (_Component) {
         show: loading
       };
     }
+    if (props.size) {
+      className += ' ' + clsPrefix + '-' + props.size;
+    }
+    if (hasFixedLeft) {
+      className += ' has-fixed-left';
+    }
 
     return _react2["default"].createElement(
       'div',
@@ -1350,7 +1374,7 @@ var Table = function (_Component) {
           this.getEmptyText(),
           this.getFooter()
         ),
-        this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
+        hasFixedLeft && _react2["default"].createElement(
           'div',
           { className: clsPrefix + '-fixed-left' },
           this.getLeftFixedTable()

build/TableCell.js

@@ -73,7 +73,8 @@ var TableCell = function (_Component) {
         expandIcon = _props2.expandIcon,
         column = _props2.column,
         fixed = _props2.fixed,
-        showSum = _props2.showSum;
+        showSum = _props2.showSum,
+        bodyDisplayInRow = _props2.bodyDisplayInRow;
     var dataIndex = column.dataIndex,
         render = column.render;
     var _column$className = column.className,
@@ -83,7 +84,8 @@ var TableCell = function (_Component) {
     var text = _objectPath2["default"].get(record, dataIndex);
     var tdProps = void 0;
     var colSpan = void 0;
-    var rowSpan = void 0;
+    var rowSpan = void 0,
+        title = void 0;
 
     if (render && !showSum) {
       text = render(text, record, index);
@@ -114,13 +116,17 @@ var TableCell = function (_Component) {
     if (column.textAlign) {
       className = className + (' text-' + column.textAlign);
     }
+    if (typeof text == 'string' && bodyDisplayInRow) {
+      title = text;
+    }
     return _react2["default"].createElement(
       'td',
       {
         colSpan: colSpan,
         rowSpan: rowSpan,
         className: className,
-        onClick: this.handleClick
+        onClick: this.handleClick,
+        title: title
       },
       indentText,
       expandIcon,

build/TableHeader.js

@@ -42,6 +42,13 @@ var propTypes = {
   rows: _propTypes2["default"].array
 };
 
+function getDiv(id) {
+  var div = document.createElement("div");
+  div.className = "u-table-drag-hidden-cont";
+  div.id = id;
+  return div;
+}
+
 var TableHeader = function (_Component) {
   _inherits(TableHeader, _Component);
 
@@ -50,44 +57,76 @@ var TableHeader = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-    _this.optTableMargin = function (table, scrollbarWidth) {
+    _this.getOnLineObject = function (_element) {
-      if (table) {
+      var type = _element.getAttribute('data-type'),
-        table.style.marginBottom = scrollbarWidth + "px";
+          elementObj = null;
+      if (!type) {
+        var element = _element.parentElement || parentNode; //兼容写法。
+        if (element.getAttribute('data-type')) {
+          elementObj = element;
         }
+      } else {
+        elementObj = _element;
+      }
+      return elementObj;
     };
 
-    _this.optTableScroll = function (table) {
+    _this.onTrMouseDown = function (e) {
-      var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      _utils.Event.stopPropagation(e);
-
+      var event = _utils.Event.getEvent(e),
-      if (table) {
+          targetEvent = _utils.Event.getTarget(event);
-        var innerTable = table.querySelector('.u-table-body-inner');
-        if (innerTable) {
-          overflow.x && (innerTable.style.overflowX = overflow.x);
-          overflow.y && (innerTable.style.overflowY = overflow.y);
-        }
-      }
-    };
-
-    _this.onLineMouseMove = function (e) {
       var _this$props = _this.props,
           clsPrefix = _this$props.clsPrefix,
-          dragborder = _this$props.dragborder,
+          contentTable = _this$props.contentTable;
-          contentDomWidth = _this$props.contentDomWidth,
+
-          scrollbarWidth = _this$props.scrollbarWidth,
+      var currentElement = _this.getOnLineObject(targetEvent);
-          contentTable = _this$props.contentTable,
+      if (!currentElement) return;
-          headerScroll = _this$props.headerScroll;
+      var type = currentElement.getAttribute('data-type');
+      if (!_this.props.dragborder && !_this.props.draggable) return;
+      if (type == 'online' && _this.props.dragborder) {
+        if (!_this.props.dragborder) return;
+        targetEvent.setAttribute('draggable', false); //添加交换列效果
+        var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+        var defaultWidth = currentElement.getAttribute("data-th-width");
+        var currentObj = _this.table.cols[currentIndex];
+        _this.drag.option = "border"; //拖拽操作
+        _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);
+      } else if (type != 'online' && _this.props.draggable) {
+        if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
+        targetEvent.setAttribute('draggable', true); //添加交换列效果
+        _this.drag.option = 'dragAble';
+        _this.currentDome = event.target;
+        var _currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+        _this.drag.currIndex = _currentIndex;
+      } else {
+        // console.log("onTrMouseDown dragborder or draggable is all false !");
+        return;
+      }
+    };
+
+    _this.onTrMouseMove = function (e) {
+      if (!_this.props.dragborder && !_this.props.draggable) return;
+      var _this$props2 = _this.props,
+          clsPrefix = _this$props2.clsPrefix,
+          dragborder = _this$props2.dragborder,
+          contentDomWidth = _this$props2.contentDomWidth,
+          scrollbarWidth = _this$props2.scrollbarWidth,
+          contentTable = _this$props2.contentTable,
+          headerScroll = _this$props2.headerScroll;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
-      if (!_this.props.dragborder) return;
+      if (_this.props.dragborder && _this.drag.option == "border") {
-      if (_this.drag.option != "border") {
-        return false;
-      }
         //移动改变宽度
         var currentCols = _this.table.cols[_this.drag.currIndex];
         var diff = event.x - _this.drag.oldLeft;
         var newWidth = _this.drag.oldWidth + diff;
         _this.drag.newWidth = newWidth;
+
         // if(newWidth > this.drag.minWidth){
         if (newWidth > _this.minWidth) {
           currentCols.style.width = newWidth + 'px';
@@ -97,7 +136,10 @@ var TableHeader = function (_Component) {
           }
           var newTableWidth = _this.drag.tableWidth + diff + 'px';
           _this.table.table.style.width = newTableWidth; //改变table的width
+          if (_this.table.innerTableBody) {
+            //TODO 后续需要处理此处
             _this.table.innerTableBody.style.width = newTableWidth;
+          }
           var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
 
           //表头滚动条处理
@@ -129,76 +171,75 @@ var TableHeader = function (_Component) {
             }
           }
         }
+      } else if (_this.props.draggable && _this.drag.option == "draggable") {
+        // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
+      } else {
+          // console.log("onTrMouseMove dragborder or draggable is all false !");
+        }
     };
 
-    _this.onLineMouseDown = function (e) {
+    _this.onTrMouseUp = function (e) {
-      _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
-      var _this$props2 = _this.props,
-          clsPrefix = _this$props2.clsPrefix,
-          contentTable = _this$props2.contentTable;
-
-      if (!_this.props.dragborder) return;
-      var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
-      var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
-      var currentObj = _this.table.cols[currentIndex];
-      _this.drag.option = "border"; //拖拽操作
-      _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);
-    };
-
-    _this.onLineMouseUp = function (event) {
       var width = _this.drag.newWidth;
-      _this.clearDragBorder(event);
+      _this.mouseClear();
       _this.props.onDropBorder && _this.props.onDropBorder(event, width);
     };
 
-    _this.bodyonLineMouseMove = function (event) {
+    _this.clearThsDr = function () {
-      _this.clearDragBorder(event);
+      var ths = _this.table.ths;
+      for (var index = 0; index < ths.length; index++) {
+        ths[index].setAttribute('draggable', false); //去掉交换列效果
+      }
     };
 
-    _this.dragAbleMouseDown = function (e) {
+    _this.bodyonLineMouseUp = function (events, type) {
-      // Event.stopPropagation(e); 
+      if (!_this.drag || !_this.drag.option) return;
-      var event = _utils.Event.getEvent(e);
+      _this.mouseClear();
-      if (!_this.props.draggable) return;
-      var th = _this.getThDome(event.target);
-      if (!th) return;
-      event.target.setAttribute('draggable', true); //添加交换列效果
-      _this.drag.option = 'dragAble';
-      _this.currentDome = event.target;
-
-      _this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th
-      _this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
-      _this.addDragAbleEvent(); //添加拖拽交换列的事件
     };
 
-    _this.dragAbleMouseUp = function (e) {
+    _this.optTableMargin = function (table, scrollbarWidth) {
-      _this.currentDome.setAttribute('draggable', false); //添加交换列效果
+      if (table) {
-      _this.removeDragAbleEvent();
+        table.style.marginBottom = scrollbarWidth + "px";
-      _this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th
+      }
-      //拖拽交换列事件
+    };
-      _this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上
+
-      _this.initEvent();
+    _this.optTableScroll = function (table) {
+      var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (table) {
+        var innerTable = table.querySelector('.u-table-body-inner');
+        if (innerTable) {
+          overflow.x && (innerTable.style.overflowX = overflow.x);
+          overflow.y && (innerTable.style.overflowY = overflow.y);
+        }
+      }
     };
 
     _this.onDragStart = function (e) {
-      var event = _utils.Event.getEvent(e);
       if (!_this.props.draggable) return;
-      if (_this.drag.option === 'border') {
+      if (_this.drag && _this.drag.option != 'dragAble') {
         return;
       }
-      var th = _this.getThDome(event.target);
+      var event = _utils.Event.getEvent(e),
-      if (!th) return;
+          target = _utils.Event.getTarget(event);
-      var currentIndex = parseInt(th.getAttribute("data-line-index"));
+
+      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 = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
+        crt.style.height = "40px";
+        // crt.style['line-height'] = "40px";
+        // document.body.appendChild(crt);
+        document.getElementById(_this._table_none_cont_id).appendChild(crt);
+        event.dataTransfer.setDragImage(crt, 0, 0);
+      }
 
-      var currentKey = event.target.getAttribute('data-line-key');
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", currentKey);
       _this.currentObj = _this.props.rows[0][currentIndex];
-      // event.dataTransfer.setDragImage(event.target, 0, 0);
     };
 
     _this.onDragOver = function (e) {
@@ -207,17 +248,52 @@ var TableHeader = function (_Component) {
 
     _this.onDrop = function (e) {
       if (!_this.props.draggable) return;
-      if (_this.drag.option === 'border') {
+      if (_this.drag && _this.drag.option != 'dragAble') {
         return;
       }
+      var event = _utils.Event.getEvent(e),
+          target = _utils.Event.getTarget(event);
       _this.currentDome.setAttribute('draggable', false); //添加交换列效果
-      var data = _this.getCurrentEventData(e);
+    };
+
+    _this.onDragEnter = function (e) {
+      var event = _utils.Event.getEvent(e),
+          target = _utils.Event.getTarget(event);
+      _this._dragCurrent = target;
+      var currentIndex = target.getAttribute("data-line-index");
+      if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
+      if (target.nodeName.toUpperCase() === "TH") {
+        // target.style.border = "2px dashed rgba(5,0,0,0.25)";
+        target.setAttribute("style", "border:2px dashed rgba(5,0,0,0.25)");
+        // target.style.backgroundColor = 'rgb(235, 236, 240)';
+      }
+    };
+
+    _this.onDragEnd = function (e) {
+      var event = _utils.Event.getEvent(e),
+          target = _utils.Event.getTarget(event);
+      _this._dragCurrent.setAttribute("style", "");
+      // this._dragCurrent.style = "";
+      document.getElementById(_this._table_none_cont_id).innerHTML = "";
+
+      var data = _this.getCurrentEventData(_this._dragCurrent);
       if (!data) return;
       if (!_this.currentObj || _this.currentObj.key == data.key) return;
       if (!_this.props.onDrop) return;
       _this.props.onDrop(event, { dragSource: _this.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) === _this.drag.currIndex) return;
+      if (target.nodeName.toUpperCase() === "TH") {
+        target.setAttribute("style", "");
+        // this._dragCurrent.style = "";
+      }
+    };
+
     _this.handlerFilterChange = function (key, value, condition) {
       var onFilterChange = _this.props.onFilterChange;
 
@@ -353,68 +429,18 @@ var TableHeader = function (_Component) {
     return _this;
   }
 
-  /**
-   *
-   * 动态绑定th line 事件方法
-   * @param {*} events
-   * @param {*} type  type 为false 为增加事件
-   * @param {*} eventSource 为false 给 th 内部的div增加事件
-   * @memberof TableHeader
-   */
-  TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
-    var _table = this.table,
-        ths = _table.ths,
-        cols = _table.cols;
-
-    for (var index = 0; index < ths.length; index++) {
-      var element = ths[index]; //.getAttribute('data-type');
-      if (!element.getAttribute('data-th-fixed')) {
-        var colLine = null;
-        if (element.children.length === 0) {
-          colLine = element;
-        } else if (element.children.length > 0) {
-          colLine = element.lastElementChild;
-        } else if (element.children.length === 1) {
-          colLine = element.children[0];
-        }
-        // const colLine =  element.children.length > 1?element.lastElementChild:element.children[0];
-        for (var i = 0; i < events.length; i++) {
-          var _event = events[i];
-          var _dataSource = eventSource ? element : colLine;
-          if (type === "remove") {
-            _utils.EventUtil.removeHandler(_dataSource, _event.key, _event.fun);
-          } else {
-            _utils.EventUtil.addHandler(_dataSource, _event.key, _event.fun);
-          }
-        }
-      }
-    }
-  };
-
-  /**
-   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
-   * @param {*} events
-   * @param {*} type
-   * @memberof TableHeader
-   */
-
-
-  TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
-    for (var i = 0; i < events.length; i++) {
-      var _event = events[i];
-      if (type == "remove") {
-        _utils.EventUtil.removeHandler(document.body, _event.key, _event.fun);
-      } else {
-        _utils.EventUtil.addHandler(document.body, _event.key, _event.fun);
-      }
-    }
-  };
-
   TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
     this.initTable();
     this.initEvent();
   };
 
+  TableHeader.prototype.componentDidMount = function componentDidMount() {
+    var uid = "_table_uid_" + new Date().getTime();
+    this._table_none_cont_id = uid;
+    var div = getDiv(uid);
+    document.querySelector("body").appendChild(div);
+  };
+
   TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
     if (!this.table) return;
     if (this.props.draggable) {
@@ -423,44 +449,7 @@ var TableHeader = function (_Component) {
     if (this.props.dragborder) {
       this.removeDragBorderEvent();
     }
-  };
+    this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], 'remove', this.table.tr[0]);
-
-  // componentDidMount(){
-  // this.initTable();
-  // this.initEvent();
-  // } 
-
-  /**
-   * 初始化拖拽列宽的事件处理
-   * @returns
-   * @memberof TableHeader
-   */
-
-
-  TableHeader.prototype.initEvent = function initEvent() {
-    var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
-
-    if (this.props.dragborder) {
-      this.thEventListen(events, '', true); //表示把事件添加到th元素上
-      this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线
-      this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]);
-    }
-    if (!this.props.draggable) return;
-    //拖拽交换列事件
-    this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到th元素上
-  };
-
-  /**
-   * 移除当前全局事件对象
-   * @memberof TableHeader
-   */
-
-
-  TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
-    var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
-    this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上
-    this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线
-    this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
   };
 
   /**
@@ -474,13 +463,13 @@ var TableHeader = function (_Component) {
     var contentTable = this.props.contentTable;
 
     if (!this.props.dragborder && !this.props.draggable) return;
-    // let el = ReactDOM.findDOMNode(this);
     var tableDome = this._thead.parentNode;
     var table = {};
     if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
       table.table = tableDome;
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
+      table.tr = tableDome.getElementsByTagName("tr");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
@@ -505,15 +494,59 @@ var TableHeader = function (_Component) {
       }
     }
   };
+
   /**
-   *相关滚动条联动操作
+   * 事件初始化
-   *
-   * @memberof TableHeader
    */
 
 
+  TableHeader.prototype.initEvent = function initEvent() {
+    this.dragBorderEventInit(); //列宽
+    this.dragAbleEventInit(); //交换列
+    if (this.table && this.table.tr) {
+      this.eventListen([{ key: 'mousedown', fun: this.onTrMouseDown }], '', this.table.tr[0]); //body mouseup
+    }
+    this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
+  };
+
   /**
-   * 调整列宽的move事件
+   * 拖拽列宽事件的监听
+   */
+
+
+  TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
+    if (!this.props.dragborder) return;
+    var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
+    this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
+  };
+
+  /**
+   * 删除拖动改变列宽的事件监听
+   */
+
+
+  TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
+    var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
+    this.eventListen(events, 'remove', this.table.tr[0]);
+  };
+
+  TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
+    if (!this.table) return;
+    var tr = this.table.tr;
+
+    for (var i = 0; i < events.length; i++) {
+      var _event = events[i];
+      if (type === "remove") {
+        _utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
+      } else {
+        _utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
+      }
+    }
+  };
+
+  /**
+   *
+   *根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
    * @memberof TableHeader
    */
 
@@ -525,17 +558,18 @@ var TableHeader = function (_Component) {
 
 
   /**
-   * 调整列宽的up事件
+   * 调整列宽的move事件
    * @memberof TableHeader
    */
 
 
   /**
-   * 调整列宽到区域以外的up事件
+  * 调整列宽的up事件
+  * @memberof TableHeader
   */
 
 
-  TableHeader.prototype.clearDragBorder = function clearDragBorder() {
+  TableHeader.prototype.mouseClear = function mouseClear() {
     if (!this.drag || !this.drag.option) return;
     var rows = this.props.rows;
 
@@ -544,32 +578,36 @@ var TableHeader = function (_Component) {
     this.drag = {
       option: ""
     };
-    if (this.props.draggable) {
+    this.clearThsDr();
-      this.removeDragAbleEvent();
-    }
   };
 
-  //---拖拽列宽代码逻辑----start-----
-
   /**
-   * 调整交换列down事件
+  * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
-   * @memberof TableHeader
+  * @param {*} events
-   */
+  * @param {*} type
-
-  /**
-   * 调整交换列up事件
   * @memberof TableHeader
   */
 
 
+  /**
+   *相关滚动条联动操作
+   *
+   * @memberof TableHeader
+   */
+
+
+  //---拖拽交换列代码----start-----
   /**
    * 添加换列的事件监听
    */
-  TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
+  TableHeader.prototype.dragAbleEventInit = function dragAbleEventInit() {
+    if (!this.props.draggable) return;
     var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
     { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
-    { key: 'drop', fun: this.onDrop }];
+    { key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 
-    this.thEventListen(events, '', true);
+
+    { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
+    this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
   };
 
   /**
@@ -578,8 +616,8 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
-    var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
+    var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
-    this.thEventListen(events, 'remove', true);
+    this.eventListen(events, 'remove', this.table.tr[0]);
   };
 
   /**
@@ -599,9 +637,7 @@ var TableHeader = function (_Component) {
    * @returns
    * @memberof TableHeader
    */
-  TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
+  TableHeader.prototype.getCurrentEventData = function getCurrentEventData(th) {
-    var event = _utils.Event.getEvent(e);
-    var th = this.getThDome(event.target);
     if (!th) {
       console.log(" event target is not th ! ");
       return null;
@@ -617,26 +653,6 @@ var TableHeader = function (_Component) {
       return null;
     }
   };
-
-  /**
-   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
-   * @param {*} element
-   * @returns  <th />对象
-   * @memberof TableHeader
-   */
-
-
-  TableHeader.prototype.getThDome = function getThDome(element) {
-    var _tagName = element.tagName.toLowerCase();
-    if (element.getAttribute('data-filter-type') === 'filterContext') return null;
-    if (_tagName === 'i') return null;
-    if (_tagName != 'th') {
-      return this.getThDome(element.parentElement);
-    } else {
-      return element;
-    }
-  };
-
   //---拖拽列交换----end----- 
 
   /**
@@ -675,9 +691,10 @@ var TableHeader = function (_Component) {
           return _this2._thead = _thead;
         } }),
       rows.map(function (row, index) {
+        var _rowLeng = row.length - 1;
         return _react2["default"].createElement(
           "tr",
-          { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
+          { key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
           row.map(function (da, columIndex, arr) {
             var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
             delete da.drgHover;
@@ -719,22 +736,20 @@ var TableHeader = function (_Component) {
               thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
             }
             thClassName += " " + fixedStyle;
-
             if (!da.fixed) {
-
               return _react2["default"].createElement(
                 "th",
-                _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
+                _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
-                  "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
+                  "data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
                 da.children,
-                dragborder ? _react2["default"].createElement(
+                dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
                   "div",
                   { ref: function ref(el) {
                       return _this2.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" },
-                  _react2["default"].createElement("div", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width })
+                  _react2["default"].createElement("div", { className: "online" })
                 ) : ""
               );
             } else {

build/TableRow.js

@@ -241,7 +241,8 @@ var TableRow = function (_Component) {
         indent = _props9.indent,
         indentSize = _props9.indentSize,
         isHiddenExpandIcon = _props9.isHiddenExpandIcon,
-        fixed = _props9.fixed;
+        fixed = _props9.fixed,
+        bodyDisplayInRow = _props9.bodyDisplayInRow;
 
     var showSum = false;
     var className = this.props.className;
@@ -288,7 +289,8 @@ var TableRow = function (_Component) {
         key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
         fixed: fixed,
         showSum: showSum,
-        expandIcon: isColumnHaveExpandIcon ? expandIcon : null
+        expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
+        bodyDisplayInRow: bodyDisplayInRow
       }));
     }
     var style = { height: height };

build/lib/dragColumn.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   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; };
-
 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; };
 
+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; };
+
 exports["default"] = dragColumn;
 
 var _react = require('react');
@@ -28,7 +28,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-var cloneDeep = require('lodash.clonedeep');
 /**
  * 参数: 列拖拽
  * @param {*} Table
@@ -66,23 +65,23 @@ function dragColumn(Table) {
         targetIndex = columns.findIndex(function (da, i) {
           return da.key == dragTarg.key;
         });
-        // for (let index = 0; index < columns.length; index++) {
-        //   const da = columns[index];
-        //   if(da.key === dragSource.key){
-        //     columns[index] = dragTargColum; 
-        //   }
-        //   if(da.key === dragTarg.key){
-        //     columns[index] = dragSourceColum;
-        //   }
-        // }
         // 向前移动
         if (targetIndex < sourceIndex) {
           targetIndex = targetIndex + 1;
         }
         columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
-        _this.setState({
+        var _newColumns = [];
-          columns: cloneDeep(columns)
+        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);
         }
@@ -106,14 +105,6 @@ function dragColumn(Table) {
       }
     };
 
-    DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
-      if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
-        return obj;
-      }
-      var resultData = {};
-      return this.recursion(obj, resultData);
-    };
-
     DragColumn.prototype.recursion = function (_recursion) {
       function recursion(_x) {
         return _recursion.apply(this, arguments);
@@ -150,7 +141,6 @@ function dragColumn(Table) {
           onDrop = _props.onDrop,
           others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
 
-      var key = new Date().getTime();
       return _react2["default"].createElement(Table, _extends({}, others, {
         columns: this.state.columns,
         data: data,
@@ -161,8 +151,6 @@ function dragColumn(Table) {
         onDragEnter: this.onDragEnter,
         draggable: draggable,
         dragborder: dragborder
-        // dragborder={false}
-        , dragborderKey: key
       }));
     };
 

build/lib/filterColumn.js

@@ -236,12 +236,15 @@ function filterColumn(Table, Popover) {
             key: da.key + "_" + i,
             className: prefixCls + "-pop-cont-item"
           },
-          _react2["default"].createElement(_beeCheckbox2["default"], paramObj),
+          _react2["default"].createElement(
+            _beeCheckbox2["default"],
+            paramObj,
             _react2["default"].createElement(
               "span",
               null,
               da.title
             )
+          )
         );
       });
     };

build/lib/multiSelect.js

@@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
       var count = 0;
       var disabledCount = 0;
       data.forEach(function (da) {
-        if (da._checked) {
+        if (da._checked && !da._disabled) {
           count++;
         }
         if (da._disabled) {

build/lib/newMultiSelect.js

@@ -1,191 +1,17 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   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; };
-
 exports["default"] = newMultiSelect;
 
-var _react = require("react");
+var _multiSelect = require('./multiSelect');
 
-var _react2 = _interopRequireDefault(_react);
+var _multiSelect2 = _interopRequireDefault(_multiSelect);
-
-var _util = require("./util");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
-
-/**
- * 参数: 过滤表头
- * @param {*} Table
- * @param {*} Checkbox
- * @param {*} Popover
- * @param {*} Icon
- */
-
 function newMultiSelect(Table, Checkbox) {
-  var _class, _temp, _initialiseProps;
+  return (0, _multiSelect2["default"])(Table, Checkbox);
-
-  return _temp = _class = function (_Component) {
-    _inherits(NewMultiSelect, _Component);
-
-    function NewMultiSelect(props) {
-      _classCallCheck(this, NewMultiSelect);
-
-      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
-      _initialiseProps.call(_this);
-
-      var checkedAll = _this.setChecked(props.data);
-      _this.state = {
-        checkedAll: checkedAll,
-        data: (0, _util.ObjectAssign)(props.data)
-      };
-      return _this;
-    }
-
-    NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-      if (this.props.data != nextProps.data) {
-        this.setState({
-          data: (0, _util.ObjectAssign)(nextProps.data),
-          checkedAll: this.setChecked(nextProps.data)
-        });
-      }
-    };
-
-    NewMultiSelect.prototype.setChecked = function setChecked(data) {
-      var allCheck = true;
-      if (data) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var da = _step.value;
-
-            if (!da._checked) {
-              allCheck = false;
-              break;
-            }
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator["return"]) {
-              _iterator["return"]();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-      }
-      return allCheck;
-    };
-
-    NewMultiSelect.prototype.render = function render() {
-      var columns = this.props.columns;
-      var data = this.state.data;
-
-      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
-    };
-
-    return NewMultiSelect;
-  }(_react.Component), _class.defaultProps = {
-    prefixCls: "u-table-mult-select"
-  }, _initialiseProps = function _initialiseProps() {
-    var _this2 = this;
-
-    this.onAllCheckChange = function () {
-      var _state = _this2.state,
-          data = _state.data,
-          checkedAll = _state.checkedAll;
-
-      var selectList = [];
-      var check = checkedAll ? false : true;
-      data.forEach(function (item) {
-        item._checked = check;
-        if (item._checked) {
-          selectList.push(item);
-        }
-      });
-      _this2.setState({
-        checkedAll: check
-      });
-      _this2.props.getSelectedDataFunc(selectList);
-    };
-
-    this.handleClick = function () {};
-
-    this.onCheckboxChange = function (text, record, index) {
-      return function () {
-        var data = _this2.state.data;
-
-        var selectList = [];
-        record._checked = record._checked ? false : true;
-        var checkedAll = true;
-        for (var i = 0; i < data.length; i++) {
-          var item = data[i];
-          if (!item._checked || item._checked == false) {
-            checkedAll = false;
-            break;
-          }
-        }
-        _this2.setState(_extends({}, _this2.state, {
-          checkedAll: checkedAll
-        }));
-        data.forEach(function (da) {
-          if (da._checked) {
-            selectList.push(da);
-          }
-        });
-        _this2.props.getSelectedDataFunc(selectList, record, index);
-      };
-    };
-
-    this.getDefaultColumns = function (columns) {
-      // let checkedAll = init?false:this.state.checkedAll;
-      var checkedAll = _this2.state.checkedAll;
-
-      var _defaultColumns = [{
-        title: _react2["default"].createElement(Checkbox, {
-          className: "table-checkbox",
-          checked: checkedAll
-          // indeterminate={indeterminate_bool && !this.state.checkedAll}
-          , onChange: _this2.onAllCheckChange
-        }),
-        key: "checkbox",
-        dataIndex: "checkbox",
-        fixed: "left",
-        width: 50,
-        render: function render(text, record, index) {
-          var attr = {};
-          record._disabled ? attr.disabled = record._disabled : "";
-          return _react2["default"].createElement(Checkbox, _extends({
-            key: index,
-            className: "table-checkbox"
-          }, attr, {
-            checked: record._checked,
-            onClick: _this2.handleClick,
-            onChange: _this2.onCheckboxChange(text, record, index)
-          }));
-        }
-      }];
-      return _defaultColumns.concat(columns);
-    };
-  }, _temp;
 }
-module.exports = exports["default"];
+module.exports = exports['default'];

demo/TableDemo.scss

@@ -1,20 +1,20 @@
-@import "../node_modules/tinper-bee-core/scss/index.scss";
+// @import "../node_modules/tinper-bee-core/scss/index.scss";
-@import "../node_modules/bee-panel/src/Panel.scss";
+// @import "../node_modules/bee-panel/src/Panel.scss";
-@import "../node_modules/bee-layout/src/Layout.scss";
+// @import "../node_modules/bee-layout/src/Layout.scss";
-@import "../node_modules/bee-button/src/Button.scss";
+// @import "../node_modules/bee-button/src/Button.scss";
-@import "../node_modules/bee-transition/src/Transition.scss";
+// @import "../node_modules/bee-transition/src/Transition.scss";
-@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
+// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
-@import "../node_modules/bee-form-control/src/FormControl.scss";
+// @import "../node_modules/bee-form-control/src/FormControl.scss";
-@import "../node_modules/bee-pagination/src/Pagination.scss";
+// @import "../node_modules/bee-pagination/src/Pagination.scss";
-@import "../node_modules/bee-checkbox/src/Checkbox.scss";
+// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
-@import "../node_modules/bee-select/src/Select.scss";
+// @import "../node_modules/bee-select/src/Select.scss";
 // @import "../node_modules/bee-form/src/Form.scss";
-@import "../node_modules/bee-popover/src/Popover.scss";
+// @import "../node_modules/bee-popover/src/Popover.scss";
-@import "../node_modules/bee-tooltip/src/Tooltip.scss";
+// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
-@import "../node_modules/bee-message/build/Message.css";
+// @import "../node_modules/bee-message/build/Message.css";
-@import "../node_modules/bee-dropdown/build/Dropdown.css";
+// @import "../node_modules/bee-dropdown/build/Dropdown.css";
-@import "../node_modules/bee-input-number/build/InputNumber.css";
+// @import "../node_modules/bee-input-number/build/InputNumber.css";
-@import "../node_modules/bee-modal/build/Modal.css";
+// @import "../node_modules/bee-modal/build/Modal.css";
 @import "../src/Table.scss";
 
 

demo/demolist/Demo0404.js

@@ -9,7 +9,7 @@
 import React, { Component } from 'react';
 import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
 import Table from '../../src';
-import multiSelect from "../../src/lib/multiSelect";
+import multiSelect from "../../src/lib/newMultiSelect";
 import sort from "../../src/lib/sort";
 
 const { Item } = Menu;

demo/demolist/Demo0502.js

@@ -5,7 +5,7 @@
  * demo0502
  */
 import React, { Component } from "react";
-import { Table } from "tinper-bee";
+import Table from "../../src";
 import { Icon, Select, Tooltip } from "tinper-bee";
 const Option = Select.Option;
 
@@ -58,6 +58,7 @@ class StringEditCell extends Component {
             {value === "" ? (
               <Tooltip
                 inverse
+                className="tp-501"
                 placement="bottom"
                 overlay={
                   <div className="help-tip">
@@ -79,7 +80,7 @@ class StringEditCell extends Component {
   }
 }
 
-const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
+const SELECT_SOURCE = ["xx供应商", "yy供应商", "zz供应商", "aa供应商", "bb供应商"];
 
 class SelectEditCell extends Component {
   constructor(props, context) {
@@ -136,11 +137,11 @@ class SelectEditCell extends Component {
 }
 
 const dataSource = [
-  { name: "全能法戒", quality: "远古传奇", level: 70.11 },
+  { name: "NU03910001", quality: "xx供应商", level: 70, key: "1" },
-  { name: "绝命", quality: "太古传奇", level: 70 },
+  { name: "NU03910002", quality: "yy供应商", level: 75, key: "2" },
-  { name: "蚀刻符印", quality: "太古传奇", level: 70 },
+  { name: "NU03910003", quality: "zz供应商", level: 50, key: "3" },
-  { name: "虹光", quality: "传奇", level: 70 },
+  { name: "NU03910004", quality: "aa供应商", level: 70, key: "4" },
-  { name: "复仇者护腕", quality: "传奇", level: 70 }
+  { name: "NU03910005", quality: "bb供应商", level: 60, key: "5" }
 ];
 
 class Demo501 extends Component {
@@ -148,19 +149,19 @@ class Demo501 extends Component {
     super(props);
     this.columns = [
       {
-        title: "装备名称",
+        title: "订单编号",
         dataIndex: "name",
         key: "name",
         render: (text, record, index) => (
           <StringEditCell
             value={text}
-            colName={"装备名称"}
+            colName={"订单编号"}
             onChange={this.onCellChange(index, "name")}
           />
         )
       },
       {
-        title: "品质",
+        title: "供应商名称",
         dataIndex: "quality",
         key: "quality",
         render: (text, record, index) => (
@@ -171,7 +172,7 @@ class Demo501 extends Component {
         )
       },
       {
-        title: "需求等级",
+        title: "采购数量",
         dataIndex: "level",
         key: "level"
       }

demo/demolist/Demo0502.scss

@@ -4,6 +4,7 @@
       border: 1px dashed #A5ADBA;
     }
   }
+
   .require {
     position: absolute;
     top: 2px;
@@ -11,12 +12,17 @@
     font-size: 20px;
   }
 }
+
 .help-tip {
   color: #F44336;
 }
-// .tooltip-arrow {
+
-//   border-bottom-color: #F44336 !important;
+.tp-501 {
-// }
+  .tooltip-arrow {
-// .tooltip-inner {
+    border-bottom-color: #F44336 !important;
-//   border-color: #F44336 !important;
+  }
-// }
+
+  .tooltip-inner {
+    border-color: #F44336 !important;
+  }
+}

docs/api.md

@@ -103,7 +103,8 @@ 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 |
-
+| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
+| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 
 ## mixin
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.0.12",
+ "version": "2.0.13",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -234,9 +234,13 @@ class Table extends Component {
     }
   }
 
-  resize(){
+  resize = ()=>{
     debounce(this.syncFixedTableRowHeight, 150);
     this.computeTableWidth();
+    let renderFlag = this.state.renderFlag;
+    this.setState({
+      renderFlag: !renderFlag
+    });
   }
   computeTableWidth() {
     
@@ -655,6 +659,7 @@ class Table extends Component {
           fixedIndex={fixedIndex+lazyCurrentIndex}
           rootIndex = {rootIndex}
           syncHover = {props.syncHover}
+          bodyDisplayInRow = {props.bodyDisplayInRow}
         />
       );
       this.treeRowIndex++;
@@ -1180,7 +1185,7 @@ class Table extends Component {
   render() {
     const props = this.props;
     const clsPrefix = props.clsPrefix;
-
+    const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
     let className = props.clsPrefix;
     if (props.className) {
       className += ` ${props.className}`;
@@ -1196,6 +1201,12 @@ class Table extends Component {
     if(props.height){
       className += ' fixed-height';
     }
+    if(props.bodyDisplayInRow){
+      className += ' body-dispaly-in-row'
+    }
+    if(props.headerDisplayInRow){
+      className += ' header-dispaly-in-row'
+    }
     const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
       props.scroll.x ||
       props.scroll.y;
@@ -1208,6 +1219,9 @@ class Table extends Component {
     if (props.size) {
       className += ` ${clsPrefix}-${props.size}`;
     }
+    if(hasFixedLeft){
+      className += ` has-fixed-left`;
+    }
 
     return (
       <div className={className} style={props.style} ref={el => this.contentTable = el} 
@@ -1221,7 +1235,7 @@ class Table extends Component {
             {this.getFooter()}
           </div>
 
-          {this.columnManager.isAnyColumnsLeftFixed() &&
+          {hasFixedLeft &&
             <div className={`${clsPrefix}-fixed-left`}>
               {this.getLeftFixedTable()}
             </div>}

src/Table.scss

@@ -10,7 +10,8 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
 // $table-head-background-color: #f7f7f7;
 // $table-head-text-color: #666;
 $vertical-padding: 12px;
-$horizontal-padding: 16px;
+$horizontal-padding: 8px;
+$first-horizontal-padding: 12px;
 // $table-border-color: #e9e9e9;
 
 $table-hover-color: #E7F2FC;
@@ -78,7 +79,9 @@ $icon-color:#505F79;
     tr:last-child{
       border-bottom: 1px solid $table-th-bottom-border;
     }
-   
+    tr>th:last-child{
+      border-right: none; 
+    }
   }
   tr {
     // transition: all 0.3s ease;
@@ -558,6 +561,7 @@ $icon-color:#505F79;
     }
     &-pop-cont-item{
       margin-top: 8px;
+      font-size: 12px;
       // line-height: 30px;
       cursor: pointer;
       .u-checkbox {
@@ -601,6 +605,22 @@ $icon-color:#505F79;
       }
     }
   }
+  .u-table-scroll,.u-table-fixed-left{
+    tr{
+      td:first-child, th:first-child{
+        padding-left: $first-horizontal-padding
+      }
+    }
+  }
+  &.has-fixed-left{
+    .u-table-scroll{
+      tr{
+        td:first-child, th:first-child{
+          padding-left: $horizontal-padding
+        }
+      }
+    }
+  }
 }
 .u-table:focus{
   outline: none;
@@ -906,3 +926,36 @@ $icon-color:#505F79;
 ::-webkit-scrollbar-track-piece {
   display: none;
 }
+
+// 表格显示里面的内容显示在一行
+.header-dispaly-in-row{
+  &.u-table{
+    table{
+      table-layout: fixed;
+    }
+  }
+  th{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+}
+.body-dispaly-in-row{
+  &.u-table{
+    table{
+      table-layout: fixed;
+    }
+    
+  }
+  td{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+}
+.u-table-drag-hidden-cont{
+  position: absolute;
+  top:-1000px;
+}

src/TableCell.js

@@ -30,14 +30,14 @@ class TableCell extends Component{
   }
   render() {
     const { record, indentSize, clsPrefix, indent,
-            index, expandIcon, column ,fixed,showSum} = this.props;
+            index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props;
     const { dataIndex, render } = column;
     let {className = ''} = column;
 
     let text = objectPath.get(record, dataIndex);
     let tdProps;
     let colSpan;
-    let rowSpan;
+    let rowSpan,title;
     
     if (render && !showSum) {
       text = render(text, record, index);
@@ -71,12 +71,16 @@ class TableCell extends Component{
     if(column.textAlign){
       className =  className+` text-${column.textAlign}`;
     }
+    if(typeof text == 'string' && bodyDisplayInRow){
+      title = text
+    }
     return (
       <td
         colSpan={colSpan}
         rowSpan={rowSpan}
         className={className}
         onClick={this.handleClick}
+        title = {title}
       >
         {indentText}
         {expandIcon}

src/TableHeader.js

@@ -11,6 +11,14 @@ const propTypes = {
   rows: PropTypes.array
 };
 
+
+function getDiv(id){
+  let div = document.createElement("div");
+  div.className = "u-table-drag-hidden-cont";
+  div.id = id;
+  return div;
+}
+
 class TableHeader extends Component {
   constructor(props) {
     super(props);
@@ -28,64 +36,17 @@ class TableHeader extends Component {
     contentWidthDiff: 0
   };
 
-  /**
-   *
-   * 动态绑定th line 事件方法
-   * @param {*} events
-   * @param {*} type  type 为false 为增加事件
-   * @param {*} eventSource 为false 给 th 内部的div增加事件
-   * @memberof TableHeader
-   */
-  thEventListen(events,type,eventSource){
-    let {ths,cols} = this.table;
-    for (let index = 0; index < ths.length; index++) {
-      const element = ths[index];//.getAttribute('data-type');
-      if(!element.getAttribute('data-th-fixed')){
-        let colLine =  null;
-        if(element.children.length === 0){
-          colLine = element;
-        }else if(element.children.length > 0){
-          colLine = element.lastElementChild;
-        }else if(element.children.length === 1){
-          colLine = element.children[0];
-        }
-        // const colLine =  element.children.length > 1?element.lastElementChild:element.children[0];
-        for (let i = 0; i < events.length; i++) {
-          const _event = events[i];
-          let _dataSource = eventSource?element:colLine;
-          if(type === "remove"){
-            EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
-          }else{
-            EventUtil.addHandler(_dataSource,_event.key,_event.fun);
-          }
-        }
-      }
-    }
-  }
-
- 
-  /**
-   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
-   * @param {*} events
-   * @param {*} type
-   * @memberof TableHeader
-   */
-  bodyEventListen(events,type){
-    for (let i = 0; i < events.length; i++) {
-      const _event = events[i];
-      if(type == "remove"){
-        EventUtil.removeHandler(document.body,_event.key,_event.fun);
-      }else{
-        EventUtil.addHandler(document.body,_event.key,_event.fun);
-      }
-    }
-  }
-
   componentDidUpdate(){
     this.initTable();
     this.initEvent();
   }
 
+  componentDidMount(){
+    let uid = "_table_uid_"+new Date().getTime();
+    this._table_none_cont_id = uid;
+    let div = getDiv(uid);
+    document.querySelector("body").appendChild(div);
+  }
 
   componentWillUnmount(){
     if(!this.table)return;
@@ -95,46 +56,7 @@ class TableHeader extends Component {
     if(this.props.dragborder){
       this.removeDragBorderEvent();
     }
-  }
+    this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
-
-  // componentDidMount(){
-    // this.initTable();
-    // this.initEvent();
-  // } 
-  
-  /**
-   * 初始化拖拽列宽的事件处理
-   * @returns
-   * @memberof TableHeader
-   */
-  initEvent(){
-    let  events = [
-      {key:'mouseup', fun:this.onLineMouseUp},
-      {key:'mousemove', fun:this.onLineMouseMove}
-    ];
-
-    if(this.props.dragborder){
-      this.thEventListen(events,'',true);//表示把事件添加到th元素上
-      this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
-      this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
-    }
-    if(!this.props.draggable)return;
-    //拖拽交换列事件
-    this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
-  }
-
-  /**
-   * 移除当前全局事件对象
-   * @memberof TableHeader
-   */
-  removeDragBorderEvent(){
-    let  events = [
-      {key:'mouseup', fun:this.onLineMouseUp},
-      {key:'mousemove', fun:this.onLineMouseMove}
-    ];
-    this.thEventListen(events,'remove',true);//表示把事件添加到th元素上
-    this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}],'remove');//表示把事件添加到竖线
-    this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}],'remove');
   }
 
   /**
@@ -145,13 +67,13 @@ class TableHeader extends Component {
   initTable(){
     const {contentTable} = this.props;
     if(!this.props.dragborder && !this.props.draggable)return;
-    // let el = ReactDOM.findDOMNode(this);
     let tableDome = this._thead.parentNode;
     let table = {};
     if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
       table.table = tableDome;
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
+      table.tr = tableDome.getElementsByTagName("tr");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@@ -161,7 +83,6 @@ class TableHeader extends Component {
     table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
     table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
     
-  
     this.table = table;
 
     if(!this.props.dragborder)return;
@@ -177,48 +98,130 @@ class TableHeader extends Component {
       }
     }
   }
+
+  /**
+   * 事件初始化
+   */
+  initEvent(){
+    this.dragBorderEventInit();//列宽
+    this.dragAbleEventInit();//交换列
+    if(this.table && this.table.tr){
+      this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
+    }
+    this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
+  }
+
+  /**
+   * 拖拽列宽事件的监听
+   */
+  dragBorderEventInit (){
+    if(!this.props.dragborder )return;
+    let  events = [
+      {key:'mouseup', fun:this.onTrMouseUp},
+      {key:'mousemove', fun:this.onTrMouseMove},
+      // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
+    ];
+    this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
+  }
+
+  /**
+   * 删除拖动改变列宽的事件监听
+   */
+  removeDragBorderEvent(){
+    let  events = [
+      {key:'mouseup', fun:this.onTrMouseUp},
+      {key:'mousemove', fun:this.onTrMouseMove},
+    ];
+    this.eventListen(events,'remove',this.table.tr[0]);
+  }
+
+
+
+  eventListen(events,type,eventSource){
+    if(!this.table)return;
+    let {tr} = this.table;
+    for (let i = 0; i < events.length; i++) {
+      const _event = events[i];
+      if(type === "remove"){
+        EventUtil.removeHandler(eventSource,_event.key,_event.fun);
+      }else{
+        EventUtil.addHandler(eventSource,_event.key,_event.fun);
+      }
+    }
+  }
+
   /**
-   *相关滚动条联动操作
    *
+   *根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
    * @memberof TableHeader
    */
-  optTableMargin =(table,scrollbarWidth)=>{
+  getOnLineObject = (_element) =>{
-    if(table){
+    let type = _element.getAttribute('data-type'),elementObj = null;
-      table.style.marginBottom = scrollbarWidth + "px"
+    if(!type){
+      let element = _element.parentElement||parentNode;//兼容写法。
+      if(element.getAttribute('data-type')){
+        elementObj = element;
       }
+    }else{
+      elementObj = _element;
+    }
+    return elementObj;
   }
 
-  optTableScroll = (table,overflow ={})=>{
+    /**
-    if(table){
+   * 调整列宽的down事件
-      const innerTable = table.querySelector('.u-table-body-inner');
+   * @memberof TableHeader
-      if(innerTable){
+   */
-        overflow.x && (innerTable.style.overflowX = overflow.x);
+  onTrMouseDown = (e) => {
-        overflow.y && (innerTable.style.overflowY = overflow.y);
+    Event.stopPropagation(e); 
+    let event = Event.getEvent(e) ,
+    targetEvent = Event.getTarget(event);
+    const { clsPrefix, contentTable } = this.props;
+    let currentElement = this.getOnLineObject(targetEvent);
+    if(!currentElement)return;
+    let type = currentElement.getAttribute('data-type');
+    if(!this.props.dragborder && !this.props.draggable)return;
+    if(type == 'online' && this.props.dragborder){
+      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 currentObj = this.table.cols[currentIndex];
+      this.drag.option = "border";//拖拽操作
+      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);
+    }else if(type != 'online' &&  this.props.draggable){
+        if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
+        targetEvent.setAttribute('draggable',true);//添加交换列效果
+        this.drag.option = 'dragAble';
+        this.currentDome = event.target;
+        let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+        this.drag.currIndex = currentIndex;
+    }else{
+      // console.log("onTrMouseDown dragborder or draggable is all false !");
+      return ;
     }
-     
+  };
-    }
-  }
-
-
-
  
   /**
    * 调整列宽的move事件
    * @memberof TableHeader
    */
-  onLineMouseMove = (e) => {
+  onTrMouseMove = (e) => {
+    if(!this.props.dragborder && !this.props.draggable)return;
     const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);  
-      if (!this.props.dragborder) return;
+    if(this.props.dragborder && this.drag.option == "border"){
-      if(this.drag.option != "border"){
-        return false;
-      }
       //移动改变宽度
       let currentCols = this.table.cols[this.drag.currIndex];
       let diff = (event.x - this.drag.oldLeft); 
       let newWidth = this.drag.oldWidth + diff;
       this.drag.newWidth = newWidth;
+
        // if(newWidth > this.drag.minWidth){
       if(newWidth > this.minWidth){
         currentCols.style.width = newWidth +'px';
@@ -228,7 +231,9 @@ class TableHeader extends Component {
         }
         const newTableWidth = this.drag.tableWidth + diff +'px';
         this.table.table.style.width  = newTableWidth;//改变table的width
+        if(this.table.innerTableBody){//TODO 后续需要处理此处
           this.table.innerTableBody.style.width  = newTableWidth ;
+        }
         let showScroll =  contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
     
         //表头滚动条处理
@@ -259,48 +264,27 @@ class TableHeader extends Component {
                 this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
           }
         }
-        
       } 
-  };
+    }else if(this.props.draggable && this.drag.option == "draggable"){
-
+      // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
-  /**
+    }else{
-   * 调整列宽的down事件
+      // console.log("onTrMouseMove dragborder or draggable is all false !");
-   * @memberof TableHeader
+    }
-   */
+  }
-  onLineMouseDown = (e) => {
-    Event.stopPropagation(e); 
-    let event = Event.getEvent(e);
-    const { clsPrefix, contentTable } = this.props;
-    if (!this.props.dragborder) return;
-    let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
-    let defaultWidth = Event.getTarget(event).getAttribute("data-th-width");
-    let currentObj = this.table.cols[currentIndex];
-    this.drag.option = "border";//拖拽操作
-    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);
-  };
 
     /**
    * 调整列宽的up事件
    * @memberof TableHeader
    */
-  onLineMouseUp = (event) => {
+  onTrMouseUp = (e) => {
+    let event = Event.getEvent(e);  
     let width = this.drag.newWidth;
-    this.clearDragBorder(event);
+    this.mouseClear();
     this.props.onDropBorder && this.props.onDropBorder(event,width);
   };
 
-  /**
-   * 调整列宽到区域以外的up事件
-   */
-  bodyonLineMouseMove = (event) => {
-    this.clearDragBorder(event);
-  };
 
-  clearDragBorder(){
+  mouseClear(){ 
     if(!this.drag || !this.drag.option)return;
     let {rows} = this.props;
     let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
@@ -308,54 +292,66 @@ class TableHeader extends Component {
     this.drag = {
       option:""
     };
-    if (this.props.draggable){
+    this.clearThsDr();
-      this.removeDragAbleEvent();
-    }
   }
 
-  //---拖拽列宽代码逻辑----start-----
+  clearThsDr =()=>{
+    let ths = this.table.ths;
+    for (let index = 0; index < ths.length; index++) {
+      ths[index].setAttribute('draggable',false);//去掉交换列效果
+    }
+  }
 
     /**
-   * 调整交换列down事件
+   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+   * @param {*} events
+   * @param {*} type
    * @memberof TableHeader
    */
-  dragAbleMouseDown = (e) => {
+  bodyonLineMouseUp = (events,type) =>{
-    // Event.stopPropagation(e); 
+    if(!this.drag || !this.drag.option)return;
-    let event = Event.getEvent(e);
+    this.mouseClear();
-    if (!this.props.draggable) return;
-    let th = this.getThDome(event.target);
-    if(!th)return;
-    event.target.setAttribute('draggable',true);//添加交换列效果
-    this.drag.option = 'dragAble';
-    this.currentDome = event.target;
-
-    this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'',true);//th
-    this.removeDragBorderEvent();//清理掉拖拽列宽的事件
-    this.addDragAbleEvent(); //添加拖拽交换列的事件
   }
+
+
   /**
-   * 调整交换列up事件
+   *相关滚动条联动操作
+   *
    * @memberof TableHeader
    */
-  dragAbleMouseUp = (e) => {
+  optTableMargin =(table,scrollbarWidth)=>{
-    this.currentDome.setAttribute('draggable',false);//添加交换列效果
+    if(table){
-    this.removeDragAbleEvent();
+      table.style.marginBottom = scrollbarWidth + "px"
-    this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'remove',true);//th
+    }
-    //拖拽交换列事件
-    this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
-    this.initEvent();
   }
 
+  optTableScroll = (table,overflow ={})=>{
+    if(table){
+      const innerTable = table.querySelector('.u-table-body-inner');
+      if(innerTable){
+        overflow.x && (innerTable.style.overflowX = overflow.x);
+        overflow.y && (innerTable.style.overflowY = overflow.y);
+      }
+     
+    }
+  }
+
+  //---拖拽交换列代码----start-----
   /**
    * 添加换列的事件监听
    */
-  addDragAbleEvent (){
+  dragAbleEventInit (){
+    if (!this.props.draggable) return;
     let  events = [
       {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
       {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
       {key:'drop', fun:this.onDrop},        //在一个拖动过程中，释放鼠标键时触发此事件 
+
+      {key:'dragenter', fun:this.onDragEnter},  
+      {key:'dragend', fun:this.onDragEnd},
+      {key:'dragleave', fun:this.onDragLeave},
     ];
-    this.thEventListen(events,'',true);
+    this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
   }
 
   /**
@@ -366,27 +362,39 @@ class TableHeader extends Component {
       {key:'dragstart',fun:this.onDragStart},
       {key:'dragover', fun:this.onDragOver},
       {key:'drop', fun:this.onDrop},
-      {key:'dragenter', fun:this.onDragEnter}
+      {key:'dragenter', fun:this.onDragEnter},  
+      {key:'dragend', fun:this.onDragEnd},
+      {key:'dragleave', fun:this.onDragLeave},
     ];
-    this.thEventListen(events,'remove',true);
+    this.eventListen(events,'remove',this.table.tr[0]);
   }
 
   /**
    * 开始调整交换列的事件
    */
   onDragStart = (e) => {
-    let event = Event.getEvent(e);
     if (!this.props.draggable) return;
-    if(this.drag.option === 'border'){return;}
+    if(this.drag && this.drag.option != 'dragAble'){return;} 
-    let th = this.getThDome(event.target);
+    let event = Event.getEvent(e) ,
-    if(!th)return;
+    target = Event.getTarget(event);
-    let currentIndex = parseInt(th.getAttribute("data-line-index"));
+
+    let currentIndex = parseInt(target.getAttribute("data-line-index"));
+    let currentKey = target.getAttribute('data-line-key');
+
+    if(event.dataTransfer.setDragImage){
+      var crt = target.cloneNode(true);
+      crt.style.backgroundColor = "#ebecf0";
+      crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
+      crt.style.height = "40px";
+      // crt.style['line-height'] = "40px";
+      // document.body.appendChild(crt);
+      document.getElementById(this._table_none_cont_id).appendChild(crt);
+      event.dataTransfer.setDragImage(crt, 0, 0);
+    }
 
-    let currentKey = event.target.getAttribute('data-line-key');
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("Text", currentKey);
     this.currentObj = this.props.rows[0][currentIndex];
-    // event.dataTransfer.setDragImage(event.target, 0, 0);
   };
 
   onDragOver = (e) => {
@@ -399,14 +407,53 @@ class TableHeader extends Component {
    */
   onDrop = (e) => {
     if (!this.props.draggable) return;
-    if(this.drag.option === 'border'){return;}
+    if(this.drag && this.drag.option != 'dragAble'){return;}
+    let event = Event.getEvent(e) ,
+    target = Event.getTarget(event);
     this.currentDome.setAttribute('draggable',false);//添加交换列效果
-    let data = this.getCurrentEventData(e);
+  };
+
+
+  onDragEnter = (e) => {
+    let event = Event.getEvent(e) ,
+    target = Event.getTarget(event);
+    this._dragCurrent = target;
+    let currentIndex = target.getAttribute("data-line-index");
+    if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
+    if(target.nodeName.toUpperCase() === "TH"){
+      // target.style.border = "2px dashed rgba(5,0,0,0.25)";
+      target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
+      // target.style.backgroundColor = 'rgb(235, 236, 240)';
+    }
+  }
+
+  onDragEnd = (e) => {
+    let event = Event.getEvent(e) ,
+    target = Event.getTarget(event);
+    this._dragCurrent.setAttribute("style","");
+    // this._dragCurrent.style = "";
+    document.getElementById(this._table_none_cont_id).innerHTML = "";
+    
+    let data = this.getCurrentEventData(this._dragCurrent);
     if(!data)return;
     if (!this.currentObj || this.currentObj.key == data.key) return;
     if(!this.props.onDrop)return;
     this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
-  };
+  }
+
+
+  onDragLeave = (e) => {
+    let event = Event.getEvent(e) ,
+    target = Event.getTarget(event);
+    let currentIndex = target.getAttribute("data-line-index");
+    if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
+    if(target.nodeName.toUpperCase() === "TH"){
+      target.setAttribute("style","");
+      // this._dragCurrent.style = "";
+    }
+  }
+  
+
  
   /**
    * 获取当前th上的对象数据
@@ -414,9 +461,7 @@ class TableHeader extends Component {
    * @returns
    * @memberof TableHeader
    */
-  getCurrentEventData(e){
+  getCurrentEventData(th){
-    let event = Event.getEvent(e);
-    let th = this.getThDome(event.target)
     if(!th){
       console.log(" event target is not th ! ");
       return null;
@@ -430,24 +475,6 @@ class TableHeader extends Component {
       return null;
     }
   }
-
-  /**
-   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
-   * @param {*} element
-   * @returns  <th />对象
-   * @memberof TableHeader
-   */
-  getThDome(element){
-    let _tagName = element.tagName.toLowerCase();
-    if(element.getAttribute('data-filter-type') === 'filterContext')return null;
-    if(_tagName === 'i')return null;
-    if(_tagName != 'th'){
-      return this.getThDome(element.parentElement);
-    }else{
-      return element;
-    }
-  }
-
 //---拖拽列交换----end----- 
 
   /**
@@ -593,8 +620,9 @@ class TableHeader extends Component {
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
     return (
       <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
-        {rows.map((row, index) => (
+        {rows.map((row, index) => {
-          <tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
+          let _rowLeng = (row.length-1);
+          return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
             {row.map((da, columIndex, arr) => {
               let thHover = da.drgHover
                 ? ` ${clsPrefix}-thead th-drag-hover`
@@ -642,17 +670,15 @@ class TableHeader extends Component {
                 thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
               }
               thClassName += ` ${fixedStyle}`;
-                 
+              if(!da.fixed ){
-                if(!da.fixed){
+                  return (<th {...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">
-                  return (<th {...da}  {...keyTemp} className={thClassName} data-th-fixed={da.fixed} 
-                        data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
                       {da.children}
                       {
-                                dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key} 
+                        dragborder && columIndex != _rowLeng? <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 id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
+                        <div className='online' /></div>:""
                       }
                 </th>)
               }else{
@@ -665,7 +691,7 @@ class TableHeader extends Component {
               }
             })}
           </tr>
-        ))}
+        )})}
       </thead>
     );
   }

src/TableRow.js

@@ -164,7 +164,7 @@ class TableRow extends Component{
     const {
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
+      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -215,6 +215,7 @@ class TableRow extends Component{
           fixed= {fixed}
           showSum={showSum}
           expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
+          bodyDisplayInRow =  {bodyDisplayInRow}
         />
       );
     }

src/lib/dragColumn.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import {compare,ObjectAssign} from './util'; 
-let cloneDeep = require('lodash.clonedeep');
 /**
  * 参数: 列拖拽
  * @param {*} Table
@@ -33,14 +32,6 @@ export default function dragColumn(Table) {
       return _column; 
     }
 
-   cloneDeep(obj){
-        if( typeof obj !== 'object' || Object.keys(obj).length === 0 ){
-            return obj
-        }
-        let resultData = {}
-        return this.recursion(obj, resultData)
-    }
-
     recursion(obj, data={}){
         for(key in obj){
             if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
@@ -59,15 +50,6 @@ export default function dragColumn(Table) {
        
       sourceIndex =  columns.findIndex((da,i)=>da.key == dragSource.key);
       targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
-      // for (let index = 0; index < columns.length; index++) {
-      //   const da = columns[index];
-      //   if(da.key === dragSource.key){
-      //     columns[index] = dragTargColum; 
-      //   }
-      //   if(da.key === dragTarg.key){
-      //     columns[index] = dragSourceColum;
-      //   }
-      // }
       // 向前移动
      if(targetIndex < sourceIndex){
       targetIndex = targetIndex + 1;
@@ -77,9 +59,18 @@ export default function dragColumn(Table) {
         0,
        columns.splice(sourceIndex, 1)[0]
       );
-      this.setState({
+      let _newColumns = [];
-        columns:cloneDeep(columns)
+      columns.forEach((da,i)=>{
+        let newDate = Object.assign(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);
       }
@@ -102,7 +93,6 @@ export default function dragColumn(Table) {
           onDrop,
           ...others
       } = this.props;
-      let key = new Date().getTime();
       return (
           <Table
               {...others}
@@ -115,8 +105,6 @@ export default function dragColumn(Table) {
               onDragEnter={this.onDragEnter}
               draggable={draggable}
               dragborder={dragborder}
-              // dragborder={false}
-              dragborderKey={key}
           />)
     }
   };

src/lib/filterColumn.js

@@ -108,9 +108,10 @@ export default function filterColumn(Table, Popover) {
               key={da.key + "_" + i}
               className={`${prefixCls}-pop-cont-item`}
             >
-            <Checkbox {...paramObj}/>
+            <Checkbox {...paramObj}>
             
               <span>{da.title}</span>
+            </Checkbox>
             </div>
           );
         

src/lib/multiSelect.js

@@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
           key: "checkbox",
           dataIndex: "checkbox",
          fixed:"left",
-          width: 60, 
+          width: 50, 
           render: (text, record, index) => {
             let attr = {};
             record._disabled?attr.disabled = record._disabled:"";

src/lib/newMultiSelect.js

@@ -1,133 +1,5 @@
-import React, { Component } from "react";
+import  multiSelect from './multiSelect';
-import {ObjectAssign} from './util';
-/**
- * 参数: 过滤表头
- * @param {*} Table
- * @param {*} Checkbox
- * @param {*} Popover
- * @param {*} Icon
- */
 
 export default function newMultiSelect(Table, Checkbox) {
-
+  return multiSelect(Table, Checkbox);
-  return class NewMultiSelect extends Component {
-    static defaultProps = {
-      prefixCls: "u-table-mult-select"
-    }
-
-    constructor(props) {
-      super(props);
-      let checkedAll = this.setChecked(props.data);
-      this.state = {
-        checkedAll,
-        data:ObjectAssign(props.data),
-      }
-    }
-
-    componentWillReceiveProps(nextProps){
-      if(this.props.data != nextProps.data){
-        this.setState({
-          data:ObjectAssign(nextProps.data),
-          checkedAll:this.setChecked(nextProps.data),
-        })
-      }
-    }
-
-    setChecked(data){
-      let allCheck = true;
-      if(data){
-        for (const da of data) {
-          if(!da._checked){
-            allCheck = false;
-            break;
-          }
-        }
-      }
-      return allCheck;
-    }
-
-    onAllCheckChange=()=>{
-      let {data,checkedAll} = this.state;
-      let selectList = [];
-      let check = checkedAll?false:true;
-      data.forEach(item => {
-        item._checked = check;
-        if(item._checked){
-          selectList.push(item);
-        }
-      });
-      this.setState({
-        checkedAll:check
-      });
-      this.props.getSelectedDataFunc(selectList);
-    }
-
-    handleClick=()=>{
-      
-    }
- 
-    onCheckboxChange = (text, record, index) => () => {
-      let {data} = this.state;
-      let selectList = [];
-      record._checked = record._checked?false:true;
-      let checkedAll = true;
-      for(let i=0;i<data.length;i++){
-        let item = data[i];
-        if(!item._checked || item._checked == false){
-          checkedAll = false;
-          break;
-        }
-      }
-      this.setState({
-        ...this.state,
-        checkedAll
-      })
-      data.forEach((da)=>{
-        if(da._checked){
-          selectList.push(da);
-        }
-      })
-      this.props.getSelectedDataFunc(selectList,record,index);
-    };
-
-    
-
-    getDefaultColumns=(columns)=>{
-      // let checkedAll = init?false:this.state.checkedAll;
-      let {checkedAll} = this.state;
-      let _defaultColumns =[{
-          title: (
-            <Checkbox
-              className="table-checkbox"
-              checked={checkedAll}
-              // indeterminate={indeterminate_bool && !this.state.checkedAll}
-              onChange={this.onAllCheckChange}
-            />
-          ),
-          key: "checkbox",
-          dataIndex: "checkbox",
-          fixed:"left",
-          width: 50,
-          render: (text, record, index) => {
-            let attr = {};
-            record._disabled?attr.disabled = record._disabled:"";
-            return <Checkbox
-                key={index}
-                className="table-checkbox"
-                {...attr}
-                checked={record._checked}
-                onClick={this.handleClick}
-                onChange={this.onCheckboxChange(text, record, index)}
-              ></Checkbox>
-          }
-        }]
-        return _defaultColumns.concat(columns);
-    }
-
-    render() {
-      const {columns} = this.props;
-      const {data} = this.state;
-      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
-    }
-  };
 }