feat:增加onBodyScroll回调函数

CHANGELOG.md

@@ -1,3 +1,28 @@
+<a name="2.2.3"></a>
+## [2.2.3](https://github.com/tinper-bee/bee-table/compare/v2.2.2...v2.2.3) (2019-08-26)
+
+
+### Bug Fixes
+
+* **TableCell.js:** 修复number类型数据在末位为的显示错误的bug ([094bf16](https://github.com/tinper-bee/bee-table/commit/094bf16))
+
+
+
+<a name="2.2.2"></a>
+## [2.2.2](https://github.com/tinper-bee/bee-table/compare/v2.2.0...v2.2.2) (2019-08-26)
+
+
+### Features
+
+* **新增fieldType属性,包括string number currency bool link date类型:** 新增fieldType属性,包括string number currenc ([e771e8e](https://github.com/tinper-bee/bee-table/commit/e771e8e))
+
+
+
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/tinper-bee/bee-table/compare/v2.1.14...v2.2.0) (2019-08-21)
+
+
+
 <a name="2.1.14"></a>
 ## [2.1.14](https://github.com/tinper-bee/bee-table/compare/v2.1.13...v2.1.14) (2019-08-17)
 
@@ -75,7 +100,7 @@
 
 
 <a name="2.1.0"></a>
-# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
+# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.1.0) (2019-06-01)
 
 
 ### Bug Fixes
@@ -84,11 +109,6 @@
 
 
 
-<a name="2.0.25"></a>
-## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
-
-
-
 <a name="2.0.24"></a>
 ## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
 

build/Column.js

@@ -29,7 +29,8 @@ var propTypes = {
   fixed: _propTypes2["default"].oneOf([true, 'left', 'right']),
   render: _propTypes2["default"].func,
   onCellClick: _propTypes2["default"].func,
-  ifshow: _propTypes2["default"].bool
+  ifshow: _propTypes2["default"].bool,
+  fieldType: _propTypes2["default"].string // 类型
 };
 
 var Column = function (_Component) {

build/ColumnManager.js

@@ -30,10 +30,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 //行控制管理
 var ColumnManager = function () {
-  function ColumnManager(columns, elements, originWidth, rowDraggAble) {
+  function ColumnManager(columns, elements, originWidth, rowDraggAble, showRowNum) {
     _classCallCheck(this, ColumnManager);
 
-    this._cached = {};
+    _initialiseProps.call(this);
 
     //判断是否使用行拖拽
     if (rowDraggAble) {
@@ -50,10 +50,16 @@ var ColumnManager = function () {
       }];
       columns = dragHandleColumn.concat(columns);
     }
+    columns = this.addOrderColumn(columns, showRowNum);
+
     this.columns = columns || this.normalize(elements);
+
     this.originWidth = originWidth;
   }
 
+  // 向数据列中添加一列:序号
+
+
   ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
     var _this = this;
 
@@ -226,7 +232,8 @@ var ColumnManager = function () {
     return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
   };
 
-  ColumnManager.prototype.reset = function reset(columns, elements) {
+  ColumnManager.prototype.reset = function reset(columns, elements, showRowNum) {
+    columns = this.addOrderColumn(columns, showRowNum);
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   };
@@ -327,5 +334,29 @@ var ColumnManager = function () {
   return ColumnManager;
 }();
 
+var _initialiseProps = function _initialiseProps() {
+  this._cached = {};
+
+  this.addOrderColumn = function (columns, showRowNum) {
+    if (!showRowNum) {
+      return columns;
+    }
+    var order = {
+      dataIndex: showRowNum.key || '_index',
+      key: '_index',
+      fixed: showRowNum.fixed || 'left',
+      width: showRowNum.width || 50,
+      title: showRowNum.name || '序号'
+    };
+    if (columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio') {
+      // 多选表格/单选表格时放在第二列,其他情况放到第一列
+      columns = [order].concat(columns);
+    } else {
+      columns.splice(1, 0, order); // splice方法改变原数组,返回切割出的数组,此处为[]
+    }
+    return columns;
+  };
+};
+
 exports["default"] = ColumnManager;
 module.exports = exports['default'];

build/Table.css

@@ -438,11 +438,13 @@
     -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; }
+    .u-table-thead th .required {
+      color: #F22C1D; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
@@ -599,6 +601,14 @@
   .u-table .u-table-drag-hidden-cont {
     width: 100px;
     height: 40px; }
+  .u-table .u-table-link {
+    cursor: pointer;
+    color: #0073E1; }
+  .u-table .u-table-link-underline:hover {
+    text-decoration: underline; }
+  .u-table .u-table-currency {
+    display: inline-block;
+    text-align: right; }
 
 .u-table:focus {
   outline: none;
@@ -835,6 +845,12 @@
   vertical-align: middle;
   overflow: hidden; }
 
+.body-dispaly-in-row .u-table-fieldtype {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
 .u-table-drag-hidden-cont {
   position: absolute;
   top: -1000px; }

build/Table.js

@@ -114,7 +114,10 @@ var propTypes = {
   size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
   rowDraggAble: _propTypes2["default"].bool,
   onDropRow: _propTypes2["default"].func,
-  onDragRowStart: _propTypes2["default"].func
+  onDragRowStart: _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 || '序号'}
 };
 
 var defaultProps = {
@@ -161,7 +164,10 @@ var defaultProps = {
   size: 'md',
   rowDraggAble: false,
   onDropRow: function onDropRow() {},
-  onDragRowStart: function onDragRowStart() {}
+  onDragRowStart: function onDragRowStart() {},
+  bodyDisplayInRow: true,
+  headerDisplayInRow: true,
+  showRowNum: false
 };
 
 var Table = function (_Component) {
@@ -292,7 +298,7 @@ var Table = function (_Component) {
 
     var expandedRowKeys = [];
     var rows = [].concat(_toConsumableArray(props.data));
-    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble);
+    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
     _this.store = (0, _createStore2["default"])({ currentHoverKey: null });
     _this.firstDid = true;
     if (props.defaultExpandAllRows) {
@@ -342,9 +348,16 @@ var Table = function (_Component) {
     _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
     _this.tableUid = null;
     _this.contentTable = null;
+    _this.leftColumnsLength; //左侧固定列的长度
+    _this.centerColumnsLength; //非固定列的长度
     return _this;
   }
 
+  Table.prototype.componentWillMount = function componentWillMount() {
+    this.centerColumnsLength = this.columnManager.centerColumns().length;
+    this.leftColumnsLength = this.columnManager.leftColumns().length;
+  };
+
   Table.prototype.componentDidMount = function componentDidMount() {
     this.getTableUID();
     _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
@@ -376,12 +389,12 @@ var Table = function (_Component) {
       });
     }
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
-      this.columnManager.reset(nextProps.columns);
+      this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
       if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
         this.scrollTop = this.bodyTable.scrollTop;
       }
     } else if (nextProps.children !== this.props.children) {
-      this.columnManager.reset(null, nextProps.children);
+      this.columnManager.reset(null, nextProps.children, this.porps.showRowNum); // 加入this.props.showRowNum参数
     }
     //适配lazyload
     if (nextProps.scrollTop > -1) {
@@ -429,6 +442,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.componentWillUnmount = function componentWillUnmount() {
+    // 移除绑定事件,避免内存泄漏
     this.contentTable = null;
     _utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
     _utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
@@ -663,7 +677,9 @@ var Table = function (_Component) {
         fixed: column.fixed,
         width: width,
         dataindex: column.dataIndex,
-        textAlign: column.textAlign
+        textAlign: column.textAlign,
+        titleAlign: column.titleAlign, // 标题水平对齐方式
+        required: column.required // 标题是否展示必填标志
       };
       if (column.onHeadCellClick) {
         cell.onClick = column.onHeadCellClick;
@@ -821,7 +837,7 @@ var Table = function (_Component) {
     var onRowDoubleClick = props.onRowDoubleClick;
 
     var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
-    var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
+    var expandIconColumnIndex = props.expandIconColumnIndex;
     if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
       rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
     }
@@ -830,6 +846,25 @@ 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) {
+        switch (props.showRowNum.type) {
+          case 'number':
+            {
+              data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
+              break;
+            }
+          case 'ascii':
+            {
+              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) + 1;
+              break;
+            }
+        }
+      }
       var record = data[i];
       var key = this.getRowKey(record, i);
       var childrenColumn = record[childrenColumnName];
@@ -929,7 +964,9 @@ var Table = function (_Component) {
         expandedIcon: props.expandedIcon,
         collapsedIcon: props.collapsedIcon,
         lazyStartIndex: lazyCurrentIndex,
-        lazyEndIndex: lazyEndIndex
+        lazyEndIndex: lazyEndIndex,
+        centerColumnsLength: this.centerColumnsLength,
+        leftColumnsLength: this.leftColumnsLength
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;
@@ -1041,7 +1078,7 @@ var Table = function (_Component) {
         useFixedHeader = _props4.useFixedHeader,
         data = _props4.data;
 
-    var bodyStyle = _extends({}, this.props.bodyStyle);
+    var bodyStyle = _extends({}, this.props.bodyStyle); // 这里为什么不写在上面?
     var headStyle = {};
     var innerBodyStyle = {};
     var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);

build/TableCell.js

@@ -4,6 +4,8 @@ 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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -16,6 +18,14 @@ var _objectPath = require('object-path');
 
 var _objectPath2 = _interopRequireDefault(_objectPath);
 
+var _i18n = require('./lib/i18n');
+
+var _i18n2 = _interopRequireDefault(_i18n);
+
+var _tool = require('bee-locale/build/tool');
+
+var _utils = require('./lib/utils');
+
 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; }
@@ -44,6 +54,122 @@ var TableCell = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+    _this.renderLinkType = function (data, record, index) {
+      var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+      var url = config.url,
+          urlIndex = config.urlIndex,
+          linkType = config.linkType,
+          className = config.className,
+          underline = config.underline,
+          descIndex = config.descIndex,
+          desc = config.desc,
+          linkColor = config.linkColor;
+
+      var linkUrl = '';
+      if (url) {
+        linkUrl = url(data, record, index);
+      } else if (urlIndex) {
+        linkUrl = record[urlIndex];
+      }
+      if (linkUrl) {
+        var link = function link() {
+          window.open(linkUrl, linkType || '_blank');
+        };
+        var cls = 'u-table-link u-table-fieldtype ';
+        if (className) {
+          cls += className + ' ';
+        }
+        if (underline) {
+          cls += 'u-table-link-underline ';
+        }
+        var title = '';
+
+        if (desc === true) {
+          title = linkUrl;
+        } else if (typeof desc === 'string') {
+          title = desc;
+        } else if (typeof desc === 'function') {
+          title = desc(data, record, index);
+        } else if (descIndex) {
+          title = record[descIndex];
+        }
+        return _react2["default"].createElement(
+          'span',
+          { onClick: link, className: cls, style: { color: linkColor || '' }, title: title },
+          data
+        );
+      }
+      return data;
+    };
+
+    _this.renderBoolType = function (data) {
+      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
+        return _i18n2["default"];
+      });
+      var boolConfig = _extends({ trueText: locale['bool_true'], falseText: locale['bool_false'] }, config);
+      if (typeof data === 'string') {
+        if (data === 'false' || data === '0') {
+          return boolConfig.falseText;
+        }
+      } else if (!data) {
+        return boolConfig.falseText;
+      }
+      return boolConfig.trueText;
+    };
+
+    _this.renderNumber = function (data) {
+      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+      var precision = config.precision,
+          thousand = config.thousand,
+          makeUp = config.makeUp,
+          preSymbol = config.preSymbol,
+          nextSymbol = config.nextSymbol;
+
+      var number = (0, _utils.formatMoney)(data, precision, thousand);
+      if (makeUp === false && number !== '0' && number.indexOf('.') !== -1) {
+        number = number.replace(/0*$/, '').replace(/\.$/, '');
+      }
+      var numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px
+      var res = _react2["default"].createElement(
+        'span',
+        { className: 'u-table-currency-number' },
+        number
+      );
+      var pre = preSymbol ? _react2["default"].createElement(
+        'span',
+        { className: 'u-table-currency-pre' },
+        preSymbol
+      ) : null;
+      var next = nextSymbol ? _react2["default"].createElement(
+        'span',
+        { className: 'u-table-currency-next' },
+        nextSymbol
+      ) : null;
+      var title = '';
+      title += typeof preSymbol === 'string' ? preSymbol : '';
+      title += number;
+      title += typeof nextSymbol === 'string' ? nextSymbol : '';
+      return _react2["default"].createElement(
+        'span',
+        { className: 'u-table-currency u-table-fieldtype', style: { width: numberWidth }, title: title },
+        pre,
+        res,
+        next
+      );
+    };
+
+    _this.renderDate = function (data) {
+      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var moment = config.moment,
+          format = config.format;
+
+      if (!moment) return data;
+      return moment(data).format(format || 'YYYY-MM-DD');
+    };
+
     _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
     _this.handleClick = _this.handleClick.bind(_this);
     return _this;
@@ -63,6 +189,18 @@ var TableCell = function (_Component) {
     }
   };
 
+  //  渲染链接类型
+
+
+  // 渲染布尔类型
+
+
+  // 渲染整数/货币类型
+
+
+  // 渲染时间类型
+
+
   TableCell.prototype.render = function render() {
     var _props2 = this.props,
         record = _props2.record,
@@ -78,7 +216,11 @@ var TableCell = function (_Component) {
         lazyStartIndex = _props2.lazyStartIndex,
         lazyEndIndex = _props2.lazyEndIndex;
     var dataIndex = column.dataIndex,
-        render = column.render;
+        render = column.render,
+        fieldType = column.fieldType,
+        linkConfig = column.linkConfig,
+        fontColor = column.fontColor,
+        bgColor = column.bgColor;
     var _column$className = column.className,
         className = _column$className === undefined ? '' : _column$className;
 
@@ -99,6 +241,55 @@ var TableCell = function (_Component) {
       }
     }
 
+    // 根据 fieldType 来渲染数据
+    if (!render) {
+      switch (column.fieldType) {
+        case 'link':
+          {
+            text = this.renderLinkType(text, record, index, column.linkConfig);
+            break;
+          }
+        case 'bool':
+          {
+            text = this.renderBoolType(text, column.boolConfig);
+            break;
+          }
+        case 'currency':
+          {
+            var config = {
+              precision: 2, // 精度值,需要大于0
+              thousand: true, // 是否显示千分符号
+              makeUp: true, // 末位是否补零
+              preSymbol: '', // 前置符号
+              nextSymbol: '' // 后置符号
+            };
+            text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
+            break;
+          }
+        case 'number':
+          {
+            var _config = {
+              precision: 0, // 精度值,需要大于0
+              thousand: true, // 是否显示千分符号
+              makeUp: false, // 末位是否补零
+              preSymbol: '', // 前置符号
+              nextSymbol: '' // 后置符号
+            };
+            text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
+            break;
+          }
+        case 'date':
+          {
+            text = this.renderDate(text, column.dateConfig);
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+    }
+
     if (this.isInvalidRenderCellText(text)) {
       text = null;
     }
@@ -119,10 +310,12 @@ var TableCell = function (_Component) {
     if (column.fixed && !fixed) {
       className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
     }
-    if (column.textAlign) {
+    if (column.contentAlign) {
+      className = className + (' text-' + column.contentAlign);
+    } else if (column.textAlign) {
       className = className + (' text-' + column.textAlign);
     }
-    if (typeof text == 'string' && bodyDisplayInRow) {
+    if ((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow) {
       title = text;
     }
     if (expandIcon && expandIcon.props.expandable) {
@@ -135,8 +328,8 @@ var TableCell = function (_Component) {
         rowSpan: rowSpan,
         className: className,
         onClick: this.handleClick,
-        title: title
+        title: title,
-
+        style: { color: fontColor, backgroundColor: bgColor }
       },
       indentText,
       expandIcon,

build/TableHeader.js

@@ -835,10 +835,14 @@ var TableHeader = function (_Component) {
               canDotDrag = "th-can-not-drag";
             }
             var thClassName = "" + da.className ? "" + da.className : '';
-            if (da.textAlign) {
+            if (da.titleAlign) {
+              thClassName += " text-" + da.titleAlign + " ";
+            } else if (da.textAlign) {
               thClassName += " text-" + da.textAlign + " ";
             }
+
             delete da.textAlign;
+            delete da.titleAlign;
             var keyTemp = {};
             //避免key为undefined
             // if(da.dataindex && da.key ===undefined ){
@@ -867,6 +871,11 @@ var TableHeader = function (_Component) {
                 "th",
                 _extends({}, 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.required ? _react2["default"].createElement(
+                  "span",
+                  { className: "required" },
+                  "*"
+                ) : '',
                 da.children,
                 dragborder && columIndex != _rowLeng ? _react2["default"].createElement(
                   "div",

build/TableRow.js

@@ -593,6 +593,12 @@ var TableRow = function (_Component) {
       isHiddenExpandIcon: isHiddenExpandIcon
     });
     var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
+    var expandIndexInThisTable;
+    if (this.props.fixed === 'right') {
+      expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength - this.props.centerColumnsLength;
+    } else {
+      expandIndexInThisTable = expandIconColumnIndex;
+    }
     for (var i = 0; i < columns.length; i++) {
       if (expandIconAsCell && i === 0 && !showSum) {
         cells.push(_react2["default"].createElement(
@@ -604,7 +610,7 @@ var TableRow = function (_Component) {
           expandIcon
         ));
       }
-      var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex;
+      var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIndexInThisTable;
       cells.push(_react2["default"].createElement(_TableCell2["default"], {
         clsPrefix: clsPrefix,
         record: record,

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;
+                return _column;
-      };
+            };
 
-      _this.onDragEnd = function (event, data) {
+            _this.onDragEnd = 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);
+                });
+                _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;
         }
-        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;
         });
-        _this.setState({
-          columns: _newColumns //cloneDeep(columns)
-        });
-        if (_this.props.onDragEnd) {
-          _this.props.onDragEnd(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,
+                others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
 
-      _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',
-    }
+                onDragEnd: this.onDragEnd,
+                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,
-          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/i18n.js

@@ -16,6 +16,8 @@ module.exports = {
     'be_equal_to': '等于',
     'not_equal_to': '不等于',
     "no_data": '暂无数据',
+    "bool_true": "是",
+    "bool_false": "否",
     'en-us': {
         'resetSettings': 'reset settings',
         'include': 'include',
@@ -30,7 +32,9 @@ module.exports = {
         'less_than_equal_to': 'less than equal to',
         'be_equal_to': 'be equal to',
         'not_equal_to': 'not equal to',
-        "no_data": 'no data'
+        "no_data": 'no data',
+        "bool_true": "true",
+        "bool_false": "false"
     },
     'zh-tw': {
         'resetSettings': '還原設置',
@@ -46,6 +50,8 @@ module.exports = {
         'less_than_equal to': '小於等於',
         'be_equal_to': '等於',
         'not_equal_to': '不等於',
-        "no_data": '暫無數據'
+        "no_data": '暫無數據',
+        "bool_true": "是",
+        "bool_false": "否"
     }
 };

build/lib/multiSelect.js

@@ -121,11 +121,14 @@ function multiSelect(Table, Checkbox) {
       return Object.prototype.toString.call(o) == '[object Array]';
     };
 
+    // 实现行点击时触发多选框勾选的需求
+
+
     MultiSelect.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 _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data, onRowClick: this.onRowClick }));
     };
 
     return MultiSelect;
@@ -240,6 +243,13 @@ function multiSelect(Table, Checkbox) {
       }];
       return _defaultColumns.concat(columns);
     };
+
+    this.onRowClick = function (record, index, event) {
+      _this2.onCheckboxChange('', record, index)();
+      if (_this2.props.onRowClick) {
+        _this2.props.onRowClick(record, index, event);
+      }
+    };
   }, _temp;
 }
 module.exports = exports["default"];

build/lib/sort.js

@@ -125,6 +125,11 @@ function sort(Table, Icon) {
     //点击置为“”时，动态的设置相关column的orderNum值。并排序
 
 
+    // 默认的比较函数,即字符串比较函数
+
+    // 数值比较函数
+
+
     SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
       var colLen = flatColumns.length;
       var parentIndex = void 0,
@@ -335,8 +340,13 @@ function sort(Table, Icon) {
       }
 
       var sortButton = void 0;
-      if (column.sorter) {
+
+      // sorter和sortEnable均可触发排序,且sorter优先级更高
+      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);
+        }
         if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
           column.orderNum = _this3.getOrderNum();
         }
@@ -369,6 +379,20 @@ function sort(Table, Icon) {
       );
       return column;
     };
+
+    this.defaultSortFn = function (key) {
+      return function (a, b) {
+        return a[key] >= b[key] ? 1 : -1;
+      };
+    };
+
+    this.numberSortFn = function (key) {
+      return function (a, b) {
+        var numberA = parseFloat(a[key]);
+        var numberB = parseFloat(b[key]);
+        return numberA >= numberB ? 1 : -1;
+      };
+    };
   }, _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 '参数类型错误';
     }
-    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;
 }

build/lib/utils.js

@@ -19,6 +19,7 @@ exports.getMaxColChildrenLength = getMaxColChildrenLength;
 exports.getColChildrenLength = getColChildrenLength;
 exports.DicimalFormater = DicimalFormater;
 exports.checkDicimalInvalid = checkDicimalInvalid;
+exports.formatMoney = formatMoney;
 
 var _warning = require('warning');
 
@@ -309,6 +310,22 @@ function checkDicimalInvalid(value, precision) {
   return result;
 };
 
+/**
+ * 将数值转化为货币类型
+ * @param {*} number 数值
+ * @param {*} places 精度
+ * @param {*} thousand 是否展示千分位
+ */
+function formatMoney(number, places, thousand) {
+  number = number || 0;
+  places = !isNaN(places = Math.abs(places)) ? places : 2;
+  var thousandSymbol = thousand ? "," : '';
+  var negative = number < 0 ? "-" : "";
+  var i = (0, _parseInt2["default"])(number = Math.abs(+number || 0).toFixed(places), 10) + "";
+  var j = (j = i.length) > 3 ? j % 3 : 0;
+  return negative + (j ? i.substr(0, j) + thousandSymbol : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSymbol) + (places ? '.' + Math.abs(number - i).toFixed(places).slice(2) : "");
+}
+
 var Event = exports.Event = {
   addHandler: addHandler,
   removeHandler: removeHandler,

demo/demolist/Demo1401.js

@@ -67,6 +67,13 @@ class Demo30 extends Component {
       data
     })
   }
+  /**
+   * 表体滚动加载时触发的回调函数
+   * @param endIndex 可视区最后一条数据的 index 序号
+   */
+  handleBodyScroll = endIndex => {
+    console.log('endIndex：', endIndex);
+  }
 
   render() {
     return (
@@ -79,6 +86,7 @@ class Demo30 extends Component {
           onRowClick={(record, index, indent) => {
             console.log('currentIndex--'+index);
           }}
+          onBodyScroll={this.handleBodyScroll}
         />
       </div>
         

demo/index-demo-base.js

@@ -68,7 +68,7 @@ class DemoGroup extends Component {
     render () {
         return (
             <Row>
-            {[DemoArray[41]].map((child,index) => {
+            {[DemoArray[39]].map((child,index) => {
 
                 return (
             <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>

dist/demo.css

@@ -435,6 +435,8 @@
       */
     -ms-user-select: none;
     user-select: none; }
+    .u-table-thead th .required {
+      color: #F22C1D; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
@@ -588,6 +590,14 @@
   .u-table .u-table-drag-hidden-cont {
     width: 100px;
     height: 40px; }
+  .u-table .u-table-link {
+    cursor: pointer;
+    color: #0073E1; }
+  .u-table .u-table-link-underline:hover {
+    text-decoration: underline; }
+  .u-table .u-table-currency {
+    display: inline-block;
+    text-align: right; }
 
 .u-table:focus {
   outline: none;
@@ -826,6 +836,12 @@
   vertical-align: middle;
   overflow: hidden; }
 
+.body-dispaly-in-row .u-table-fieldtype {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
 .u-table-drag-hidden-cont {
   position: absolute;
   top: -1000px; }

docs/api.md

@@ -80,6 +80,8 @@ import 'bee-table/build/Table.css';
 | bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 | size | 表格大小 | `sm / md / lg` | 'md' |
 | hideHeaderScroll | 表体无数据时，表头下是否显示滚动条，默认显示 | bool | false |
+| [v2.2.2新增]showRowNum | 展示序号功能，false时不展示，true时展示默认情况，可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
+
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@@ -127,7 +129,69 @@ import 'bee-table/build/Table.css';
 | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
 | mergeEndIndex | 大数据量滚动加载场景，合并表格行时，设置合并结束位置的行 index 值，设置在列 render 函数中的 props 属性上 | Number |
+| textAlign | 列对齐方式，默认是左对齐（'left、right、center'） | string |
+| [v2.2.2新增]sortEnable | 开启默认排序,根据fieldType属性确定排序规则，默认按字符串排序;优先级低于sorter属性;需配合高阶函数`multiSelect`使用 | bool | false |
+| [v2.2.2新增]fieldType | 列类型，可选`string`,`number`,`currency`,`bool`,`link` | string | 'string' |
+| [v2.2.2新增]fontColor | 列文本颜色 | string | - |
+| [v2.2.2新增]bgColor | 列背景颜色 | string | - |
+| [v2.2.2新增]titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' |
+| [v2.2.2新增]contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' |
+| [v2.2.2新增]required | 必填项,列标题展示红色星号 | bool | false |
 
+#### [v2.2.2新增]fieldType
+
+fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`类型，支持自定义配置(`string`类型为默认类型)。
+
+- numberConfig
+
+|具体属性|说明|类型|默认值|
+|:--|:---|:--|:---|
+|thousand|是否展示千分符号|bool|true|
+|preSymbol|数值的前缀|string|null|
+|nextSymbol|数值的后缀|string|null|
+
+- currencyConfig
+
+|具体属性|说明|类型|默认值|
+|:--|:---|:--|:---|
+|thousand|是否展示千分符号|bool|true|
+|preSymbol|数值的前缀|string|null|
+|nextSymbol|数值的后缀|string|null|
+|precision|精度|number|2|
+|makeUp|末位是否补零|bool|true|
+
+- boolConfig
+
+|具体属性|说明|类型|默认值|
+|:--|:---|:--|:---|
+|trueText|数值为true时的展示文本|string|'是'|
+|falseText|数值为false时的展示文本|string|'否'|
+
+- linkConfig
+
+|具体属性|说明|类型|默认值|
+|:--|:---|:--|:---|
+|url|获取url的函数|function(text,record,index)|null|
+|urlIndex|数据内url字段的key值|string|null|
+|desc|鼠标hover时展示的title值，为false时不展示，true时展示链接的url，为字符串时展示字符串，为函数时展示返回值,如(text,record,index)=>'text'|bool\|string\|func|true|
+|descIndex|数据内desc字段的key值|string|null|
+|linkType|打开窗口的方式|'_self'\|'_blank'|'_blank'|
+|linkColor|链接的字体颜色|string|'#0073E1'|
+|underline|hover时是否展示下划线|bool|false|
+|className|链接的className|string|null|
+
+*url和urlIndex属性至少有一个，均存在时url优先级更高*
+
+*desc和descIndex属性相比，desc优先级更高*
+
+- dateConfig
+
+|具体属性|说明|类型|默认值|
+|:--|:---|:--|:---|
+|moment|传入的moment对象,必需|object|-|
+|format|渲染的时间格式|string|'YYYY-MM-DD'|
+
+*需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入*
 
 ### 高阶函数
 Table内部封装了七个高阶组件，接收基础 Table 组件作为输入，输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。

package.json

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

src/Column.js

@@ -17,7 +17,8 @@ const propTypes = {
     ]),
     render: PropTypes.func,
     onCellClick: PropTypes.func,
-    ifshow:PropTypes.bool
+    ifshow:PropTypes.bool,
+    fieldType: PropTypes.string, // 类型
 }
 
 class Column extends Component {

src/ColumnManager.js

@@ -7,7 +7,7 @@ import Icon from 'bee-icon';
 export default class ColumnManager {
   _cached = {}
 
-  constructor(columns, elements,originWidth,rowDraggAble) {
+  constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
     //判断是否使用行拖拽
     if(rowDraggAble) {
       let dragHandleColumn =[{
@@ -23,10 +23,34 @@ export default class ColumnManager {
       }]
       columns = dragHandleColumn.concat(columns);
     }
+    columns = this.addOrderColumn(columns,showRowNum);
+    
     this.columns = columns || this.normalize(elements);
+
     this.originWidth = originWidth;
   }
 
+  // 向数据列中添加一列:序号
+  addOrderColumn = (columns, showRowNum) => {
+    if(!showRowNum){
+      return columns
+    }
+    let order = {
+      dataIndex: showRowNum.key || '_index',
+      key:'_index',
+      fixed:showRowNum.fixed || 'left',
+      width:showRowNum.width || 50,
+      title: showRowNum.name || '序号',
+    }
+    if(columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio'){ // 多选表格/单选表格时放在第二列,其他情况放到第一列
+      columns = [order].concat(columns);
+    }
+    else{
+      columns.splice(1,0,order); // splice方法改变原数组,返回切割出的数组,此处为[]
+    }
+    return columns;
+  }
+
   isAnyColumnsFixed() {
     return this._cache('isAnyColumnsFixed', () => {
       return this.columns.some(column => !!column.fixed);
@@ -169,7 +193,8 @@ export default class ColumnManager {
     return element && (element.type === Column || element.type === ColumnGroup);
   }
 
-  reset(columns, elements) {
+  reset(columns, elements, showRowNum) {
+    columns = this.addOrderColumn(columns,showRowNum);
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   }

src/Table.js

@@ -58,7 +58,10 @@ const propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   rowDraggAble: PropTypes.bool,
   onDropRow: PropTypes.func,
-  onDragRowStart: PropTypes.func
+  onDragRowStart: PropTypes.func,
+  bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
+  headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
+  showRowNum: PropTypes.object, // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
 };
 
 const defaultProps = {
@@ -96,7 +99,10 @@ const defaultProps = {
   size: 'md',
   rowDraggAble:false,
   onDropRow: ()=>{},
-  onDragRowStart: ()=>{}
+  onDragRowStart: ()=>{},
+  bodyDisplayInRow: true,
+  headerDisplayInRow: true,
+  showRowNum: false,
 };
 
 class Table extends Component {
@@ -104,7 +110,7 @@ class Table extends Component {
     super(props);
     let expandedRowKeys = [];
     let rows = [...props.data];
-    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble);
+    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
     this.store = createStore({ currentHoverKey: null });
     this.firstDid = true;
     if (props.defaultExpandAllRows) {
@@ -154,6 +160,12 @@ class Table extends Component {
     this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
     this.tableUid = null;
     this.contentTable = null;
+    this.leftColumnsLength  //左侧固定列的长度
+    this.centerColumnsLength  //非固定列的长度
+  }
+  componentWillMount() {
+    this.centerColumnsLength = this.columnManager.centerColumns().length
+    this.leftColumnsLength = this.columnManager.leftColumns().length
   }
 
   componentDidMount() {
@@ -190,12 +202,12 @@ class Table extends Component {
       });
     }
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
-      this.columnManager.reset(nextProps.columns);
+      this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
       if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
          this.scrollTop = this.bodyTable.scrollTop;
      }
     } else if (nextProps.children !== this.props.children) {
-      this.columnManager.reset(null, nextProps.children);
+      this.columnManager.reset(null, nextProps.children,this.porps.showRowNum); // 加入this.props.showRowNum参数
     }
     //适配lazyload
     if(nextProps.scrollTop > -1){
@@ -245,6 +257,7 @@ class Table extends Component {
   }
 
   componentWillUnmount() {
+    // 移除绑定事件,避免内存泄漏
     this.contentTable = null;
     EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown);
     EventUtil.removeHandler(this.contentTable,'focus',this.onFocus);
@@ -473,7 +486,9 @@ class Table extends Component {
         fixed: column.fixed,
         width: width,
         dataindex:column.dataIndex,
-        textAlign:column.textAlign
+        textAlign:column.textAlign,
+        titleAlign: column.titleAlign, // 标题水平对齐方式
+        required: column.required, // 标题是否展示必填标志
       };
       if (column.onHeadCellClick) {
         cell.onClick = column.onHeadCellClick;
@@ -663,7 +678,7 @@ class Table extends Component {
     const onRowDoubleClick = props.onRowDoubleClick;
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
-    const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
+    const expandIconColumnIndex = props.expandIconColumnIndex
     if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
       rst.push(
         <TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
@@ -674,6 +689,23 @@ class Table extends Component {
     const lazyEndIndex =  props.lazyLoad && props.lazyLoad.endIndex ?props.lazyLoad.endIndex :-1;
     for (let i = 0; i < data.length; i++) {
       let isHiddenExpandIcon;
+      if ( props.showRowNum ){
+        switch(props.showRowNum.type){
+          case 'number':{
+            data[i][props.showRowNum.key || '_index'] = (props.showRowNum.base || 0) + 1;
+            break;
+          }
+          case 'ascii': {
+            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) + 1;
+            break;
+          }
+        }
+        
+      } 
       const record = data[i];
       const key = this.getRowKey(record, i);
       const childrenColumn = record[childrenColumnName];
@@ -778,6 +810,8 @@ class Table extends Component {
           collapsedIcon={props.collapsedIcon}
           lazyStartIndex = {lazyCurrentIndex}
           lazyEndIndex = {lazyEndIndex}
+          centerColumnsLength={this.centerColumnsLength}
+          leftColumnsLength={this.leftColumnsLength}
         />
       );
       this.treeRowIndex++;
@@ -885,7 +919,7 @@ class Table extends Component {
     const { columns, fixed } = options;
     const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideHeaderScroll = false,expandIconAsCell } = this.props;
     let { useFixedHeader,data } = this.props;
-    const bodyStyle = { ...this.props.bodyStyle };
+    const bodyStyle = { ...this.props.bodyStyle };  // 这里为什么不写在上面?
     const headStyle = {};
     const innerBodyStyle = {};
     const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
@@ -1194,7 +1228,7 @@ class Table extends Component {
 
   handleBodyScroll(e) {
     const headTable = this.headTable;
-    const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
+    const { scroll = {},clsPrefix,handleScrollY, handleScrollX,onBodyScroll} = this.props;
     const {fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
     // Prevent scrollTop setter trigger onScroll event
     // http://stackoverflow.com/q/1386696
@@ -1245,7 +1279,7 @@ class Table extends Component {
       this.lastScrollTop = e.target.scrollTop;
       if(handleScrollY){
         debounce(
-          handleScrollY(this.lastScrollTop,this.treeType),
+          handleScrollY(this.lastScrollTop,this.treeType,onBodyScroll),
         300)
       }
 

src/Table.scss

@@ -466,6 +466,9 @@ $icon-color:#505F79;
       // overflow: hidden;
       // white-space: nowrap;
       // text-overflow: ellipsis;
+      .required {
+        color: #F22C1D;
+      }
       .bee-table-column-sorter {
         position: relative;
         margin-left: 4px;
@@ -487,6 +490,7 @@ $icon-color:#505F79;
           width: 34px;
           cursor: pointer;
         }
+        
        
       }
 
@@ -711,6 +715,17 @@ $icon-color:#505F79;
     height: 40px;
   }
 
+  .u-table-link{
+    cursor: pointer;
+    color: #0073E1;
+  }
+  .u-table-link-underline:hover{
+    text-decoration:underline;
+  }
+  .u-table-currency{
+    display: inline-block;
+    text-align: right;
+  }
 }
 
 .u-table:focus{
@@ -1029,6 +1044,12 @@ $icon-color:#505F79;
     vertical-align: middle;
     overflow: hidden;
   }
+  .u-table-fieldtype{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    overflow: hidden;
+  }
 }
 .u-table-drag-hidden-cont{
   position: absolute;

src/TableCell.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import objectPath from 'object-path';
-
+import i18n from './lib/i18n';
+import { getComponentLocale } from 'bee-locale/build/tool';
+import { formatMoney } from './lib/utils';
 const propTypes = {
     record: PropTypes.object,
     clsPrefix: PropTypes.string,
@@ -28,10 +30,95 @@ class TableCell extends Component{
       onCellClick(record, e);
     }
   }
+
+  //  渲染链接类型
+  renderLinkType = ( data, record,  index, config={}) => {
+    const { url, urlIndex, linkType, className, underline, descIndex, desc, linkColor } = config;
+    let linkUrl = '';
+    if(url){
+      linkUrl = url(data, record, index);
+    }
+    else if(urlIndex){
+      linkUrl = record[urlIndex];
+    }
+    if(linkUrl){
+      let link = () => {
+        window.open(linkUrl,linkType || '_blank');
+      }
+      let cls = 'u-table-link u-table-fieldtype ';
+      if(className){
+        cls += `${className} `;
+      }
+      if(underline){
+        cls += 'u-table-link-underline ';
+      }
+      let title = '';
+      
+      if(desc === true){
+        title = linkUrl;
+      }
+      else if( typeof desc === 'string'){
+        title = desc;
+      }
+      else if( typeof desc === 'function'){
+        title = desc(data, record, index);
+      }
+      else if(descIndex){
+        title = record[descIndex];
+      }
+      return <span onClick={link} className={cls} style={{color:linkColor || ''}} title={title}>{data}</span>
+    }
+    return data;
+  }
+
+  // 渲染布尔类型
+  renderBoolType = ( data, config={} ) => {
+    let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
+    let boolConfig = {...{ trueText: locale['bool_true'], falseText: locale['bool_false']},...config};
+    if(typeof data === 'string'){
+      if(data === 'false' || data === '0'){
+        return boolConfig.falseText;
+      }
+    }
+    else if(!data){
+      return boolConfig.falseText;
+    }
+    return boolConfig.trueText;
+  }
+
+  // 渲染整数/货币类型
+  renderNumber = (data, config={}, width=200) => {
+    const { precision, thousand, makeUp, preSymbol, nextSymbol } = config;
+    let number = formatMoney(data, precision, thousand);
+    if(makeUp === false && number !== '0' && number.indexOf('.') !== -1) {
+      number = number.replace(/0*$/,'').replace(/\.$/,'');
+    }
+    let numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px
+    let res = <span className='u-table-currency-number' >{number}</span>;
+    let pre = preSymbol ? <span className='u-table-currency-pre'>{preSymbol}</span> : null;
+    let next = nextSymbol ? <span className='u-table-currency-next'>{nextSymbol}</span> : null;
+    let title = '';
+    title += typeof preSymbol === 'string' ? preSymbol : '';
+    title += number;
+    title += typeof nextSymbol === 'string' ? nextSymbol : '';
+    return <span className='u-table-currency u-table-fieldtype' style={{width:numberWidth}} title={title}>
+      {pre}
+      {res}
+      {next}
+    </span>;
+  }
+
+  // 渲染时间类型
+  renderDate = ( data, config={}) => {
+    const { moment, format } = config;
+    if(!moment)return data;
+    return moment(data).format(format || 'YYYY-MM-DD');
+  }
+
   render() {
     const { record, indentSize, clsPrefix, indent,
             index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
-    const { dataIndex, render } = column;
+    const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor } = column;
     let {className = ''} = column;
 
     let text = objectPath.get(record, dataIndex);
@@ -49,6 +136,48 @@ class TableCell extends Component{
       }
     }
 
+    // 根据 fieldType 来渲染数据
+    if(!render){
+      switch(column.fieldType){
+        case 'link':{
+          text = this.renderLinkType(text, record, index, column.linkConfig);
+          break;
+        }
+        case 'bool':{
+          text = this.renderBoolType(text, column.boolConfig);
+          break;
+        }
+        case 'currency':{
+          let config = {
+            precision: 2, // 精度值,需要大于0
+            thousand: true, // 是否显示千分符号
+            makeUp: true, // 末位是否补零
+            preSymbol: '', // 前置符号
+            nextSymbol: '', // 后置符号
+          }
+          text = this.renderNumber(text, {...config,...column.currencyConfig}, column.width);
+          break;
+        }
+        case 'number':{
+          let config = {
+            precision: 0, // 精度值,需要大于0
+            thousand: true, // 是否显示千分符号
+            makeUp: false, // 末位是否补零
+            preSymbol: '', // 前置符号
+            nextSymbol: '', // 后置符号
+          }
+          text = this.renderNumber(text, {...config,...column.numberConfig}, column.width);
+          break;
+        }
+        case 'date':{
+          text = this.renderDate(text, column.dateConfig);
+          break;
+        }
+        default : {
+          break;
+        }
+      }
+    }
 
     if (this.isInvalidRenderCellText(text)) {
       text = null;
@@ -72,10 +201,13 @@ class TableCell extends Component{
     if(column.fixed && !fixed){
       className = className+` ${clsPrefix}-fixed-columns-in-body`;
     }
-    if(column.textAlign){
+    if(column.contentAlign){
+      className =  className+` text-${column.contentAlign}`;
+    }
+    else if(column.textAlign){
       className =  className+` text-${column.textAlign}`;
     }
-    if(typeof text == 'string' && bodyDisplayInRow){
+    if((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow){
       title = text
     }
     if(expandIcon && expandIcon.props.expandable){ 
@@ -88,7 +220,7 @@ class TableCell extends Component{
         className={className}
         onClick={this.handleClick}
         title={title}
-
+        style={{color:fontColor,backgroundColor:bgColor}}
       >
         {indentText}
         {expandIcon}

src/TableHeader.js

@@ -745,10 +745,15 @@ class TableHeader extends Component {
                 canDotDrag = "th-can-not-drag";
               }
               let thClassName = `${da.className}`?`${da.className}`:'';
-              if(da.textAlign){
+              if(da.titleAlign){
+                thClassName += ` text-${da.titleAlign} `;
+              }
+              else if(da.textAlign){
                 thClassName += ` text-${da.textAlign} `;
               }
+              
               delete da.textAlign;
+              delete da.titleAlign;
               const keyTemp = {};
               //避免key为undefined
               // if(da.dataindex && da.key ===undefined ){
@@ -779,6 +784,7 @@ class TableHeader extends Component {
               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">
+                      {da.required ? <span className='required'>*</span>:''}
                       {da.children}
                       {
                         dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}

src/TableRow.js

@@ -200,21 +200,21 @@ class TableRow extends Component{
     let event = Event.getEvent(e) ,
         _target = Event.getTarget(event),
         target = _target.parentNode;
-   
+
     if (target.tagName === 'TR') {
-     
+
       this.currentIndex = target.getAttribute("data-row-key");
 
       onDragRowStart && onDragRowStart(this.currentIndex);
     }else{
-     
+
       this.canBeTouch = false
     }
 
   }
 
   onTouchMove = (e) => {
- 
+
     if (!this.canBeTouch) return;
     e.stopPropagation()
     let event = Event.getEvent(e);
@@ -235,7 +235,7 @@ class TableRow extends Component{
    * 手指移开时触发
    */
   onTouchEnd = (e) => {
-   
+
     if(!this.canBeTouch){
       this.canBeTouch = true
       return
@@ -476,6 +476,12 @@ class TableRow extends Component{
       />
     );
     let isExpandIconAsCell = expandIconAsCell ? `${clsPrefix}-expand-columns-in-body` : '';
+    var expandIndexInThisTable
+    if(this.props.fixed === 'right'){
+      expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength-this.props.centerColumnsLength
+    }else {
+      expandIndexInThisTable = expandIconColumnIndex
+    }
     for (let i = 0; i < columns.length; i++) {
       if (expandIconAsCell && i === 0 && !showSum ) {
         cells.push(
@@ -488,7 +494,7 @@ class TableRow extends Component{
         );
       }
       const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
-        ? false : (i === expandIconColumnIndex);
+        ? false : (i === expandIndexInThisTable);
       cells.push(
         <TableCell
           clsPrefix={clsPrefix}

src/lib/bigData.js

@@ -212,8 +212,9 @@ export default function bigData(Table) {
      *@description  根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
      *@param 最新一次滚动的scrollTop
      *@param treeType是否是树状表
+     *@param callback表体滚动过程中触发的回调
      */
-    handleScrollY = (nextScrollTop, treeType) => {
+    handleScrollY = (nextScrollTop, treeType, callback) => {
       //树表逻辑
       // 关键点是动态的获取startIndex和endIndex
       // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
@@ -308,6 +309,7 @@ export default function bigData(Table) {
               this.startIndex = startIndex;
               this.endIndex = endIndex;
               this.setState({ needRender: !needRender });
+              callback(parseInt(currentIndex + rowsInView));
             }
           }
           // 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
@@ -320,6 +322,7 @@ export default function bigData(Table) {
               this.startIndex = startIndex;
               this.endIndex = this.startIndex + loadCount;
               this.setState({ needRender: !needRender });
+              callback(parseInt(currentIndex + rowsInView));
             }
             // console.log(
             //   "**index**" + index,

src/lib/i18n.js

@@ -14,6 +14,8 @@ module.exports = {
     'be_equal_to':'等于',
     'not_equal_to':'不等于',
     "no_data":'暂无数据',
+    "bool_true":"是",
+    "bool_false":"否",
     'en-us': {
         'resetSettings': 'reset settings',
         'include': 'include',
@@ -29,6 +31,8 @@ module.exports = {
         'be_equal_to':'be equal to',
         'not_equal_to':'not equal to',
         "no_data":'no data',
+        "bool_true":"true",
+        "bool_false":"false",
     },
     'zh-tw': {
         'resetSettings': '還原設置',
@@ -45,5 +49,7 @@ module.exports = {
         'be_equal_to':'等於',
         'not_equal_to':'不等於',
         "no_data":'暫無數據',
+        "bool_true":"是",
+        "bool_false":"否",
     }
 }

src/lib/multiSelect.js

@@ -193,10 +193,18 @@ export default function multiSelect(Table, Checkbox) {
         return _defaultColumns.concat(columns);
     }
 
+    // 实现行点击时触发多选框勾选的需求
+    onRowClick = (record,index,event) =>{
+      this.onCheckboxChange('',record, index)();
+      if( this.props.onRowClick ){
+        this.props.onRowClick(record,index,event);
+      }
+    }
+
     render() {
       const {columns} = this.props;
       const {data} = this.state;
-      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
+      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} onRowClick={this.onRowClick}/>
     }
   };
 }

src/lib/sort.js

@@ -244,8 +244,13 @@ export default function sort(Table, Icon) {
       }
 
       let sortButton;
-      if (column.sorter) {
+
+      // sorter和sortEnable均可触发排序,且sorter优先级更高
+      if (column.sorter || column.sortEnable ) {
         //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
+        if ( column.sortEnable && !column.sorter) {
+          column.sorter = column.fieldType === 'number' ? this.numberSortFn(column.dataIndex) : this.defaultSortFn(column.dataIndex);
+        }
         if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
           column.orderNum = this.getOrderNum();
         }
@@ -270,6 +275,17 @@ export default function sort(Table, Icon) {
       return column;
     };
 
+    // 默认的比较函数,即字符串比较函数
+    defaultSortFn = (key) => (a, b)=> {
+      return a[key] >= b[key] ? 1 : -1;
+    }
+    // 数值比较函数
+    numberSortFn = (key) => (a, b)=> {
+        let numberA = parseFloat(a[key]);
+        let numberB = parseFloat(b[key]);
+        return numberA >= numberB ? 1 : -1;
+    }
+
     _flatToColumn(flatColumns){
       const colLen = flatColumns.length;
       let parentIndex,rsColumns = [];

src/lib/utils.js

@@ -293,6 +293,23 @@ export function checkDicimalInvalid(value, precision) {
   return result;
 };
 
+
+/**
+ * 将数值转化为货币类型
+ * @param {*} number 数值
+ * @param {*} places 精度
+ * @param {*} thousand 是否展示千分位
+ */
+export function formatMoney(number, places, thousand) {
+  number = number || 0;
+  places = !isNaN(places = Math.abs(places)) ? places : 2;
+  let thousandSymbol = thousand ? "," : '';
+  let negative = number < 0 ? "-" : "";
+  let i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "";
+  let j = (j = i.length) > 3 ? j % 3 : 0;
+  return negative + (j ? i.substr(0, j) + thousandSymbol : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSymbol) + (places ? '.' + Math.abs(number - i).toFixed(places).slice(2) : "");
+}
+
 export const Event = {
   addHandler,
   removeHandler,