merge

README.md

@@ -16,13 +16,15 @@ react bee-table component for tinper-bee
   * 多选
   * 主子表
   * 固定表头
-  * 交互列
+  * 拖拽表头进行列交换
-  * 列拖拽
+  * 拖拽调整列宽度
   * 嵌套子表格
   * 行、列合并
   
 具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
 
+<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
+
 ## 安装
 
 [![bee-table](https://nodei.co/npm/bee-table.png)](https://npmjs.org/package/bee-table)
@@ -217,7 +219,8 @@ import multiSelect from "bee-table/lib/multiSelect.js";
 
 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
-| draggable | 当前表格可拖拽 | boolean | false |
+| draggable | 可拖拽交换列 | boolean | false |
+| dragborder | 可拖拽改变列宽 | boolean | false |
 | checkMinSize | 当前表格显示最少列数 | boolean | false |
 
  

build/Table.css

@@ -330,7 +330,16 @@
     .u-table-thead .filter-wrap .filter-btns {
       min-width: 58px; }
   .u-table-thead th {
-    background: #f7f7f7; }
+    background: #f7f7f7;
+    background-clip: padding-box;
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    /*
+        Introduced in IE 10. 
+      */
+    -ms-user-select: none;
+    user-select: none; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;

build/TableHeader.js

@@ -18,10 +18,6 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _shallowequal = require("shallowequal");
-
-var _shallowequal2 = _interopRequireDefault(_shallowequal);
-
 var _throttleDebounce = require("throttle-debounce");
 
 var _utils = require("./utils");
@@ -127,7 +123,6 @@ var TableHeader = function (_Component) {
     };
 
     _this.onLineMouseUp = function (event) {
-
       _this.clearDragBorder(event);
     };
 
@@ -173,7 +168,7 @@ var TableHeader = function (_Component) {
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", currentKey);
       _this.currentObj = _this.props.rows[0][currentIndex];
-      event.dataTransfer.setDragImage(event.target, 0, 0);
+      // event.dataTransfer.setDragImage(event.target, 0, 0);
     };
 
     _this.onDragOver = function (e) {
@@ -324,13 +319,17 @@ var TableHeader = function (_Component) {
     };
     _this.minWidth = 80; //确定最小宽度就是80
     _this.table = null;
+    _this._thead = null; //当前对象
     return _this;
   }
 
   /**
-   * 动态绑定th line 事件
+   *
-   * type 为false 为增加事件
+   * 动态绑定th line 事件方法
-   * eventSource 为false 给 th 内部的div增加事件
+   * @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,
@@ -362,6 +361,14 @@ var TableHeader = function (_Component) {
     }
   };
 
+  /**
+   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+   * @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];
@@ -378,13 +385,15 @@ var TableHeader = function (_Component) {
     this.initEvent();
   };
 
-  TableHeader.prototype.componentDidMount = function componentDidMount() {
+  // componentDidMount(){
-    this.initTable();
+  // this.initTable();
-    this.initEvent();
+  // this.initEvent();
-  };
+  // } 
 
   /**
-   * 拖拽列宽的事件处理
+   * 初始化拖拽列宽的事件处理
+   * @returns
+   * @memberof TableHeader
    */
 
 
@@ -402,7 +411,8 @@ var TableHeader = function (_Component) {
   };
 
   /**
-   * 移除拖拽宽度的事件
+   * 移除当前全局事件对象
+   * @memberof TableHeader
    */
 
 
@@ -415,13 +425,15 @@ var TableHeader = function (_Component) {
 
   /**
    * 获取table的属性存放在this.table 中。(公用方法)
+   * @returns
+   * @memberof TableHeader
    */
 
 
   TableHeader.prototype.initTable = function initTable() {
     if (!this.props.dragborder && !this.props.draggable) return;
-    var el = _reactDom2["default"].findDOMNode(this);
+    // let el = ReactDOM.findDOMNode(this);
-    var tableDome = el.parentNode;
+    var tableDome = this._thead.parentNode;
     var table = {};
     if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
       table.table = tableDome;
@@ -445,11 +457,30 @@ var TableHeader = function (_Component) {
     }
   };
 
-  //---拖拽列宽代码逻辑----start-----
+  /**
+   * 调整列宽的move事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽的down事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽的up事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽到区域以外的up事件
+   */
 
 
   TableHeader.prototype.clearDragBorder = function clearDragBorder() {
-    // if (!this.props.dragborder || !this.props.draggable) return;
     if (!this.drag || !this.drag.option) return;
     var rows = this.props.rows;
 
@@ -466,31 +497,40 @@ var TableHeader = function (_Component) {
   //---拖拽列宽代码逻辑----start-----
 
   /**
-   * 拖拽交换列的事件处理
+   * 调整交换列down事件
+   * @memberof TableHeader
+   */
+
+  /**
+   * 调整交换列up事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 添加换列的事件监听
    */
   TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
     var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
     { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
     { key: 'drop', fun: this.onDrop }];
     this.thEventListen(events, '', true);
-    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
   };
 
+  /**
+   * 删除换列的事件监听
+   */
+
+
   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 }];
     this.thEventListen(events, 'remove', true);
   };
 
   /**
-   * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
+   * 开始调整交换列的事件
-   * @memberof TableHeader
    */
-  // onDragEnter = (e) => { 
+
-  //   if (!this.props.draggable) return;
-  //   if(this.drag.option === 'border'){return;}
-  //   let data = this.getCurrentEventData(e);
-  //   if (!this.currentObj || this.currentObj.key == data.key) return;
-  // }; 
 
   /**
    * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@@ -498,6 +538,12 @@ var TableHeader = function (_Component) {
    */
 
 
+  /**
+   * 获取当前th上的对象数据
+   * @param {*} e
+   * @returns
+   * @memberof TableHeader
+   */
   TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
     var event = _utils.Event.getEvent(e);
     var th = this.getThDome(event.target);
@@ -518,9 +564,9 @@ var TableHeader = function (_Component) {
   };
 
   /**
-   *根据拖拽，获取当前的Th属性
+   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
    * @param {*} element
-   * @returns
+   * @returns  <th />对象
    * @memberof TableHeader
    */
 
@@ -559,28 +605,21 @@ var TableHeader = function (_Component) {
     var _props = this.props,
         clsPrefix = _props.clsPrefix,
         rowStyle = _props.rowStyle,
-        onDragStart = _props.onDragStart,
-        onDragOver = _props.onDragOver,
-        onDrop = _props.onDrop,
         draggable = _props.draggable,
         dragborder = _props.dragborder,
         rows = _props.rows,
         filterable = _props.filterable,
-        onFilterRowsChange = _props.onFilterRowsChange,
-        onMouseDown = _props.onMouseDown,
-        onMouseMove = _props.onMouseMove,
-        onMouseUp = _props.onMouseUp,
-        onMouseOut = _props.onMouseOut,
-        contentWidthDiff = _props.contentWidthDiff,
         fixed = _props.fixed,
-        lastShowIndex = _props.lastShowIndex,
+        lastShowIndex = _props.lastShowIndex;
-        contentTable = _props.contentTable;
+
 
     var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
 
     return _react2["default"].createElement(
       "thead",
-      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
+      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
+          return _this2._thead = _thead;
+        } }),
       rows.map(function (row, index) {
         return _react2["default"].createElement(
           "tr",
@@ -653,6 +692,5 @@ TableHeader.defaultProps = {
 
 
 TableHeader.propTypes = propTypes;
-
 exports["default"] = TableHeader;
 module.exports = exports["default"];

build/utils.js

@@ -197,17 +197,18 @@ function getColChildrenLength(columns, chilrenLen) {
 }
 
 function addHandler(element, type, handler) {
-
+  var event = null;
   if (element.addEventListener) {
     //检测是否为DOM2级方法
-    element.addEventListener(type, handler, false);
+    event = element.addEventListener(type, handler, false);
   } else if (element.attachEvent) {
     //检测是否为IE级方法
-    element.attachEvent("on" + type, handler);
+    event = element.attachEvent("on" + type, handler);
   } else {
     //检测是否为DOM0级方法
-    element["on" + type] = handler;
+    event = element["on" + type] = handler;
   }
+  return event;
 }
 
 function removeHandler(element, type, handler) {

dist/demo.css

@@ -8597,7 +8597,15 @@ ul {
     .u-table-thead .filter-wrap .filter-btns {
       min-width: 58px; }
   .u-table-thead th {
-    background: #f7f7f7; }
+    background: #f7f7f7;
+    background-clip: padding-box;
+    -moz-user-select: -moz-none;
+    -webkit-user-select: none;
+    /*
+        Introduced in IE 10. 
+      */
+    -ms-user-select: none;
+    user-select: none; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;

dist/demo.js

@@ -12625,10 +12625,6 @@
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
-	var _shallowequal = __webpack_require__(110);
-	
-	var _shallowequal2 = _interopRequireDefault(_shallowequal);
-	
 	var _throttleDebounce = __webpack_require__(112);
 	
 	var _utils = __webpack_require__(113);
@@ -12734,7 +12730,6 @@
 	    };
 	
 	    _this.onLineMouseUp = function (event) {
-	
 	      _this.clearDragBorder(event);
 	    };
 	
@@ -12780,7 +12775,7 @@
 	      event.dataTransfer.effectAllowed = "move";
 	      event.dataTransfer.setData("Text", currentKey);
 	      _this.currentObj = _this.props.rows[0][currentIndex];
-	      event.dataTransfer.setDragImage(event.target, 0, 0);
+	      // event.dataTransfer.setDragImage(event.target, 0, 0);
 	    };
 	
 	    _this.onDragOver = function (e) {
@@ -12931,13 +12926,17 @@
 	    };
 	    _this.minWidth = 80; //确定最小宽度就是80
 	    _this.table = null;
+	    _this._thead = null; //当前对象
 	    return _this;
 	  }
 	
 	  /**
-	   * 动态绑定th line 事件
+	   *
-	   * type 为false 为增加事件
+	   * 动态绑定th line 事件方法
-	   * eventSource 为false 给 th 内部的div增加事件
+	   * @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,
@@ -12969,6 +12968,14 @@
 	    }
 	  };
 	
+	  /**
+	   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+	   * @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];
@@ -12985,13 +12992,15 @@
 	    this.initEvent();
 	  };
 	
-	  TableHeader.prototype.componentDidMount = function componentDidMount() {
+	  // componentDidMount(){
-	    this.initTable();
+	  // this.initTable();
-	    this.initEvent();
+	  // this.initEvent();
-	  };
+	  // } 
 	
 	  /**
-	   * 拖拽列宽的事件处理
+	   * 初始化拖拽列宽的事件处理
+	   * @returns
+	   * @memberof TableHeader
 	   */
 	
 	
@@ -13009,7 +13018,8 @@
 	  };
 	
 	  /**
-	   * 移除拖拽宽度的事件
+	   * 移除当前全局事件对象
+	   * @memberof TableHeader
 	   */
 	
 	
@@ -13022,13 +13032,15 @@
 	
 	  /**
 	   * 获取table的属性存放在this.table 中。(公用方法)
+	   * @returns
+	   * @memberof TableHeader
 	   */
 	
 	
 	  TableHeader.prototype.initTable = function initTable() {
 	    if (!this.props.dragborder && !this.props.draggable) return;
-	    var el = _reactDom2["default"].findDOMNode(this);
+	    // let el = ReactDOM.findDOMNode(this);
-	    var tableDome = el.parentNode;
+	    var tableDome = this._thead.parentNode;
 	    var table = {};
 	    if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
 	      table.table = tableDome;
@@ -13052,11 +13064,30 @@
 	    }
 	  };
 	
-	  //---拖拽列宽代码逻辑----start-----
+	  /**
+	   * 调整列宽的move事件
+	   * @memberof TableHeader
+	   */
+	
+	
+	  /**
+	   * 调整列宽的down事件
+	   * @memberof TableHeader
+	   */
+	
+	
+	  /**
+	   * 调整列宽的up事件
+	   * @memberof TableHeader
+	   */
+	
+	
+	  /**
+	   * 调整列宽到区域以外的up事件
+	   */
 	
 	
 	  TableHeader.prototype.clearDragBorder = function clearDragBorder() {
-	    // if (!this.props.dragborder || !this.props.draggable) return;
 	    if (!this.drag || !this.drag.option) return;
 	    var rows = this.props.rows;
 	
@@ -13073,31 +13104,40 @@
 	  //---拖拽列宽代码逻辑----start-----
 	
 	  /**
-	   * 拖拽交换列的事件处理
+	   * 调整交换列down事件
+	   * @memberof TableHeader
+	   */
+	
+	  /**
+	   * 调整交换列up事件
+	   * @memberof TableHeader
+	   */
+	
+	
+	  /**
+	   * 添加换列的事件监听
 	   */
 	  TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
 	    var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
 	    { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
 	    { key: 'drop', fun: this.onDrop }];
 	    this.thEventListen(events, '', true);
-	    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
 	  };
 	
+	  /**
+	   * 删除换列的事件监听
+	   */
+	
+	
 	  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 }];
 	    this.thEventListen(events, 'remove', true);
 	  };
 	
 	  /**
-	   * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
+	   * 开始调整交换列的事件
-	   * @memberof TableHeader
 	   */
