publish 1.6.17

CHANGELOG.md

@@ -1,3 +1,28 @@
+<a name="1.6.16"></a>
+## [1.6.16](https://github.com/tinper-bee/bee-table/compare/v1.6.15...v1.6.16) (2018-12-17)
+
+
+
+<a name="1.6.15"></a>
+## [1.6.15](https://github.com/tinper-bee/bee-table/compare/v1.6.14...v1.6.15) (2018-12-15)
+
+
+
+<a name="1.6.14"></a>
+## [1.6.14](https://github.com/tinper-bee/bee-table/compare/v1.6.13...v1.6.14) (2018-12-14)
+
+
+
+<a name="1.6.13"></a>
+## [1.6.13](https://github.com/tinper-bee/bee-table/compare/v1.6.12...v1.6.13) (2018-12-14)
+
+
+
+<a name="1.6.12"></a>
+## [1.6.12](https://github.com/tinper-bee/bee-table/compare/v1.6.11...v1.6.12) (2018-12-11)
+
+
+
 <a name="1.6.11"></a>
 ## [1.6.11](https://github.com/tinper-bee/bee-table/compare/v1.6.9...v1.6.11) (2018-12-06)
 
@@ -144,7 +169,7 @@
 
 
 <a name="1.5.1"></a>
-## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
+## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
 
 
 

README.md

@@ -108,6 +108,7 @@ class Demo extends Component {
 | onFilterChange       | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
 | onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false
+| syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
 
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@@ -135,6 +136,8 @@ class Demo extends Component {
 | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
 | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
+| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
+| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 
 
 

build/FilterDropDown.js

@@ -59,7 +59,6 @@ var FilterDropDown = function (_Component) {
         _this.onSelectDropdown = function (item) {
             var _this$props = _this.props,
                 onSelectDropdown = _this$props.onSelectDropdown,
-                dataText = _this$props.dataText,
                 filterDropdownType = _this$props.filterDropdownType;
 
             if (onSelectDropdown) {
@@ -97,90 +96,145 @@ var FilterDropDown = function (_Component) {
             var _this$state = _this.state,
                 selectValue = _this$state.selectValue,
                 selectNumberValue = _this$state.selectNumberValue;
-            var filterDropdownType = _this.props.filterDropdownType;
+            var _this$props2 = _this.props,
+                filterDropdownType = _this$props2.filterDropdownType,
+                filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys;
 
             var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
                 return _i18n2["default"];
             });
-            switch (filterDropdownType) {
+            var stringEnum = {
-                case 'string':
+                LIKE: 'include',
-                    return _react2["default"].createElement(
+                ULIKE: 'exclusive',
-                        _beeMenus2["default"],
+                EQ: 'equal',
-                        {
+                UEQ: 'unequal',
-                            onSelect: _this.onSelectDropdown,
+                START: 'begin',
-                            selectedKeys: selectValue
+                END: 'end'
-                        },
+            };
-                        _react2["default"].createElement(
+            var numberEnum = {
-                            Item,
+                GT: 'greater_than',
-                            { key: 'LIKE' },
+                GTEQ: 'great_than_equal_to',
-                            locale['include']
+                LT: 'less_than',
-                        ),
+                LTEQ: 'less_than_equal_to',
-                        _react2["default"].createElement(
+                EQ: 'be_equal_to',
-                            Item,
+                UEQ: 'not_equal_to'
-                            { key: 'ULIKE' },
+            };
-                            locale['exclusive']
+            if (filterDropdownIncludeKeys != undefined) {
-                        ),
+                switch (filterDropdownType) {
-                        _react2["default"].createElement(
+                    case 'string':
-                            Item,
+                        return _react2["default"].createElement(
-                            { key: 'EQ' },
+                            _beeMenus2["default"],
-                            locale['equal']
+                            {
-                        ),
+                                onSelect: _this.onSelectDropdown,
-                        _react2["default"].createElement(
+                                selectedKeys: selectValue
-                            Item,
+                            },
-                            { key: 'UEQ' },
+                            filterDropdownIncludeKeys.map(function (item) {
-                            locale['unequal']
+                                return _react2["default"].createElement(
-                        ),
+                                    Item,
-                        _react2["default"].createElement(
+                                    { key: item },
-                            Item,
+                                    locale[stringEnum[item]]
-                            { key: 'START' },
+                                );
-                            locale['begin']
+                            })
-                        ),
+                        );
-                        _react2["default"].createElement(
+                    case 'number':
-                            Item,
+                        return _react2["default"].createElement(
-                            { key: 'END' },
+                            _beeMenus2["default"],
-                            locale['end']
+                            {
-                        )
+                                onSelect: _this.onSelectDropdown,
-                    );
+                                selectedKeys: selectNumberValue
-                case 'number':
+                            },
-                    return _react2["default"].createElement(
+                            filterDropdownIncludeKeys.map(function (item) {
-                        _beeMenus2["default"],
+                                return _react2["default"].createElement(
-                        {
+                                    Item,
-                            onSelect: _this.onSelectDropdown,
+                                    { key: item },
-                            selectedKeys: selectNumberValue
+                                    locale[numberEnum[item]]
-                        },
+                                );
-                        _react2["default"].createElement(
+                            })
-                            Item,
+                        );
-                            { key: 'GT' },
+                    default:
-                            locale['greater_than']
+                        return _react2["default"].createElement('div', null);
-                        ),
+                }
-                        _react2["default"].createElement(
+            } else {
-                            Item,
+                switch (filterDropdownType) {
-                            { key: 'GTEQ' },
+                    case 'string':
-                            locale['great_than_equal_to']
+                        return _react2["default"].createElement(
-                        ),
+                            _beeMenus2["default"],
-                        _react2["default"].createElement(
+                            {
-                            Item,
+                                onSelect: _this.onSelectDropdown,
-                            { key: 'LT' },
+                                selectedKeys: selectValue
-                            locale['less_than']
+                            },
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'LIKE' },
-                            { key: 'LTEQ' },
+                                locale['include']
-                            locale['less_than_equal_to']
+                            ),
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'ULIKE' },
-                            { key: 'EQ' },
+                                locale['exclusive']
-                            locale['be_equal_to']
+                            ),
-                        ),
+                            _react2["default"].createElement(
-                        _react2["default"].createElement(
+                                Item,
-                            Item,
+                                { key: 'EQ' },
-                            { key: 'UEQ' },
+                                locale['equal']
-                            locale['not_equal_to']
+                            ),
-                        )
+                            _react2["default"].createElement(
-                    );
+                                Item,
-                default:
+                                { key: 'UEQ' },
-                    return _react2["default"].createElement('div', null);
+                                locale['unequal']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'RLIKE' },
+                                locale['begin']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LLIKE' },
+                                locale['end']
+                            )
+                        );
+                    case 'number':
+                        return _react2["default"].createElement(
+                            _beeMenus2["default"],
+                            {
+                                onSelect: _this.onSelectDropdown,
+                                selectedKeys: selectNumberValue
+                            },
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'GT' },
+                                locale['greater_than']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'GTEQ' },
+                                locale['great_than_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LT' },
+                                locale['less_than']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'LTEQ' },
+                                locale['less_than_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'EQ' },
+                                locale['be_equal_to']
+                            ),
+                            _react2["default"].createElement(
+                                Item,
+                                { key: 'UEQ' },
+                                locale['not_equal_to']
+                            )
+                        );
+                    default:
+                        return _react2["default"].createElement('div', null);
+                }
             }
         };
 

