解决了th.setAttribute('draggable', true)报th为undefinded的问题

build/Table.css

@@ -438,8 +438,8 @@
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

build/TableHeader.js

@@ -106,9 +106,9 @@ var TableHeader = function (_Component) {
           _this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
         }
       } else if (type != 'online' && _this.props.draggable) {
-        // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
+        // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
         if (!_this.props.draggable) return;
-        var th = _this.getTargetToTh(targetEvent);
+        var th = _this.getTargetToType(targetEvent);
         th.setAttribute('draggable', true); //添加交换列效果
         _this.drag.option = 'dragAble';
         _this.currentDome = th;
@@ -184,7 +184,7 @@ var TableHeader = function (_Component) {
 
           var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
           if (newDiff > 0) {
-            //缩小 
+            //缩小
             var lastWidth = _this.lastColumWidth + newDiff;
             _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
             _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
@@ -698,7 +698,7 @@ var TableHeader = function (_Component) {
     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 }, //在一个拖动过程中，释放鼠标键时触发此事件
 
     { key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
     this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
@@ -767,7 +767,7 @@ var TableHeader = function (_Component) {
     }
   };
 
-  //---拖拽列交换----end----- 
+  //---拖拽列交换----end-----
 
   /**
    * 过滤输入后或下拉条件的回调函数
@@ -832,7 +832,7 @@ var TableHeader = function (_Component) {
             // if(da.dataindex && da.key ===undefined ){
             keyTemp.key = da.key || da.dataindex || index + '-' + columIndex;
 
-            // } 
+            // }
             if (filterable && index == rows.length - 1) {
               da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
               if (da.key === undefined) {

build/lib/dragColumn.js

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

build/lib/util.js

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

src/TableHeader.js

@@ -22,7 +22,7 @@ function getDiv(id){
 class TableHeader extends Component {
   constructor(props) {
     super(props);
-    this.currentObj = null; 
+    this.currentObj = null;
     this.theadKey = new Date().getTime();
     this.drag = {
       option:''
@@ -88,7 +88,7 @@ class TableHeader extends Component {
     table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
     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;
@@ -97,7 +97,7 @@ class TableHeader extends Component {
       let _fixedParentContext =  document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
       let siblingDom = _fixedParentContext.parentNode.nextElementSibling;
       if (siblingDom) {
-        let fixedTable = siblingDom.querySelector("table"); 
+        let fixedTable = siblingDom.querySelector("table");
         this.fixedTable.table = fixedTable
         this.fixedTable.cols = fixedTable.getElementsByTagName("col");
         // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
@@ -193,7 +193,7 @@ class TableHeader extends Component {
    * @memberof TableHeader
    */
   onTrMouseDown = (e) => {
-    Event.stopPropagation(e); 
+    Event.stopPropagation(e);
     let event = Event.getEvent(e) ,
     targetEvent = Event.getTarget(event);
     const { clsPrefix, contentTable,lastShowIndex } = this.props;
@@ -223,9 +223,9 @@ class TableHeader extends Component {
         this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
       }
     }else if(type != 'online' &&  this.props.draggable){
-        // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
+        // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
-        if (!this.props.draggable) return; 
+        if (!this.props.draggable) return;
-        let th = this.getTargetToTh(targetEvent);
+        let th = this.getTargetToType(targetEvent);
         th.setAttribute('draggable',true);//添加交换列效果
         this.drag.option = 'dragAble';
         this.currentDome = th;
@@ -236,7 +236,7 @@ class TableHeader extends Component {
       return ;
     }
   };
- 
+
   getTableWidth = ()=>{
     let tableWidth = 0,offWidth = 0;//this.table.cols.length;
     for (let index = 0; index < this.table.cols.length; index++) {
@@ -245,7 +245,7 @@ class TableHeader extends Component {
     }
     return (tableWidth-offWidth);
   }
- 
+
   /**
    * 根据当前节点查找到有data-type类型的容器返回。
    * @memberof TableHeader
@@ -258,7 +258,7 @@ class TableHeader extends Component {
     return tag;
   }
 
-  
+
   /**
    * 判断当前的target 是否是 th，如果不是，直接递归查找。
    * @memberof TableHeader
@@ -278,12 +278,12 @@ class TableHeader extends Component {
   onTrMouseMove = (e) => {
     if(!this.props.dragborder && !this.props.draggable)return;
     const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
-    Event.stopPropagation(e); 
+    Event.stopPropagation(e);
-    let event = Event.getEvent(e);  
+    let event = Event.getEvent(e);
     if(this.props.dragborder && this.drag.option == "border"){
       //移动改变宽度
       let currentCols = this.table.cols[this.drag.currIndex];
-      let diff = (event.x - this.drag.oldLeft); 
+      let diff = (event.x - this.drag.oldLeft);
       let newWidth = this.drag.oldWidth + diff;
       this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
        // if(newWidth > this.drag.minWidth){
@@ -298,11 +298,11 @@ class TableHeader extends Component {
         // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
         // if(this.table.innerTableBody){//TODO 后续需要处理此处
         //   this.table.innerTableBody.style.width  = newTableWidth+'px';
-         
+
         // }
 
         let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
-        if(newDiff > 0){//缩小 
+        if(newDiff > 0){//缩小
           let lastWidth = this.lastColumWidth + newDiff;
           this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
           this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
@@ -354,14 +354,14 @@ class TableHeader extends Component {
    * @memberof TableHeader
    */
   onTrMouseUp = (e) => {
-    let event = Event.getEvent(e);  
+    let event = Event.getEvent(e);
     let width = this.drag.newWidth;
     this.mouseClear();
     this.props.onDropBorder && this.props.onDropBorder(event,width);
   };
 
 
-  mouseClear(){ 
+  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};
@@ -410,7 +410,7 @@ class TableHeader extends Component {
         // overflow.x && (innerTable.style.overflowX = overflow.x);
         overflow.y && (innerTable.style.overflowY = overflow.y);
       }
-     
+
     }
   }
 
@@ -423,9 +423,9 @@ class TableHeader extends Component {
     let  events = [
       {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
       {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
-      {key:'drop', fun:this.onDrop},        //在一个拖动过程中，释放鼠标键时触发此事件 
+      {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},
     ];
@@ -440,7 +440,7 @@ 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},
     ];
@@ -452,7 +452,7 @@ class TableHeader extends Component {
    */
   onDragStart = (e) => {
     if (!this.props.draggable) return;
-    if(this.drag && this.drag.option != 'dragAble'){return;} 
+    if(this.drag && this.drag.option != 'dragAble'){return;}
     let event = Event.getEvent(e) ,
     // target = Event.getTarget(event);
     target = this.getTargetToTh(Event.getTarget(event));
@@ -512,7 +512,7 @@ class TableHeader extends Component {
     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;
@@ -531,9 +531,9 @@ class TableHeader extends Component {
       // this._dragCurrent.style = "";
     }
   }
-  
 
- 
+
+
   /**
    * 获取当前th上的对象数据
    * @param {*} e
@@ -572,8 +572,8 @@ class TableHeader extends Component {
     }
   }
 
-  
+
-//---拖拽列交换----end----- 
+//---拖拽列交换----end-----
 
   /**
    * 过滤输入后或下拉条件的回调函数
@@ -710,7 +710,7 @@ class TableHeader extends Component {
   };
 
 
-  render() { 
+  render() {
     const { clsPrefix, rowStyle,draggable,
         dragborder, rows,filterable,fixed,lastShowIndex,
     } = this.props;
@@ -732,7 +732,7 @@ class TableHeader extends Component {
               if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) {
                 fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`;
               }
-           
+
               if (lastShowIndex == columIndex) {
                 canDotDrag = "th-can-not-drag";
               }
@@ -745,8 +745,8 @@ class TableHeader extends Component {
               //避免key为undefined
               // if(da.dataindex && da.key ===undefined ){
                 keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
-                
+
-              // } 
+              // }
               if (filterable && index == rows.length - 1) {
                 da.children = this.filterRenderType(
                   da["filtertype"],
@@ -760,7 +760,7 @@ class TableHeader extends Component {
               }
 
               let thDefaultObj = {};
-              
+
               if(draggable){
                 thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `;
               }
@@ -769,7 +769,7 @@ class TableHeader extends Component {
               }
               thClassName += ` ${fixedStyle}`;
               if(!da.fixed ){
-                  return (<th {...da}  {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key} 
+                  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">
                       {da.children}
                       {