-	  // onDragEnter = (e) => { 
+	
-	  //   if (!this.props.draggable) return;
-	  //   if(this.drag.option === 'border'){return;}
-	  //   let data = this.getCurrentEventData(e);
-	  //   if (!this.currentObj || this.currentObj.key == data.key) return;
-	  // }; 
 	
 	  /**
 	   * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@@ -13105,6 +13145,12 @@
 	   */
 	
 	
+	  /**
+	   * 获取当前th上的对象数据
+	   * @param {*} e
+	   * @returns
+	   * @memberof TableHeader
+	   */
 	  TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
 	    var event = _utils.Event.getEvent(e);
 	    var th = this.getThDome(event.target);
@@ -13125,9 +13171,9 @@
 	  };
 	
 	  /**
-	   *根据拖拽，获取当前的Th属性
+	   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
 	   * @param {*} element
-	   * @returns
+	   * @returns  <th />对象
 	   * @memberof TableHeader
 	   */
 	
@@ -13166,28 +13212,21 @@
 	    var _props = this.props,
 	        clsPrefix = _props.clsPrefix,
 	        rowStyle = _props.rowStyle,
-	        onDragStart = _props.onDragStart,
-	        onDragOver = _props.onDragOver,
-	        onDrop = _props.onDrop,
 	        draggable = _props.draggable,
 	        dragborder = _props.dragborder,
 	        rows = _props.rows,
 	        filterable = _props.filterable,