build/FilterType.js

@@ -68,13 +68,15 @@ var FilterType = function (_Component) {
                 onFilterClear = _this$props.onFilterClear,
                 dataIndex = _this$props.dataIndex;
 
-            _this.setState({
+            if (_this.state.value !== "") {
-                value: "", //清空值
+                _this.setState({
-                condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
+                    value: "", //清空值
-            }, function () {
+                    condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
-                //调用清除方法参数为当前字段的field
+                }, function () {
-                onFilterClear && onFilterClear(dataIndex);
+                    //调用清除方法参数为当前字段的field
-            });
+                    onFilterClear && onFilterClear(dataIndex);
+                });
+            }
         };
 
         _this.changeText = function (val) {
@@ -89,7 +91,7 @@ var FilterType = function (_Component) {
                 dataIndex = _this$props2.dataIndex;
 
             if (e.keyCode == 13) {
-                onFilterChange(dataIndex, e.target.value, _this.state.condition);
+                e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
             }
         };
 
@@ -107,7 +109,7 @@ var FilterType = function (_Component) {
             _this.setState({
                 condition: item.key
             }, function () {
-                onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
+                _this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
             });
         };
 
@@ -183,6 +185,8 @@ var FilterType = function (_Component) {
 
         _this.renderControl = function (rendertype) {
             var _this$props7 = _this.props,
+                filterInputNumberOptions = _this$props7.filterInputNumberOptions,
+                filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys,
                 dataIndex = _this$props7.dataIndex,
                 filterDropdown = _this$props7.filterDropdown,
                 filterDropdownType = _this$props7.filterDropdownType,
@@ -213,19 +217,20 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowClear: _this.state.value,
                             isShowCondition: filterDropdown,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'number':
                     return _react2["default"].createElement(
                         'div',
                         { className: clsPrefix + ' filter-wrap' },
-                        _react2["default"].createElement(_beeInputNumber2["default"], {
+                        _react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, {
                             className: className,
                             value: _this.state.value,
                             onChange: _this.changeNumber,
                             iconStyle: 'one'
-                        }),
+                        })),
                         _react2["default"].createElement(_FilterDropDown2["default"], {
                             locale: locale,
                             dataIndex: dataIndex,
@@ -234,7 +239,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowClear: _this.state.value != 0,
                             isShowCondition: filterDropdown,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'dropdown':
@@ -253,7 +259,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
                             isShowClear: _this.state.value,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'date':
@@ -275,7 +282,8 @@ var FilterType = function (_Component) {
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
                             isShowClear: _this.state.value,
-                            filterDropdownType: filterDropdownType
+                            filterDropdownType: filterDropdownType,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'daterange':
@@ -300,7 +308,8 @@ var FilterType = function (_Component) {
                             onSelectDropdown: _this.onSelectDropdown,
                             onClickClear: _this.clearFilter,
                             isShowCondition: filterDropdown,
-                            isShowClear: _this.state.value
+                            isShowClear: _this.state.value,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 case 'bool':
@@ -312,7 +321,8 @@ var FilterType = function (_Component) {
                             onChange: onChange
                         }),
                         _react2["default"].createElement(_FilterDropDown2["default"], { locale: locale,
-                            onSelectDropdown: onSelectDropdown
+                            onSelectDropdown: onSelectDropdown,
+                            filterDropdownIncludeKeys: filterDropdownIncludeKeys
                         })
                     );
                 default:

build/Table.css

@@ -178,6 +178,8 @@
     transition: background 0.3s ease; }
     .u-table th[colspan] {
       text-align: center; }
+    .u-table th ::last-child {
+      overflow: hidden; }
   .u-table td {
     border-bottom: 1px solid #e9e9e9; }
   .u-table tr {
@@ -328,7 +330,16 @@
     .u-table-thead .filter-wrap .filter-btns {
       min-width: 58px; }
   .u-table-thead th {
-    background: #f7f7f7; }
+    background: #f7f7f7;
+    background-clip: padding-box;
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    /*
+        Introduced in IE 10. 
+      */
+    -ms-user-select: none;
+    user-select: none; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
@@ -608,11 +619,13 @@
       top: 0px;
       left: 3px; }
 
-.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+.u-filter-dropdown-menu-wrap {
-  line-height: 32px;
+  z-index: 1800; }
-  height: 32px;
+  .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-  padding: 0px 16px 0 16px;
+    line-height: 32px;
-  cursor: pointer; }
+    height: 32px;
+    padding: 0px 16px 0 16px;
+    cursor: pointer; }
 
 .u-checkbox {
   height: 16px;

build/Table.js

@@ -92,7 +92,13 @@ var propTypes = {
   getBodyWrapper: _propTypes2["default"].func,
   children: _propTypes2["default"].node,
   draggable: _propTypes2["default"].bool,
-  minColumnWidth: _propTypes2["default"].number
+  minColumnWidth: _propTypes2["default"].number,
+  filterable: _propTypes2["default"].bool,
+  filterDelay: _propTypes2["default"].number,
+  onFilterChange: _propTypes2["default"].func,
+  onFilterClear: _propTypes2["default"].func,
+  syncHover: _propTypes2["default"].bool
+
 };
 
 var defaultProps = {
@@ -132,7 +138,8 @@ var defaultProps = {
   },
   columns: [],
   minColumnWidth: 80,
-  locale: {}
+  locale: {},
+  syncHover: true
 };
 
 var Table = function (_Component) {
@@ -501,7 +508,9 @@ var Table = function (_Component) {
           filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
           filterdropdowndata: column.filterDropdownData, //自定义数据格式
           filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
-          filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
+          filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String
+          filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示
+          filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性
         });
       }
     });
@@ -629,6 +638,11 @@ var Table = function (_Component) {
         leafColumns = this.columnManager.leafColumns();
       }
 
+      //合计代码如果是最后一行并且有合计功能时，最后一行为合计列
+      if (i == data.length - 1 && props.showSum) {
+        className = className + ' sumrow';
+      }
+
       rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
         indent: indent,
         indentSize: props.indentSize,
@@ -1086,9 +1100,14 @@ var Table = function (_Component) {
   };
 
   Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
-    this.store.setState({
+    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-      currentHoverKey: isHover ? key : null
+    var syncHover = this.props.syncHover;
-    });
+
+    if (syncHover) {
+      this.store.setState({
+        currentHoverKey: isHover ? key : null
+      });
+    }
   };
 
   Table.prototype.render = function render() {

build/TableCell.js

@@ -72,7 +72,8 @@ var TableCell = function (_Component) {
         index = _props2.index,
         expandIcon = _props2.expandIcon,
         column = _props2.column,
-        fixed = _props2.fixed;
+        fixed = _props2.fixed,
+        showSum = _props2.showSum;
     var dataIndex = column.dataIndex,
         render = column.render;
     var _column$className = column.className,
@@ -84,7 +85,7 @@ var TableCell = function (_Component) {
     var colSpan = void 0;
     var rowSpan = void 0;
 
-    if (render) {
+    if (render && !showSum) {
       text = render(text, record, index);
       if (this.isInvalidRenderCellText(text)) {
         tdProps = text.props || {};

build/TableHeader.js

@@ -18,10 +18,6 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _shallowequal = require("shallowequal");
-
-var _shallowequal2 = _interopRequireDefault(_shallowequal);
-
 var _throttleDebounce = require("throttle-debounce");
 
 var _utils = require("./utils");
@@ -127,7 +123,6 @@ var TableHeader = function (_Component) {
     };
 
     _this.onLineMouseUp = function (event) {
-
       _this.clearDragBorder(event);
     };
 
@@ -173,7 +168,7 @@ var TableHeader = function (_Component) {
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", currentKey);
       _this.currentObj = _this.props.rows[0][currentIndex];
-      event.dataTransfer.setDragImage(event.target, 0, 0);
+      // event.dataTransfer.setDragImage(event.target, 0, 0);
     };
 
     _this.onDragOver = function (e) {
@@ -229,6 +224,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
             , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //数值输入
         case "number":
@@ -242,6 +238,8 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
+            , filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性
           });
         //下拉框选择
         case "dropdown":
@@ -269,12 +267,14 @@ var TableHeader = function (_Component) {
             rendertype: type,
             className: clsPrefix + " filter-dropdown",
             data: selectDataSource,
-            dataIndex: dataIndex //字段
+            notFoundContent: "Loading" //没有数据显示的默认字
+            , dataIndex: dataIndex //字段
             , onFilterChange: _this.handlerFilterChange //输入框回调
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             onFocus: rows[1][index]["filterdropdownfocus"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //日期
         case "date":
@@ -289,6 +289,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         //日期范围
         case "daterange":
@@ -303,6 +304,7 @@ var TableHeader = function (_Component) {
             , onFilterClear: _this.handlerFilterClear //清除回调
             , filterDropdown: rows[1][index]["filterdropdown"],
             filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
           });
         default:
           //不匹配类型默认文本输入
@@ -317,13 +319,17 @@ var TableHeader = function (_Component) {
     };
     _this.minWidth = 80; //确定最小宽度就是80
     _this.table = null;
+    _this._thead = null; //当前对象
     return _this;
   }
 
   /**
-   * 动态绑定th line 事件
+   *
-   * type 为false 为增加事件
+   * 动态绑定th line 事件方法
-   * eventSource 为false 给 th 内部的div增加事件
+   * @param {*} events
+   * @param {*} type  type 为false 为增加事件
+   * @param {*} eventSource 为false 给 th 内部的div增加事件
+   * @memberof TableHeader
    */
   TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
     var _table = this.table,
@@ -355,6 +361,14 @@ var TableHeader = function (_Component) {
     }
   };
 
+  /**
+   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+   * @param {*} events
+   * @param {*} type
+   * @memberof TableHeader
+   */
+
+
   TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
     for (var i = 0; i < events.length; i++) {
       var _event = events[i];
@@ -371,13 +385,15 @@ var TableHeader = function (_Component) {
     this.initEvent();
   };
 
-  TableHeader.prototype.componentDidMount = function componentDidMount() {
+  // componentDidMount(){
-    this.initTable();
+  // this.initTable();
-    this.initEvent();
+  // this.initEvent();
-  };
+  // } 
 
   /**
-   * 拖拽列宽的事件处理
+   * 初始化拖拽列宽的事件处理
+   * @returns
+   * @memberof TableHeader
    */
 
 
@@ -395,7 +411,8 @@ var TableHeader = function (_Component) {
   };
 
   /**
-   * 移除拖拽宽度的事件
+   * 移除当前全局事件对象
+   * @memberof TableHeader
    */
 
 
@@ -408,13 +425,15 @@ var TableHeader = function (_Component) {
 
   /**
    * 获取table的属性存放在this.table 中。(公用方法)
+   * @returns
+   * @memberof TableHeader
    */
 
 
   TableHeader.prototype.initTable = function initTable() {
     if (!this.props.dragborder && !this.props.draggable) return;
-    var el = _reactDom2["default"].findDOMNode(this);
+    // let el = ReactDOM.findDOMNode(this);
-    var tableDome = el.parentNode;
+    var tableDome = this._thead.parentNode;
     var table = {};
     if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
       table.table = tableDome;
@@ -438,11 +457,30 @@ var TableHeader = function (_Component) {
     }
   };
 
-  //---拖拽列宽代码逻辑----start-----
+  /**
+   * 调整列宽的move事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽的down事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽的up事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 调整列宽到区域以外的up事件
+   */
 
 
   TableHeader.prototype.clearDragBorder = function clearDragBorder() {
-    // if (!this.props.dragborder || !this.props.draggable) return;
     if (!this.drag || !this.drag.option) return;
     var rows = this.props.rows;
 
@@ -459,31 +497,40 @@ var TableHeader = function (_Component) {
   //---拖拽列宽代码逻辑----start-----
 
   /**
-   * 拖拽交换列的事件处理
+   * 调整交换列down事件
+   * @memberof TableHeader
+   */
+
+  /**
+   * 调整交换列up事件
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 添加换列的事件监听
    */
   TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
     var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
     { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
     { key: 'drop', fun: this.onDrop }];
     this.thEventListen(events, '', true);
-    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
   };
 
+  /**
+   * 删除换列的事件监听
+   */
+
+
   TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
     var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
     this.thEventListen(events, 'remove', true);
   };
 
   /**
-   * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
+   * 开始调整交换列的事件
-   * @memberof TableHeader
    */
-  // onDragEnter = (e) => { 
+
-  //   if (!this.props.draggable) return;
-  //   if(this.drag.option === 'border'){return;}
-  //   let data = this.getCurrentEventData(e);
-  //   if (!this.currentObj || this.currentObj.key == data.key) return;
-  // }; 
 
   /**
    * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@@ -491,6 +538,12 @@ var TableHeader = function (_Component) {
    */
 
 
+  /**
+   * 获取当前th上的对象数据
+   * @param {*} e
+   * @returns
+   * @memberof TableHeader
+   */
   TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
     var event = _utils.Event.getEvent(e);
     var th = this.getThDome(event.target);
@@ -511,9 +564,9 @@ var TableHeader = function (_Component) {
   };
 
   /**
-   *根据拖拽，获取当前的Th属性
+   * 根据当前鼠标点击的节点，进行递归遍历，最终找到th
    * @param {*} element
-   * @returns
+   * @returns  <th />对象
    * @memberof TableHeader
    */
 
@@ -552,28 +605,21 @@ var TableHeader = function (_Component) {
     var _props = this.props,
         clsPrefix = _props.clsPrefix,
         rowStyle = _props.rowStyle,
-        onDragStart = _props.onDragStart,
-        onDragOver = _props.onDragOver,
-        onDrop = _props.onDrop,
         draggable = _props.draggable,
         dragborder = _props.dragborder,
         rows = _props.rows,
         filterable = _props.filterable,
-        onFilterRowsChange = _props.onFilterRowsChange,
-        onMouseDown = _props.onMouseDown,
-        onMouseMove = _props.onMouseMove,
-        onMouseUp = _props.onMouseUp,
-        onMouseOut = _props.onMouseOut,
-        contentWidthDiff = _props.contentWidthDiff,
         fixed = _props.fixed,
-        lastShowIndex = _props.lastShowIndex,
+        lastShowIndex = _props.lastShowIndex;
-        contentTable = _props.contentTable;
+
 
     var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
 
     return _react2["default"].createElement(
       "thead",
-      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
+      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
+          return _this2._thead = _thead;
+        } }),
       rows.map(function (row, index) {
         return _react2["default"].createElement(
           "tr",
@@ -646,6 +692,5 @@ TableHeader.defaultProps = {
 
 
 TableHeader.propTypes = propTypes;
-
 exports["default"] = TableHeader;
 module.exports = exports["default"];

build/TableRow.js

@@ -187,6 +187,8 @@ var TableRow = function (_Component) {
         indentSize = _props7.indentSize,
         isHiddenExpandIcon = _props7.isHiddenExpandIcon,
         fixed = _props7.fixed;
+
+    var showSum = false;
     var className = this.props.className;
 
 
@@ -194,6 +196,10 @@ var TableRow = function (_Component) {
       className += ' ' + clsPrefix + '-hover';
     }
 
+    //判断是否为合计行
+    if (className.indexOf('sumrow') > -1) {
+      showSum = true;
+    }
     var cells = [];
 
     var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], {
@@ -207,7 +213,7 @@ var TableRow = function (_Component) {
     });
 
     for (var i = 0; i < columns.length; i++) {
-      if (expandIconAsCell && i === 0) {
+      if (expandIconAsCell && i === 0 && !showSum) {
         cells.push(_react2["default"].createElement(
           'td',
           {
@@ -217,7 +223,7 @@ var TableRow = function (_Component) {
           expandIcon
         ));
       }
-      var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick ? false : i === expandIconColumnIndex;
+      var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex;
       cells.push(_react2["default"].createElement(_TableCell2["default"], {
         clsPrefix: clsPrefix,
         record: record,
@@ -227,6 +233,7 @@ var TableRow = function (_Component) {
         column: columns[i],
         key: columns[i].key,
         fixed: fixed,
+        showSum: showSum,
         expandIcon: isColumnHaveExpandIcon ? expandIcon : null
       }));
     }

build/lib/bigData.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports["default"] = bigData;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  rowsInView: _propTypes2["default"].number.isRequired
+};
+var defaultProps = {
+  data: undefined,
+  height: 40, //默认行高
+  rowsInView: 25
+};
+
+function bigData(Table) {
+  return function (_Component) {
+    _inherits(BigData, _Component);
+
+    function BigData(props) {
+      _classCallCheck(this, BigData);
+
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+      _this.state = {
+        currentIndex: 0,
+        scrollLeft: 0,
+        scrollTop: 0
+      };
+
+      _this.cachedRowHeight = [];
+      _this.lastScrollTop = 0;
+      return _this;
+    }
+    /**
+     *获取数据区高度 
+     * 
+     * 
+    **/
+
+    BigData.prototype.getContentHeight = function getContentHeight() {
+      if (!this.props.data) return 0;
+      return this.getSumHeight(0, this.props.data.length);
+    };
+
+    BigData.prototype.getSumHeight = function getSumHeight(start, end) {
+      var rowHeight = this.props.rowHeight;
+
+      var height = 0;
+      for (var i = start; i < end; i++) {
+        height += this.cachedRowHeight[i] || rowHeight;
+      }
+      return height;
+    };
+
+    BigData.prototype.getData = function getData() {};
+
+    BigData.prototype.render = function render() {
+      return _react2["default"].createElement(Table, _extends({}, this.props, { data: this.getData }));
+    };
+
+    return BigData;
+  }(_react.Component);
+  BigData.defaultProps = defaultProps;
+  BigData.propTypes = propTypes;
+}
+module.exports = exports["default"];

build/lib/sum.js

@@ -22,13 +22,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-//创建新列存放  “合计”  字段
-var columns2 = {
-  title: "合计",
-  key: "showSum",
-  dataIndex: "showSum"
-};
-
 function sum(Table) {
   return function (_React$Component) {
     _inherits(SumTable, _React$Component);
@@ -40,98 +33,6 @@ function sum(Table) {
       //array , tree
       var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
-      _this.currentFooter = function () {
-        var data_2 = _this.props.data;
-        var columns_sum = _this.props.columns.concat();
-        var sumCol_index = void 0,
-            sumColIndexArr = [];
-        //用一个对象存储合计数据，这里合计对象的属性对应每列字段
-        for (var i = 0; i < columns_sum.length; i++) {
-          if (columns_sum[i].sumCol) {
-            sumColIndexArr.push(columns_sum[i].dataIndex);
-          }
-        }
-        var obj = {};
-        sumColIndexArr.forEach(function (sumCol_index) {
-
-          obj[sumCol_index] = 0;
-          if (Array.isArray(data_2)) {
-            for (var _i = 0; _i < data_2.length; _i++) {
-              if (typeof data_2[_i][sumCol_index] == "number" || !isNaN(data_2[_i][sumCol_index])) {
-                obj[sumCol_index] -= -data_2[_i][sumCol_index];
-              } else {
-                obj[sumCol_index] = "";
-              }
-            }
-          }
-          obj.key = sumCol_index + "sumData";
-        });
-        obj.showSum = "合计";
-        obj = [obj];
-        //将设置的和用户传入的合并属性
-        columns_sum[0] = _extends({}, columns_sum[0], columns2);
-        //除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
-        columns_sum.map(function (item, index) {
-          if (typeof item.render == "function" && !item.sumCol) {
-            item.render = "";
-          }
-          return item;
-        });
-        return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj, originWidth: true }));
-      };
-
-      _this.currentTreeFooter = function () {
-        var _this$props = _this.props,
-            columns = _this$props.columns,
-            data = _this$props.data;
-
-        var _columns = [];
-        _this.getNodeItem(columns, _columns);
-        var _countObj = {};
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          var _loop = function _loop() {
-            var column = _step.value;
-
-            if (typeof column.render == "function" && !column.sumCol) {
-              column.render = "";
-            }
-            if (column.sumCol) {
-              var count = 0;
-              data.forEach(function (da, i) {
-                var _num = da[column.key];
-                count += _num;
-              });
-              _countObj[column.key] = count;
-            }
-          };
-
-          for (var _iterator = _columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            _loop();
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator["return"]) {
-              _iterator["return"]();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-
-        var _sumArray = [_extends({ key: "sumData", showSum: "合计" }, _countObj)];
-        columns[0] = _extends({}, columns[0], columns2);
-        return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray, originWidth: true }));
-      };
-
       _this.getNodeItem = function (array, newArray) {
         array.forEach(function (da, i) {
           if (da.children) {
@@ -155,35 +56,54 @@ function sum(Table) {
         return type;
       };
 
-      _this.setFooterRender = function () {
+      _this.addSumData = function () {
-        var columns = _this.props.columns;
+        var _this$props = _this.props,
+            _this$props$data = _this$props.data,
+            data = _this$props$data === undefined ? [] : _this$props$data,
+            _this$props$columns = _this$props.columns,
+            columns = _this$props$columns === undefined ? [] : _this$props$columns;
 
+        var sumdata = {},
+            newColumns = [],
+            newData = [];
         if (!Array.isArray(columns)) {
-          console.log("data type is error !");return;
+          console.log("columns type is error !");return;
         }
         var type = _this.getTableType();
-        if (type == "tree") {
+        if (type == 'tree') {
-          return _this.currentTreeFooter();
+          _this.getNodeItem(columns, newColumns);
         } else {
-          return _this.currentFooter();
+          newColumns = columns;
         }
+        //返回一个新的数据
+        newData = data.slice();
+        newColumns.forEach(function (column, index) {
+          sumdata[column.dataIndex] = "";
+          if (column.sumCol) {
+            var count = 0;
+            data.forEach(function (da, i) {
+
+              var _num = parseInt(da[column.key]);
+              //排查字段值为NAN情况
+              if (_num === _num) {
+                count += _num;
+              }
+            });
+            sumdata[column.dataIndex] = count;
+          }
+          if (index == 0) {
+            sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];
+          }
+        });
+
+        newData.push(sumdata);
+        return newData;
       };
 
       _this.tableType = "array";
       return _this;
     }
 
-    SumTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-      var columns = this.props.columns;
-
-      if (columns != nextProps.columns) {
-        this.setFooterRender();
-      }
-    };
-
-    //合计数字列,并将计算所得数据存储到一个obj对象中
-
-
     /**
      * 获取当前的表格类型。
      * 
@@ -192,11 +112,9 @@ function sum(Table) {
 
     SumTable.prototype.render = function render() {
       return _react2["default"].createElement(Table, _extends({}, this.props, {
-        footerScroll: true,
         columns: this.props.columns,
-        data: this.props.data,
+        showSum: true,
-        footer: this.setFooterRender
+        data: this.addSumData()
-        // originWidth={true}
       }));
     };
 

build/utils.js

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

demo/TableDemo.scss

@@ -14,6 +14,7 @@
 @import "../node_modules/bee-message/build/Message.css";
 @import "../node_modules/bee-dropdown/build/Dropdown.css";
 @import "../node_modules/bee-input-number/build/InputNumber.css";
+@import "../node_modules/bee-modal/build/Modal.css";
 @import "../src/Table.scss";
 
 

dist/demo.css

@@ -6,6 +6,7 @@
 @import url(../node_modules/bee-message/build/Message.css);
 @import url(../node_modules/bee-dropdown/build/Dropdown.css);
 @import url(../node_modules/bee-input-number/build/InputNumber.css);
+@import url(../node_modules/bee-modal/build/Modal.css);
 .red {
   color: rgb(244,67,54) !important; }
 
@@ -8438,6 +8439,8 @@ ul {
     transition: background 0.3s ease; }
     .u-table th[colspan] {
       text-align: center; }
+    .u-table th ::last-child {
+      overflow: hidden; }
   .u-table td {
     border-bottom: 1px solid #e9e9e9; }
   .u-table tr {
@@ -8878,11 +8881,13 @@ ul {
       top: 0px;
       left: 3px; }
 
-.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+.u-filter-dropdown-menu-wrap {
-  line-height: 32px;
+  z-index: 1800; }
-  height: 32px;
+  .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
-  padding: 0px 16px 0 16px;
+    line-height: 32px;
-  cursor: pointer; }
+    height: 32px;
+    padding: 0px 16px 0 16px;
+    cursor: pointer; }
 
 .u-checkbox {
   height: 16px;
@@ -10319,4 +10324,16 @@ li.rc-time-picker-panel-select-option-disabled:hover {
   .demo25 .u-table-filter-column-filter-icon {
     right: 15px; }
 
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
+
+.demo3 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
+
 /*# sourceMappingURL=demo.css.map */

docs/api.md

@@ -54,6 +54,9 @@ import 'bee-table/build/Table.css';
 | onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false
 | sort       | 排序的属性 | object| {  mode:'single'//单列排序,  backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
+| syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
+
+
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
 
 
@@ -80,6 +83,8 @@ import 'bee-table/build/Table.css';
 | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
 | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
+| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
+| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 
 {% include "mixin.md"%}
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.6.11",
+ "version": "1.6.17",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -11,7 +11,7 @@
   "Table"
  ],
  "engines": {
-  "node": ">=4.0.0"
+  "node": ">=6.0.0"
  },
  "jest": {
   "moduleFileExtensions": [
@@ -56,15 +56,16 @@
   "bee-loading": "^1.0.3",
   "bee-locale": "0.0.11",
   "bee-menus": "^1.0.7",
+  "bee-modal": "^1.0.9",
   "bee-popover": "^1.0.2",
   "bee-select": "^1.0.21",
   "classnames": "^2.2.5",
+  "component-classes": "^1.2.6",
   "lodash.clonedeep": "^4.5.0",
   "object-path": "^0.11.3",
   "shallowequal": "^1.0.2",
   "throttle-debounce": "^2.0.1",
   "tinper-bee-core": "latest",
-  "component-classes": "^1.2.6",
   "warning": "^3.0.0"
  },
  "peerDependencies": {
@@ -90,8 +91,8 @@
   "enzyme": "^2.9.1",
   "es5-shim": "~4.1.10",
   "jest": "^22.0.4",
-  "react": "^15.5.0",
+  "react": "^16.6.3",
   "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^15.5.0"
+  "react-dom": "^16.6.3"
  }
 }

src/FilterDropDown.js

@@ -27,22 +27,22 @@ class FilterDropDown extends Component {
      * @param {*} s 选中的selectRecord
      */
     onSelectDropdown = (item) => {
-        let { onSelectDropdown, dataText, filterDropdownType } = this.props;
+        let { onSelectDropdown, filterDropdownType } = this.props;
         if (onSelectDropdown) {
-                if (filterDropdownType == 'string') {
+            if (filterDropdownType == 'string') {
-                    this.setState({
+                this.setState({
-                        selectValue: [item.key]
+                    selectValue: [item.key]
-                    }, () => {
+                }, () => {
-                        onSelectDropdown(item);
+                    onSelectDropdown(item);
-                    });
+                });
-                }
+            }
-                if (filterDropdownType == 'number') {
+            if (filterDropdownType == 'number') {
-                    this.setState({
+                this.setState({
-                        selectNumberValue: [item.key]
+                    selectNumberValue: [item.key]
-                    }, () => {
+                }, () => {
-                        onSelectDropdown(item);
+                    onSelectDropdown(item);
-                    });
+                });
-                }
+            }
         }
     }
 
@@ -69,35 +69,80 @@ class FilterDropDown extends Component {
      */
     getMenu = () => {
         let { selectValue, selectNumberValue } = this.state;
-        let { filterDropdownType } = this.props;
+        let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
         let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
-        switch (filterDropdownType) {
+        let stringEnum = {
-            case 'string':
+            LIKE: 'include',
-                return <Menu
+            ULIKE: 'exclusive',
-                    onSelect={this.onSelectDropdown}
+            EQ: 'equal',
-                    selectedKeys={selectValue}
+            UEQ: 'unequal',
-                >
+            START: 'begin',
-                    <Item key="LIKE">{locale['include']}</Item>
+            END: 'end'
-                    <Item key="ULIKE">{locale['exclusive']}</Item>
+        };
-                    <Item key="EQ">{locale['equal']}</Item>
+        let numberEnum = {
-                    <Item key="UEQ">{locale['unequal']}</Item>
+            GT: 'greater_than',
-                    <Item key="START">{locale['begin']}</Item>
+            GTEQ: 'great_than_equal_to',
-                    <Item key="END">{locale['end']}</Item>
+            LT: 'less_than',
-                </Menu>
+            LTEQ: 'less_than_equal_to',
-            case 'number':
+            EQ: 'be_equal_to',
-                return <Menu
+            UEQ: 'not_equal_to'
-                    onSelect={this.onSelectDropdown}
+        };
-                    selectedKeys={selectNumberValue}
+        if (filterDropdownIncludeKeys != undefined) {
-                >
+            switch (filterDropdownType) {
-                    <Item key="GT">{locale['greater_than']}</Item>
+                case 'string':
-                    <Item key="GTEQ">{locale['great_than_equal_to']}</Item>
+                    return <Menu
-                    <Item key="LT">{locale['less_than']}</Item>
+                        onSelect={this.onSelectDropdown}
-                    <Item key="LTEQ">{locale['less_than_equal_to']}</Item>
+                        selectedKeys={selectValue}
-                    <Item key="EQ">{locale['be_equal_to']}</Item>
+                    >
-                    <Item key="UEQ">{locale['not_equal_to']}</Item>
+                        {
-                </Menu>
+                            filterDropdownIncludeKeys.map(item => {
-            default:
+                                return <Item key={item}>{locale[stringEnum[item]]}</Item>
-                return <div></div>;
+                            })
+                        }
+                    </Menu>
+                case 'number':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectNumberValue}
+                    >
+                        {
+                            filterDropdownIncludeKeys.map(item => {
+                                return <Item key={item}>{locale[numberEnum[item]]}</Item>
+                            })
+                        }
+                    </Menu>
+                default:
+                    return <div></div>;
+            }
+        } else {
+            switch (filterDropdownType) {
+                case 'string':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectValue}
+                    >
+                        <Item key="LIKE">{locale['include']}</Item>
+                        <Item key="ULIKE">{locale['exclusive']}</Item>
+                        <Item key="EQ">{locale['equal']}</Item>
+                        <Item key="UEQ">{locale['unequal']}</Item>
+                        <Item key="RLIKE">{locale['begin']}</Item>
+                        <Item key="LLIKE">{locale['end']}</Item>
+                    </Menu>
+                case 'number':
+                    return <Menu
+                        onSelect={this.onSelectDropdown}
+                        selectedKeys={selectNumberValue}
+                    >
+                        <Item key="GT">{locale['greater_than']}</Item>
+                        <Item key="GTEQ">{locale['great_than_equal_to']}</Item>
+                        <Item key="LT">{locale['less_than']}</Item>
+                        <Item key="LTEQ">{locale['less_than_equal_to']}</Item>
+                        <Item key="EQ">{locale['be_equal_to']}</Item>
+                        <Item key="UEQ">{locale['not_equal_to']}</Item>
+                    </Menu>
+                default:
+                    return <div></div>;
+            }
         }
     }
     render() {

src/FilterType.js

@@ -33,13 +33,15 @@ class FilterType extends Component {
      */
     clearFilter = () => {
         let { onFilterClear, dataIndex } = this.props;
-        this.setState({
+        if (this.state.value !== "") {
-            value: "",//清空值
+            this.setState({
-            condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
+                value: "",//清空值
-        }, () => {
+                condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
-            //调用清除方法参数为当前字段的field
+            }, () => {
-            onFilterClear && onFilterClear(dataIndex);
+                //调用清除方法参数为当前字段的field
-        });
+                onFilterClear && onFilterClear(dataIndex);
+            });
+        }
     }
 
     /**
@@ -59,7 +61,7 @@ class FilterType extends Component {
     changeTextCall = (e) => {
         let { onFilterChange, dataIndex } = this.props;
         if (e.keyCode == 13) {
-            onFilterChange(dataIndex, e.target.value, this.state.condition);
+            e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
         }
     }
     /**
@@ -82,7 +84,7 @@ class FilterType extends Component {
         this.setState({
             condition: item.key
         }, () => {
-            onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
+            this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
         });
     }
 
@@ -157,7 +159,7 @@ class FilterType extends Component {
      * @returns
      */
     renderControl = (rendertype) => {
-        let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
+        let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
         switch (rendertype) {
             case 'text':
                 return <div className={`${clsPrefix} filter-wrap`}>
@@ -177,12 +179,14 @@ class FilterType extends Component {
                         isShowClear={this.state.value}
                         isShowCondition={filterDropdown}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
             case 'number':
                 return <div className={`${clsPrefix} filter-wrap`}>
                     <InputNumber
+                        {...filterInputNumberOptions}
                         className={className}
                         value={this.state.value}
                         onChange={this.changeNumber}
@@ -197,6 +201,7 @@ class FilterType extends Component {
                         isShowClear={this.state.value != 0}
                         isShowCondition={filterDropdown}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -215,6 +220,7 @@ class FilterType extends Component {
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown></div>
             case 'date':
@@ -235,6 +241,7 @@ class FilterType extends Component {
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
                         filterDropdownType={filterDropdownType}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -259,6 +266,7 @@ class FilterType extends Component {
                         onClickClear={this.clearFilter}
                         isShowCondition={filterDropdown}
                         isShowClear={this.state.value}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>
@@ -270,6 +278,7 @@ class FilterType extends Component {
                     />
                     <FilterDropDown locale={locale}
                         onSelectDropdown={onSelectDropdown}
+                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                     >
                     </FilterDropDown>
                 </div>

src/Table.js

@@ -42,7 +42,13 @@ const propTypes = {
   getBodyWrapper: PropTypes.func,
   children: PropTypes.node,
   draggable: PropTypes.bool,
-  minColumnWidth: PropTypes.number
+  minColumnWidth: PropTypes.number,
+  filterable: PropTypes.bool,
+  filterDelay: PropTypes.number,
+  onFilterChange: PropTypes.func,
+  onFilterClear: PropTypes.func,
+  syncHover: PropTypes.bool,
+
 };
 
 const defaultProps = {
@@ -71,7 +77,8 @@ const defaultProps = {
   emptyText: () => 'No Data',
   columns:[],
   minColumnWidth: 80,
-  locale:{}
+  locale:{},
+  syncHover: true
 };
 
 class Table extends Component {
@@ -401,7 +408,9 @@ class Table extends Component {
           filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
           filterdropdowndata: column.filterDropdownData,//自定义数据格式
           filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
-          filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
+          filterdropdowntype: column.filterDropdownType,//下拉的类型分为 String,Number 默认是String
+          filterdropdownincludekeys: column.filterDropdownIncludeKeys,//下拉条件按照指定的keys去显示
+          filterinputnumberoptions: column.filterInputNumberOptions//设置数值框内的详细属性
         });
       }
     });
@@ -494,7 +503,7 @@ class Table extends Component {
       if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
         isHiddenExpandIcon = props.haveExpandIcon(record, i);
       }
-      const className = rowClassName(record, i, indent);
+      let className = rowClassName(record, i, indent);
 
       const onHoverProps = {};
       if (this.columnManager.isAnyColumnsFixed()) {
@@ -524,6 +533,11 @@ class Table extends Component {
       }
 
 
+      //合计代码如果是最后一行并且有合计功能时，最后一行为合计列
+      if(i == data.length -1 && props.showSum){
+        className = className + ' sumrow';
+      }
+
       rst.push(
         <TableRow
           indent={indent}
@@ -956,9 +970,14 @@ class Table extends Component {
   }
 
   handleRowHover(isHover, key) {
-    this.store.setState({
+    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-      currentHoverKey: isHover ? key : null,
+    let { syncHover } = this.props;
-    });
+    if(syncHover){
+      this.store.setState({
+        currentHoverKey: isHover ? key : null,
+      });
+    }
+
   }
 
   render() {

src/Table.scss

@@ -47,6 +47,9 @@ $checkbox-height:16px;
     &[colspan] {
       text-align: center;
     }
+    ::last-child{
+      overflow: hidden;
+    }
   }
 
   td {
@@ -695,6 +698,7 @@ $checkbox-height:16px;
 }
 
 .u-filter-dropdown-menu-wrap {
+    z-index: 1800;
     .u-dropdown-menu {
         li.u-dropdown-menu-item {
             line-height: 32px;

src/TableCell.js

@@ -30,7 +30,7 @@ class TableCell extends Component{
   }
   render() {
     const { record, indentSize, clsPrefix, indent,
-            index, expandIcon, column ,fixed} = this.props;
+            index, expandIcon, column ,fixed,showSum} = this.props;
     const { dataIndex, render } = column;
     let {className = ''} = column;
 
@@ -39,7 +39,7 @@ class TableCell extends Component{
     let colSpan;
     let rowSpan;
 
-    if (render) {
+    if (render && !showSum) {
       text = render(text, record, index);
       if (this.isInvalidRenderCellText(text)) {
         tdProps = text.props || {};

src/TableHeader.js

@@ -433,6 +433,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //数值输入
@@ -448,6 +449,8 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
+            filterInputNumberOptions={rows[1][index]["filterinputnumberoptions"]}//设置数值框内的详细属性
           />
         );
       //下拉框选择
@@ -475,12 +478,14 @@ class TableHeader extends Component {
             rendertype={type}
             className={`${clsPrefix} filter-dropdown`}
             data={selectDataSource}
+            notFoundContent={"Loading"}//没有数据显示的默认字
             dataIndex={dataIndex}//字段
             onFilterChange={this.handlerFilterChange}//输入框回调
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             onFocus={rows[1][index]["filterdropdownfocus"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //日期
@@ -497,6 +502,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       //日期范围
@@ -513,6 +519,7 @@ class TableHeader extends Component {
             onFilterClear={this.handlerFilterClear}//清除回调
             filterDropdown={rows[1][index]["filterdropdown"]}
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+            filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
           />
         );
       default:

src/TableRow.js

@@ -125,13 +125,17 @@ class TableRow extends Component{
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
       expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
     } = this.props;
-
+    let showSum = false;
     let { className } = this.props;
 
     if (this.state.hovered) {
       className += ` ${clsPrefix}-hover`;
     }
-
+    
+    //判断是否为合计行
+    if(className.indexOf('sumrow')>-1){
+      showSum = true;
+    }
     const cells = [];
 
     const expandIcon = (
@@ -147,7 +151,7 @@ class TableRow extends Component{
     );
 
     for (let i = 0; i < columns.length; i++) {
-      if (expandIconAsCell && i === 0) {
+      if (expandIconAsCell && i === 0 && !showSum ) {
         cells.push(
           <td
             className={`${clsPrefix}-expand-icon-cell`}
@@ -157,7 +161,7 @@ class TableRow extends Component{
           </td>
         );
       }
-      const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick)
+      const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
         ? false : (i === expandIconColumnIndex);
       cells.push(
         <TableCell
@@ -169,6 +173,7 @@ class TableRow extends Component{
           column={columns[i]}
           key={columns[i].key}
           fixed= {fixed}
+          showSum={showSum}
           expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
         />
       );

src/lib/bigData.js

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    rowsInView: PropTypes.number.isRequired,
+}
+const defaultProps = {
+    data: undefined,
+    height: 40,//默认行高
+    rowsInView:25
+}
+
+export default function bigData(Table) {
+  return class BigData extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        currentIndex: 0,
+        scrollLeft: 0,
+        scrollTop: 0
+      };
+
+      this.cachedRowHeight = [];
+      this.lastScrollTop = 0;
+    }
+    /**
+     *获取数据区高度 
+     * 
+     * 
+    **/
+
+    getContentHeight() {
+      if (!this.props.data) return 0;
+      return this.getSumHeight(0, this.props.data.length);
+    }
+
+    getSumHeight(start, end) {
+      const { rowHeight } = this.props;
+      let height = 0;
+      for (let i = start; i < end; i++) {
+        height += this.cachedRowHeight[i] || rowHeight;
+      }
+      return height;
+    }
+
+    getData(){
+        
+    }
+    render(){
+        return <Table {...this.props}  data={this.getData}/>
+    }
+  };
+  BigData.defaultProps = defaultProps;
+  BigData.propTypes = propTypes;
+}

src/lib/sum.js

@@ -1,12 +1,5 @@
 import React from "react";
 
-//创建新列存放  “合计”  字段
-let columns2 = {
-  title: "合计",
-  key: "showSum",
-  dataIndex: "showSum"
-};
-
 export default function sum(Table) {
   return class SumTable extends React.Component {
     //无状态
@@ -16,79 +9,6 @@ export default function sum(Table) {
       this.tableType = "array";
     }
 
-    componentWillReceiveProps(nextProps){
-      const {columns} = this.props;
-      if(columns != nextProps.columns){
-        this.setFooterRender();
-      }
-    }
-
-    //合计数字列,并将计算所得数据存储到一个obj对象中
-    currentFooter = () => {
-      let data_2 = this.props.data;
-      let columns_sum = this.props.columns.concat();
-      let sumCol_index,sumColIndexArr=[];
-      //用一个对象存储合计数据，这里合计对象的属性对应每列字段
-      for (let i = 0; i < columns_sum.length; i++) {
-        if (columns_sum[i].sumCol) {
-          sumColIndexArr.push(columns_sum[i].dataIndex);
-        }
-      }
-      let obj = {};
-      sumColIndexArr.forEach(sumCol_index=>{
-        
-        obj[sumCol_index] = 0;
-        if (Array.isArray(data_2)) {
-          for (let i = 0; i < data_2.length; i++) {
-            if (
-              typeof data_2[i][sumCol_index] == "number" ||
-              !isNaN(data_2[i][sumCol_index])
-            ) {
-              obj[sumCol_index] -= -data_2[i][sumCol_index];
-            } else {
-              obj[sumCol_index] = "";
-            }
-          }
-        }
-        obj.key = sumCol_index+"sumData";
-        
-      })
-      obj.showSum = "合计";
-      obj = [obj];
-      //将设置的和用户传入的合并属性
-      columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
-      //除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
-      columns_sum.map((item, index) => {
-        if (typeof item.render == "function" && !item.sumCol) {
-          item.render = "";
-        }
-        return item;
-      });
-      return <Table{...this.props} loading={false} footerScroll showHeader={false} columns={columns_sum} data={obj} originWidth={true}/>;
-    };
-
-    currentTreeFooter =()=>{
-      const {columns,data} = this.props;
-      let _columns = [];
-      this.getNodeItem(columns,_columns);
-      let _countObj = {};
-      for (let column of _columns) {
-        if (typeof column.render == "function" && !column.sumCol) {
-          column.render = "";
-        }
-        if(column.sumCol){
-          let count = 0;
-          data.forEach((da,i)=>{
-            let _num = da[column.key];
-            count += _num;
-          })
-          _countObj[column.key] = count;
-        }
-      }
-      let _sumArray = [{key:"sumData",showSum:"合计",..._countObj}];
-      columns[0] = Object.assign({}, columns[0], columns2);
-      return <Table{...this.props} bordered={false} loading={false} footerScroll showHeader={false} columns={columns} data={_sumArray} originWidth={true}/>;
-    }
 
     getNodeItem =(array,newArray)=>{
       array.forEach((da,i)=>{
@@ -116,26 +36,51 @@ export default function sum(Table) {
       return type;
     }
 
-    setFooterRender=()=>{
+
-      const {columns} = this.props;
+
-      if (!Array.isArray(columns)) {console.log("data type is error !");return;}
+    addSumData=()=>{
+      let {data=[],columns=[]} = this.props;
+      let sumdata = {},newColumns = [],newData = [];
+      if (!Array.isArray(columns)) {console.log("columns type is error !");return;}
       let type = this.getTableType();
-      if(type == "tree"){
+      if(type == 'tree'){
-        return this.currentTreeFooter();
+        this.getNodeItem(columns,newColumns);
       }else{
-        return this.currentFooter();
+        newColumns = columns;
       }
+      //返回一个新的数据
+      newData = data.slice();
+      newColumns.forEach((column,index)=>{
+        sumdata[column.dataIndex] = "";
+        if(column.sumCol){
+          let count = 0;
+          data.forEach((da,i)=>{
+            
+            let _num = parseInt(da[column.key]);
+            //排查字段值为NAN情况
+            if(_num === _num){
+              count += _num;
+            }
+            
+          })
+          sumdata[column.dataIndex] = count;
+        }
+        if(index == 0){
+          sumdata[column.dataIndex] = "合计 "+sumdata[column.dataIndex];
+        }
+      })
+       
+      newData.push(sumdata);
+      return newData;
     }
 
     render() {
       return (
         <Table
           {...this.props}
-          footerScroll
           columns={this.props.columns}
-          data={this.props.data}
+          showSum={true}
-          footer={this.setFooterRender}
+          data={this.addSumData()}
-          // originWidth={true}
         />
       );
     }