树表、行拖拽组合场景，图标重叠问题

build/ColumnManager.js

@@ -341,12 +341,32 @@ var _initialiseProps = function _initialiseProps() {
     if (!showRowNum) {
       return columns;
     }
+    var key = showRowNum.key,
+        fixed = showRowNum.fixed,
+        width = showRowNum.width,
+        name = showRowNum.name,
+        type = showRowNum.type,
+        base = showRowNum.base;
+
     var order = {
-      dataIndex: showRowNum.key || '_index',
+      dataIndex: key || '_index',
       key: '_index',
-      fixed: showRowNum.fixed || 'left',
+      fixed: fixed || 'left',
-      width: showRowNum.width || 50,
+      width: width || 50,
-      title: showRowNum.name || '序号'
+      title: name || '序号',
+      render: function render(text, record, index) {
+        switch (type) {
+          case 'ascii':
+            {
+              return String.fromCharCode((base || 'a').charCodeAt() + index);
+            }
+          case 'number':
+          default:
+            {
+              return (base || 0) + index;
+            }
+        }
+      }
     };
     if (columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio') {
       // 多选表格/单选表格时放在第二列,其他情况放到第一列

build/Table.css

@@ -246,6 +246,9 @@
     .u-table td.drag-handle-column .uf {
       font-size: 12px;
       line-height: 12px; }
+    .u-table th.drag-handle-column.u-table-row-has-expandIcon .uf,
+    .u-table td.drag-handle-column.u-table-row-has-expandIcon .uf {
+      padding: 0; }
     .u-table th.text-center,
     .u-table td.text-center {
       text-align: center; }
@@ -438,8 +441,8 @@
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

build/Table.js

@@ -118,7 +118,7 @@ var propTypes = {
   onBodyScroll: _propTypes2["default"].func,
   bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
   headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
-  showRowNum: _propTypes2["default"].object // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
+  showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]) // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
 };
 
 var defaultProps = {
@@ -848,25 +848,23 @@ var Table = function (_Component) {
     var lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ? props.lazyLoad.endIndex : -1;
     for (var i = 0; i < data.length; i++) {
       var isHiddenExpandIcon = void 0;
-      if (props.showRowNum) {
+      // if ( props.showRowNum ){
-        switch (props.showRowNum.type) {
+      //   switch(props.showRowNum.type){
-          case 'number':
+      //     case 'number':{
-            {
+      //       data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + i;
-              data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + i;
+      //       break;
-              break;
+      //     }
-            }
+      //     case 'ascii': {
-          case 'ascii':
+      //       data[i][props.showRowNum.key || '_index'] = String.fromCharCode(i + (props.showRowNum.base || '0').charCodeAt());
-            {
+      //       break;
-              data[i][props.showRowNum.key || '_index'] = String.fromCharCode(i + (props.showRowNum.base || '0').charCodeAt());
+      //     }
-              break;
+      //     default: {
-            }
+      //       data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + i;
-          default:
+      //       break;
-            {
+      //     }
-              data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + i;
+      //   }
-              break;
+
-            }
+      // } 
-        }
-      }
       var record = data[i];
       var key = this.getRowKey(record, i);
       var childrenColumn = record[childrenColumnName];

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

build/lib/sort.js

@@ -130,6 +130,9 @@ function sort(Table, Icon) {
     // 数值比较函数
 
 
+    // 中文比较函数，按拼音排序
+
+
     SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
       var colLen = flatColumns.length;
       var parentIndex = void 0,
@@ -345,7 +348,23 @@ function sort(Table, Icon) {
       if (column.sorter || column.sortEnable) {
         //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
         if (column.sortEnable && !column.sorter) {
-          column.sorter = column.fieldType === 'number' ? _this3.numberSortFn(column.dataIndex) : _this3.defaultSortFn(column.dataIndex);
+          switch (column.fieldType) {
+            case 'number':
+              {
+                column.sorter = _this3.numberSortFn(column.dataIndex);
+                break;
+              }
+            case 'stringChinese':
+              {
+                column.sorter = _this3.chineseSortFn(column.dataIndex);
+                break;
+              }
+            default:
+              {
+                column.sorter = _this3.defaultSortFn(column.dataIndex);
+                break;
+              }
+          }
         }
         if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
           column.orderNum = _this3.getOrderNum();
@@ -393,6 +412,12 @@ function sort(Table, Icon) {
         return numberA >= numberB ? 1 : -1;
       };
     };
+
+    this.chineseSortFn = function (key) {
+      return function (a, b) {
+        return a[key].localeCompare(b[key], 'zh-Hans-CN', { sensitivity: 'accent' });
+      };
+    };
   }, _temp;
 }
 module.exports = exports['default'];

build/lib/util.js

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

dist/demo.css

@@ -233,6 +233,9 @@
     .u-table td.drag-handle-column .uf {
       font-size: 12px;
       line-height: 12px; }
+    .u-table th.drag-handle-column.u-table-row-has-expandIcon .uf,
+    .u-table td.drag-handle-column.u-table-row-has-expandIcon .uf {
+      padding: 0; }
     .u-table th.text-center,
     .u-table td.text-center {
       text-align: center; }
@@ -430,8 +433,8 @@
     background-clip: padding-box;
     -moz-user-select: -moz-none;
     -webkit-user-select: none;
-    /*
+    /*
-        Introduced in IE 10. 
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

src/Table.js

@@ -62,7 +62,7 @@ const propTypes = {
   onBodyScroll: PropTypes.func,
   bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
   headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
-  showRowNum: PropTypes.object, // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
+  showRowNum: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
 };
 
 const defaultProps = {

src/Table.scss

@@ -142,6 +142,9 @@ $icon-color:#505F79;
         font-size: 12px;
         line-height: 12px;
       }
+      &.u-table-row-has-expandIcon .uf {
+        padding: 0;
+      }
     }
     &.text-center{
       text-align: center;