-	        onFilterRowsChange = _props.onFilterRowsChange,
-	        onMouseDown = _props.onMouseDown,
-	        onMouseMove = _props.onMouseMove,
-	        onMouseUp = _props.onMouseUp,
-	        onMouseOut = _props.onMouseOut,
-	        contentWidthDiff = _props.contentWidthDiff,
 	        fixed = _props.fixed,
-	        lastShowIndex = _props.lastShowIndex,
+	        lastShowIndex = _props.lastShowIndex;
-	        contentTable = _props.contentTable;
+	
 	
 	    var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
 	
 	    return _react2["default"].createElement(
 	      "thead",
-	      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
+	      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
+	          return _this2._thead = _thead;
+	        } }),
 	      rows.map(function (row, index) {
 	        return _react2["default"].createElement(
 	          "tr",
@@ -13260,7 +13299,6 @@
 	
 	
 	TableHeader.propTypes = propTypes;
-	
 	exports["default"] = TableHeader;
 	module.exports = exports["default"];
 
@@ -13603,17 +13641,18 @@
 	}
 	
 	function addHandler(element, type, handler) {
-	
+	  var event = null;
 	  if (element.addEventListener) {
 	    //检测是否为DOM2级方法
-	    element.addEventListener(type, handler, false);
+	    event = element.addEventListener(type, handler, false);
 	  } else if (element.attachEvent) {
 	    //检测是否为IE级方法
-	    element.attachEvent("on" + type, handler);
+	    event = element.attachEvent("on" + type, handler);
 	  } else {
 	    //检测是否为DOM0级方法
-	    element["on" + type] = handler;
+	    event = element["on" + type] = handler;
 	  }
+	  return event;
 	}
 	
 	function removeHandler(element, type, handler) {

docs/mixin.md

@@ -9,11 +9,13 @@ Table拓展功能方法。注：拼接成复杂功能的table组件不能在rend
 import multiSelect from "tinper-bee/lib/multiSelect.js";
 ```
 
-### multiSelect
+### multiSelect 
 
-全选功能
+> 选中功能组件
 
-#### Table新增参数
+<font color="#ccc">
+
+#### <font color="#ccc">multiSelect 废弃部分的API</font>
 
 | 参数                  | 说明                         | 类型       | 默认值      |
 | ------------------- | -------------------------- | -------- | -------- |
@@ -24,6 +26,19 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
 | selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName       | Function(record, index):bool | 无        |
 | selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName       | Function(record, index):bool | 无        |
 
+</font>
+
+#### multiSelect 新增API
+
+> data 数据中新增参数
+
+| 参数                  | 说明                         | 类型       | 默认值      |
+| ------------------- | -------------------------- | -------- | -------- |
+| _checked         | 设置当前数据是否选中           |  boolean      | true/false       |
+| _disabled   | 禁用当前选中数据     |  boolean      | true/false     
+| getSelectedDataFunc | 返回当前选中的数据数组                | Function | 无        |
+
+
 
 #### 使用
 
@@ -84,11 +99,8 @@ const SumTable = sum(Table);
 
 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
-| dragborder | 显示拖拽边框 | boolean | false |
+| dragborder | 拖拽调整列宽度 | boolean | false |
-| draggable | 是否可拖拽 | boolean | false |
+| draggable | 拖拽交换列 | boolean | false |
-| onDragStart | 拖拽开始回调函数 | function | () => {} |
-| onDragEnter |拖拽进入回调函数 | function | () => {} |
-| onDragOver | 拖拽划过回调函数 | function | () => {} |
 | onDrop | 拖拽释放回调函数 | function | () => {} |
 
 #### 使用

package.json

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

src/Table.scss

@@ -297,6 +297,17 @@ $checkbox-height:16px;
     }
     th{
       background: $table-head-background-color;
+      background-clip:padding-box;
+      //禁止选中文字
+      -moz-user-select: -moz-none;
+      -khtml-user-select: none;
+      -webkit-user-select: none; 
+      /*
+        Introduced in IE 10. 
+      */
+        -ms-user-select: none;
+        user-select: none;
+
       // overflow: hidden;
       // white-space: nowrap;
       // text-overflow: ellipsis;

src/TableHeader.js

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
 import ReactDOM from 'react-dom';
 import PropTypes from "prop-types";
-import shallowequal from "shallowequal";
+import { debounce } from "throttle-debounce";
-import { throttle, debounce } from "throttle-debounce";
+import { Event,EventUtil} from "./utils";
-import { tryParseInt, ObjectAssign ,Event,EventUtil} from "./utils";
 import FilterType from "./FilterType";
 
 const propTypes = {
@@ -22,16 +21,20 @@ class TableHeader extends Component {
     };
     this.minWidth = 80;//确定最小宽度就是80
     this.table = null;
+    this._thead = null;//当前对象
   }
 
   static defaultProps = {
     contentWidthDiff: 0
   };
- 
+
   /**
-   * 动态绑定th line 事件
+   *
-   * type 为false 为增加事件
+   * 动态绑定th line 事件方法
-   * eventSource 为false 给 th 内部的div增加事件
+   * @param {*} events
+   * @param {*} type  type 为false 为增加事件
+   * @param {*} eventSource 为false 给 th 内部的div增加事件
+   * @memberof TableHeader
    */
   thEventListen(events,type,eventSource){
     let {ths,cols} = this.table;
@@ -54,7 +57,6 @@ class TableHeader extends Component {
             EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
           }else{
             EventUtil.addHandler(_dataSource,_event.key,_event.fun);
-
           }
         }
       }
@@ -62,6 +64,12 @@ class TableHeader extends Component {
   }
 
  
+  /**
+   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+   * @param {*} events
+   * @param {*} type
+   * @memberof TableHeader
+   */
   bodyEventListen(events,type){
     for (let i = 0; i < events.length; i++) {
       const _event = events[i];
@@ -78,13 +86,15 @@ class TableHeader extends Component {
     this.initEvent();
   }
 
-  componentDidMount(){
+  // componentDidMount(){
-    this.initTable();
+    // this.initTable();
-    this.initEvent();
+    // this.initEvent();
-  } 
+  // } 
   
   /**
-   * 拖拽列宽的事件处理
+   * 初始化拖拽列宽的事件处理
+   * @returns
+   * @memberof TableHeader
    */
   initEvent(){
     let  events = [
@@ -103,7 +113,8 @@ class TableHeader extends Component {
   }
 
   /**
-   * 移除拖拽宽度的事件
+   * 移除当前全局事件对象
+   * @memberof TableHeader
    */
   removeDragBorderEvent(){
     let  events = [
@@ -117,11 +128,13 @@ class TableHeader extends Component {
 
   /**
    * 获取table的属性存放在this.table 中。(公用方法)
+   * @returns
+   * @memberof TableHeader
    */
   initTable(){
     if(!this.props.dragborder && !this.props.draggable)return;
-    let el = ReactDOM.findDOMNode(this);
+    // let el = ReactDOM.findDOMNode(this);
-    let tableDome = el.parentNode;
+    let tableDome = this._thead.parentNode;
     let table = {};
     if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
       table.table = tableDome;
@@ -144,8 +157,11 @@ class TableHeader extends Component {
       }
     }
   }
-
+  
-  //---拖拽列宽代码逻辑----start-----
+  /**
+   * 调整列宽的move事件
+   * @memberof TableHeader
+   */
   onLineMouseMove = (e) => {
       const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
       Event.stopPropagation(e); 
@@ -194,6 +210,10 @@ class TableHeader extends Component {
       }
   };
 
+  /**
+   * 调整列宽的down事件
+   * @memberof TableHeader
+   */
   onLineMouseDown = (e) => {
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);
@@ -209,16 +229,22 @@ class TableHeader extends Component {
     this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
   };
 
+  /**
+   * 调整列宽的up事件
+   * @memberof TableHeader
+   */
   onLineMouseUp = (event) => {
- 
     this.clearDragBorder(event);
   };
+
+  /**
+   * 调整列宽到区域以外的up事件
+   */
   bodyonLineMouseMove = (event) => {
     this.clearDragBorder(event);
   };
 
   clearDragBorder(){
-    // if (!this.props.dragborder || !this.props.draggable) return;
     if(!this.drag || !this.drag.option)return;
     let {rows} = this.props;
     let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
@@ -233,6 +259,10 @@ class TableHeader extends Component {
 
   //---拖拽列宽代码逻辑----start-----
  
+  /**
+   * 调整交换列down事件
+   * @memberof TableHeader
+   */
   dragAbleMouseDown = (e) => {
     // Event.stopPropagation(e); 
     let event = Event.getEvent(e);
@@ -247,7 +277,10 @@ class TableHeader extends Component {
     this.removeDragBorderEvent();//清理掉拖拽列宽的事件
     this.addDragAbleEvent(); //添加拖拽交换列的事件
   }
-
+  /**
+   * 调整交换列up事件
+   * @memberof TableHeader
+   */
   dragAbleMouseUp = (e) => {
     this.currentDome.setAttribute('draggable',false);//添加交换列效果
     this.removeDragAbleEvent();
@@ -256,20 +289,22 @@ class TableHeader extends Component {
     this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
     this.initEvent();
   }
+
   /**
-   * 拖拽交换列的事件处理
+   * 添加换列的事件监听
    */
   addDragAbleEvent (){
     let  events = [
       {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
       {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
       {key:'drop', fun:this.onDrop},        //在一个拖动过程中，释放鼠标键时触发此事件 
-      // {key:'dragenter', fun:this.onDragEnter}  //当被鼠标拖动的对象进入其容器范围内时触发此事件
     ];
     this.thEventListen(events,'',true);
-    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
   }
   
+  /**
+   * 删除换列的事件监听
+   */
   removeDragAbleEvent(){
     let  events = [
       {key:'dragstart',fun:this.onDragStart},
@@ -280,6 +315,9 @@ class TableHeader extends Component {
     this.thEventListen(events,'remove',true);
   }
 
+  /**
+   * 开始调整交换列的事件
+   */
   onDragStart = (e) => {
     let event = Event.getEvent(e);
     if (!this.props.draggable) return;
@@ -292,24 +330,13 @@ class TableHeader extends Component {
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("Text", currentKey);
     this.currentObj = this.props.rows[0][currentIndex];
-    event.dataTransfer.setDragImage(event.target, 0, 0);
+    // event.dataTransfer.setDragImage(event.target, 0, 0);
   };
 
   onDragOver = (e) => {
     event.preventDefault();
   };
 
-  /**
-   * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
-   * @memberof TableHeader
-   */
-  // onDragEnter = (e) => { 
-  //   if (!this.props.draggable) return;
-  //   if(this.drag.option === 'border'){return;}
-  //   let data = this.getCurrentEventData(e);
-  //   if (!this.currentObj || this.currentObj.key == data.key) return;
-  // }; 
-
   /**
    * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
    * @memberof TableHeader
@@ -325,6 +352,12 @@ class TableHeader extends Component {
     this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
   };
 
+  /**
+   * 获取当前th上的对象数据
+   * @param {*} e
+   * @returns
+   * @memberof TableHeader
+   */
   getCurrentEventData(e){
     let event = Event.getEvent(e);
     let th = this.getThDome(event.target)
@@ -343,9 +376,9 @@ class TableHeader extends Component {
   }
 
   /**
-   *根据拖拽，获取当前的Th属性
+   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
    * @param {*} element
-   * @returns
+   * @returns  <th />对象
    * @memberof TableHeader
    */
   getThDome(element){
@@ -497,30 +530,14 @@ class TableHeader extends Component {
 
 
   render() { 
-    const {
+    const { clsPrefix, rowStyle,draggable,
-      clsPrefix,
+        dragborder, rows,filterable,fixed,lastShowIndex,
-      rowStyle,
-      onDragStart,
-      onDragOver,
-      onDrop,
-      draggable,
-      dragborder,
-      rows,
-      filterable,
-      onFilterRowsChange,
-      onMouseDown,
-      onMouseMove,
-      onMouseUp,
-      onMouseOut,
-      contentWidthDiff,
-      fixed,
-      lastShowIndex,
-      contentTable
     } = this.props;
+
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
 
     return (
-      <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' >
+      <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
         {rows.map((row, index) => (
           <tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
             {row.map((da, columIndex, arr) => {
@@ -585,5 +602,4 @@ class TableHeader extends Component {
 }
 
 TableHeader.propTypes = propTypes;
-
 export default TableHeader;

src/utils.js

@@ -174,14 +174,15 @@ export function getColChildrenLength(columns,chilrenLen){
 
 
  function addHandler(element,type,handler){
-
+  let event = null;
   if(element.addEventListener){//检测是否为DOM2级方法
-      element.addEventListener(type, handler, false);
+    event = element.addEventListener(type, handler, false);
   }else if (element.attachEvent){//检测是否为IE级方法
-      element.attachEvent("on" + type, handler);
+    event = element.attachEvent("on" + type, handler);
   } else {//检测是否为DOM0级方法
-      element["on" + type] = handler;
+    event = element["on" + type] = handler;
   }
+  return event;
 }
 
  function removeHandler(element, type, handler){