feat(增加按值和条件过滤列、多列排序):

build/FilterDropDown.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _beeDropdown = require('bee-dropdown');
+
+var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
+
+var _beeMenus = require('bee-menus');
+
+var _beeMenus2 = _interopRequireDefault(_beeMenus);
+
+var _beeButton = require('bee-button');
+
+var _beeButton2 = _interopRequireDefault(_beeButton);
+
+var _beeIcon = require('bee-icon');
+
+var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
+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 Item = _beeMenus2["default"].Item;
+
+var FilterDropDown = function (_Component) {
+    _inherits(FilterDropDown, _Component);
+
+    function FilterDropDown() {
+        _classCallCheck(this, FilterDropDown);
+
+        var _this = _possibleConstructorReturn(this, _Component.call(this));
+
+        _this.onSelectDropdown = function (s) {
+            var onSelectDropdown = _this.props.onSelectDropdown;
+
+            if (onSelectDropdown) {
+                _this.setState({
+                    selectValue: s.key
+                }, function () {
+                    onSelectDropdown(s);
+                });
+            }
+        };
+
+        _this.onClickClear = function () {
+            var onClickClear = _this.props.onClickClear;
+
+            if (onClickClear) {
+                _this.setState({
+                    selectValue: []
+                }, function () {
+                    onClickClear();
+                });
+            }
+        };
+
+        _this.state = {
+            selectValue: []
+        };
+        return _this;
+    }
+
+    FilterDropDown.prototype.render = function render() {
+        var isShowCondition = this.props.isShowCondition;
+
+        var dropmenu = _react2["default"].createElement(
+            _beeMenus2["default"],
+            {
+                onSelect: this.onSelectDropdown,
+                selectedKeys: this.state.selectValue
+            },
+            _react2["default"].createElement(
+                Item,
+                { key: '1' },
+                '\u7B49\u4E8E'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '2' },
+                '\u5305\u542B'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '3' },
+                '\u4EE5\u7ED3\u5C3E'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '4' },
+                '\u7A7A'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '5' },
+                '\u4E0D\u7B49\u4E8E'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '6' },
+                '\u4E0D\u5305\u542B'
+            ),
+            _react2["default"].createElement(
+                Item,
+                { key: '7' },
+                '\u4EE5\u5F00\u59CB'
+            )
+        );
+        return _react2["default"].createElement(
+            'div',
+            null,
+            isShowCondition == 'show' && _react2["default"].createElement(
+                _beeDropdown2["default"],
+                {
+                    trigger: ['click'],
+                    overlay: dropmenu,
+                    animation: 'slide-up'
+                },
+                _react2["default"].createElement(
+                    _beeButton2["default"],
+                    { shape: 'border', style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 } },
+                    _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0 }, type: 'uf-filter' })
+                )
+            ),
+            _react2["default"].createElement(
+                _beeButton2["default"],
+                { onClick: this.onClickClear, shape: 'border', style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" } },
+                _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
+            )
+        );
+    };
+
+    return FilterDropDown;
+}(_react.Component);
+
+exports["default"] = FilterDropDown;
+module.exports = exports['default'];

build/FilterType.js

@@ -0,0 +1,226 @@
+'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; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _beeFormControl = require('bee-form-control');
+
+var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
+
+var _beeSelect = require('bee-select');
+
+var _beeSelect2 = _interopRequireDefault(_beeSelect);
+
+var _beeDatepicker = require('bee-datepicker');
+
+var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
+
+var _FilterDropDown = require('./FilterDropDown');
+
+var _FilterDropDown2 = _interopRequireDefault(_FilterDropDown);
+
+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 = {
+    filterDropdown: _propTypes2["default"].string
+};
+
+var FilterType = function (_Component) {
+    _inherits(FilterType, _Component);
+
+    function FilterType() {
+        _classCallCheck(this, FilterType);
+
+        var _this = _possibleConstructorReturn(this, _Component.call(this));
+
+        _this.clearText = function () {
+            _this.setState({
+                text: ""
+            }, function () {
+                _this.changeText("");
+            });
+        };
+
+        _this.changeText = function (val) {
+            var onChange = _this.props.onChange;
+
+            if (onChange) {
+                onChange(val);
+                _this.setState({
+                    text: val
+                });
+            }
+        };
+
+        _this.changeSelect = function (val) {
+            var onChange = _this.props.onChange;
+
+            if (onChange) {
+                onChange(val);
+                _this.setState({
+                    selectValue: val
+                });
+            }
+        };
+
+        _this.clearSelectValue = function () {
+            _this.setState({
+                selectValue: ""
+            }, function () {
+                _this.changeSelect("");
+            });
+        };
+
+        _this.clearDateValue = function () {
+            _this.setState({
+                dateValue: ""
+            }, function () {
+                _this.changeDate("");
+            });
+        };
+
+        _this.changeDate = function (val) {
+            var onChange = _this.props.onChange;
+
+            if (onChange) {
+                onChange(val);
+                _this.setState({
+                    dateValue: val,
+                    open: false
+                });
+            }
+        };
+
+        _this.renderControl = function (rendertype) {
+            var _this$props = _this.props,
+                filterDropdown = _this$props.filterDropdown,
+                className = _this$props.className,
+                onChange = _this$props.onChange,
+                onSelectDropdown = _this$props.onSelectDropdown,
+                clsPrefix = _this$props.clsPrefix;
+
+            switch (rendertype) {
+                case 'text':
+                    return _react2["default"].createElement(
+                        'div',
+                        { className: clsPrefix + ' filter-wrap' },
+                        _react2["default"].createElement(_beeFormControl2["default"], {
+                            ref: function ref(el) {
+                                return _this.text = el;
+                            },
+                            value: _this.state.text,
+                            className: className,
+                            onChange: _this.changeText
+                        }),
+                        _react2["default"].createElement(_FilterDropDown2["default"], {
+                            onSelectDropdown: onSelectDropdown,
+                            onClickClear: _this.clearText,
+                            isShowClear: _this.state.text,
+                            isShowCondition: filterDropdown
+                        })
+                    );
+                case 'dropdown':
+                    return _react2["default"].createElement(
+                        'div',
+                        { className: clsPrefix + ' filter-wrap' },
+                        _react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
+                            value: _this.state.selectValue,
+                            onChange: _this.changeSelect
+                        })),
+                        _react2["default"].createElement(_FilterDropDown2["default"], {
+                            onSelectDropdown: onSelectDropdown,
+                            onClickClear: _this.clearSelectValue,
+                            isShowCondition: filterDropdown,
+                            isShowClear: _this.state.selectValue
+                        })
+                    );
+                case 'date':
+                    return _react2["default"].createElement(
+                        'div',
+                        { className: clsPrefix + ' filter-wrap' },
+                        _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
+                            value: _this.state.dateValue,
+                            onChange: _this.changeDate,
+                            open: _this.state.open
+                        })),
+                        filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], {
+                            onSelectDropdown: onSelectDropdown,
+                            onClickClear: _this.clearDateValue,
+                            isShowCondition: filterDropdown,
+                            isShowClear: _this.state.dateValue
+                        })
+                    );
+                case 'bool':
+                    return _react2["default"].createElement(
+                        'div',
+                        { className: clsPrefix + ' filter-wrap' },
+                        _react2["default"].createElement(Switch, {
+                            className: className,
+                            onChange: onChange
+                        }),
+                        filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], {
+                            onSelectDropdown: onSelectDropdown
+                        })
+                    );
+                default:
+                    break;
+            }
+        };
+
+        _this.state = {
+            text: "",
+            selectValue: "",
+            dateValue: "",
+            open: false
+        };
+        return _this;
+    }
+    //清除文本
+
+    //设置文本
+
+    //设置下拉值
+
+    //清除下拉值
+
+    //清除日期值
+
+    //设置日期值
+
+    //组件渲染
+
+
+    FilterType.prototype.render = function render() {
+        var rendertype = this.props.rendertype;
+
+        return this.renderControl(rendertype);
+    };
+
+    return FilterType;
+}(_react.Component);
+
+FilterType.propTypes = propTypes;
+FilterType.defaultProps = {
+    filterDropdown: 'show'
+};
+exports["default"] = FilterType;
+module.exports = exports['default'];

build/Table.css

@@ -70,7 +70,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1600;
+  z-index: 1900;
   opacity: .7;
   filter: blur(0.5px);
   background-color: #fff; }
@@ -218,7 +218,7 @@
     padding-right: 0px; }
   .u-table-fixed-header .u-table-body-inner {
     height: 100%;
-    overflow: scroll; }
+    overflow: auto; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
     overflow-x: scroll;
     padding-bottom: 20px;
@@ -313,15 +313,63 @@
     .u-table-fixed-right-expanded-row {
       color: transparent;
       pointer-events: none; }
-  .u-table-scroll-position-left .u-table-fixed-left {
-    box-shadow: none; }
   .u-table-scroll-position-right .u-table-fixed-right {
     box-shadow: none; }
+  .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
+    font-weight: normal; }
+  .u-table-thead .filter-wrap {
+    display: flex; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis; }
+    .u-table-thead th .bee-table-column-sorter {
+      position: relative;
+      margin-left: 4px;
+      width: 14px;
+      height: 1em;
+      vertical-align: middle;
+      text-align: center;
+      display: inline-block; }
+      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
+      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
+        line-height: 6px;
+        display: block;
+        width: 14px;
+        cursor: pointer; }
+      .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
+        display: none; }
+    .u-table-thead th:hover .bee-table-column-sorter > .bee-table-column-sorter-flat {
+      display: block; }
+    .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,
+    .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {
+      color: #108ee9; }
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-up {
+      -webkit-filter: none;
+      filter: none;
+      font-size: 12px; }
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-down,
+    .u-table-thead th .bee-table-column-sorter .uf-triangle-up {
+      display: inline-block;
+      padding: 0;
+      font-size: 12px;
+      font-size: 8px\9;
+      -webkit-transform: scale(0.66667) rotate(0deg);
+      -ms-transform: scale(0.66667) rotate(0deg);
+      transform: scale(0.66667) rotate(0deg);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+      zoom: 1;
+      line-height: 4px;
+      height: 4px;
+      color: #999;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s; }
+    .u-table-thead th:hover .bee-table-column-sorter {
+      display: inline-block; }
   .u-table-thead .th-drag {
     cursor: pointer; }
   .u-table-thead .th-drag-hover {
@@ -334,7 +382,7 @@
       right: 0px;
       top: 0;
       background: transparent;
-      width: 2px;
+      width: 1px;
       box-sizing: border-box;
       z-index: 100; }
     .u-table-thead-th .th-drag-gap {
@@ -512,50 +560,6 @@
     right: 20px;
     position: absolute; }
 
-.bee-table-column-sorter {
-  position: relative;
-  margin-left: 4px;
-  display: inline-block;
-  width: 14px;
-  height: 1em;
-  vertical-align: middle;
-  text-align: center; }
-  .bee-table-column-sorter > .bee-table-column-sorter-down,
-  .bee-table-column-sorter > .bee-table-column-sorter-up {
-    line-height: 6px;
-    display: block;
-    width: 14px;
-    cursor: pointer; }
-
-.bee-table-column-sorter-down.on .uf-triangle-down,
-.bee-table-column-sorter-down.on .uf-triangle-up,
-.bee-table-column-sorter-up.on .uf-triangle-down,
-.bee-table-column-sorter-up.on .uf-triangle-up {
-  color: #108ee9; }
-
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  -webkit-filter: none;
-  filter: none;
-  font-size: 12px; }
-
-.bee-table-column-sorter .uf-triangle-down,
-.bee-table-column-sorter .uf-triangle-up {
-  display: inline-block;
-  padding: 0;
-  font-size: 12px;
-  font-size: 8px\9;
-  -webkit-transform: scale(0.66667) rotate(0deg);
-  -ms-transform: scale(0.66667) rotate(0deg);
-  transform: scale(0.66667) rotate(0deg);
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-  zoom: 1;
-  line-height: 4px;
-  height: 4px;
-  color: #999;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s; }
-
 .col-resize-container {
   height: 0px;
   position: relative; }

build/Table.js

@@ -276,6 +276,9 @@ var Table = function (_Component) {
     if (this.computeWidth < this.contentWidth) {
       var contentWidthDiff = this.contentWidth - this.computeWidth;
       this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
+    } else {
+      this.contentWidth = this.computeWidth;
+      this.setState({ contentWidth: this.contentWidth }); //重新渲染，为了显示滚动条
     }
   };
 
@@ -330,6 +333,10 @@ var Table = function (_Component) {
 
   Table.prototype.getHeader = function getHeader(columns, fixed) {
     var _props = this.props,
+        filterDelay = _props.filterDelay,
+        onFilterRowsDropChange = _props.onFilterRowsDropChange,
+        onFilterRowsChange = _props.onFilterRowsChange,
+        filterable = _props.filterable,
         showHeader = _props.showHeader,
         expandIconAsCell = _props.expandIconAsCell,
         clsPrefix = _props.clsPrefix,
@@ -373,7 +380,11 @@ var Table = function (_Component) {
       rows: rows,
       contentTable: this.contentTable,
       rowStyle: trStyle,
-      fixed: fixed
+      fixed: fixed,
+      filterable: filterable,
+      onFilterRowsChange: onFilterRowsChange,
+      onFilterRowsDropChange: onFilterRowsDropChange,
+      filterDelay: filterDelay
     })) : null;
   };
 
@@ -383,6 +394,7 @@ var Table = function (_Component) {
     var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var rows = arguments[2];
 
+    var filterCol = [];
     rows = rows || [];
     rows[currentRow] = rows[currentRow] || [];
 
@@ -415,7 +427,24 @@ var Table = function (_Component) {
       if (cell.colSpan !== 0) {
         rows[currentRow].push(cell);
       }
+      //判断是否启用过滤
+      if (_this2.props.filterable) {
+        //组装Filter需要的Col
+        filterCol.push({
+          key: column.key,
+          children: "过滤渲染",
+          width: column.width,
+          filtertype: column.filterType,
+          dataindex: column.dataIndex,
+          datasource: _this2.props.data,
+          format: column.format,
+          filterdropdown: column.filterDropdown
+        });
+      }
     });
+    if (this.props.filterable) {
+      rows.push(filterCol);
+    }
     return rows.filter(function (row) {
       return row.length > 0;
     });
@@ -693,7 +722,7 @@ var Table = function (_Component) {
         if (scroll.x === true) {
           tableStyle.tableLayout = 'fixed';
         } else {
-          tableStyle.width = scroll.x;
+          tableStyle.width = _this3.contentWidth;
         }
       }
       var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
@@ -705,7 +734,7 @@ var Table = function (_Component) {
       return _react2["default"].createElement(
         'table',
         { className: ' ' + tableClassName + '  table-bordered ' + _drag_class + ' ', style: tableStyle },
-        _this3.props.dragborder ? null : _this3.getColGroup(columns, fixed),
+        _this3.getColGroup(columns, fixed),
         hasHead ? _this3.getHeader(columns, fixed) : null,
         tableBody
       );
@@ -895,7 +924,7 @@ var Table = function (_Component) {
     if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
       return;
     }
-    if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) {
+    if (e.target.scrollLeft !== this.lastScrollLeft) {
       if (e.target === bodyTable && headTable) {
         headTable.scrollLeft = e.target.scrollLeft;
       } else if (e.target === headTable && bodyTable) {

build/TableHeader.js

@@ -18,8 +18,14 @@ var _shallowequal = require('shallowequal');
 
 var _shallowequal2 = _interopRequireDefault(_shallowequal);
 
+var _throttleDebounce = require('throttle-debounce');
+
 var _utils = require('./utils');
 
+var _FilterType = require('./FilterType');
+
+var _FilterType2 = _interopRequireDefault(_FilterType);
+
 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; }
@@ -106,8 +112,12 @@ var TableHeader = function (_Component) {
       });
       _this.drag.width = _this.drag.data[_this.drag.currIndex].width;
       var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
-
+      var styleWidth = contentTableDom.style.width;
-      _this.contentTableWidth = contentTableDom.style.width ? parseInt(contentTableDom.style.width) : parseInt(contentTableDom.scrollWidth);
+      if (styleWidth && (typeof styleWidth == 'number' || styleWidth.includes('px'))) {
+        _this.contentTableWidth = parseInt(styleWidth);
+      } else {
+        _this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
+      }
     };
 
     _this.onMouseUp = function (event, data) {
@@ -119,10 +129,26 @@ var TableHeader = function (_Component) {
 
     _this.onThMouseUp = function (event, data) {
       _this.border = false;
+      var clsPrefix = _this.props.clsPrefix;
+
+      var eventDom = event.target;
+      var optDom = void 0;
+      if (eventDom.classList.contains('.th-drag-gap-hover')) {
+
+        optDom = eventDom;
+      } else {
+        optDom = eventDom.querySelector('.' + clsPrefix + '-thead-th-drag-gap');
+      }
+      if (optDom) {
+        optDom.classList.remove('th-drag-gap-hover');
+        optDom.classList.add('th-drag-gap');
+      }
     };
 
     _this.onThMouseMove = function (event, data) {
       if (!_this.border) return;
+      //固定表头拖拽
+
       var _this$props2 = _this.props,
           dragborderKey = _this$props2.dragborderKey,
           contentTable = _this$props2.contentTable;
@@ -131,11 +157,14 @@ var TableHeader = function (_Component) {
       var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
 
       if (!_this.contentTableWidth) {
-        _this.contentTableWidth = contentTableDom.style.width ? parseInt(contentTableDom.style.width) : parseInt(contentTableDom.scrollWidth);
+        var styleWidth = contentTableDom.style.width;
+        if (styleWidth && (typeof styleWidth == 'number' || styleWidth.includes('px'))) {
+          _this.contentTableWidth = parseInt(styleWidth);
+        } else {
+          _this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
+        }
       }
-      // console.log(this.contentTableWidth,x);
       var newTableWidth = _this.contentTableWidth + x;
-      // console.log(newTableWidth);
       var newWidth = _this.drag.width + x;
       if (newWidth < _this.props.minColumnWidth) {
         //清楚样式
@@ -169,10 +198,93 @@ var TableHeader = function (_Component) {
       var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
       currentDom.style.width = newWidth + "px";
       // this.contentTableWidth = newTableWidth;
-
       contentTableDom.style.width = newTableWidth + 'px';
-
       _this.drag.x = x;
+      var contentColDomArr = contentTableDom.querySelectorAll('colgroup col');
+      contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
+      //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
+      var siblingDom = contentTableDom.parentNode.nextElementSibling;
+      if (siblingDom) {
+        var bodyTableDom = siblingDom.querySelector('table');
+        //2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
+        bodyTableDom.style.width = newTableWidth + 'px';
+        //3、对应的col也要跟这变
+        var colDomArr = bodyTableDom.querySelectorAll('colgroup col');
+        colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
+        //4、设置overflow属性
+      }
+    };
+
+    _this.handlerFilterTextChange = function (key, val) {
+      var onFilterRowsChange = _this.props.onFilterRowsChange;
+
+      if (onFilterRowsChange) {
+        onFilterRowsChange(key, val);
+      }
+    };
+
+    _this.handlerFilterDropChange = function (key, val) {
+      var onFilterRowsDropChange = _this.props.onFilterRowsDropChange;
+
+      if (onFilterRowsDropChange) {
+        onFilterRowsDropChange(key, val.key);
+      }
+    };
+
+    _this.filterRenderType = function (type, dataIndex, index) {
+      var _this$props3 = _this.props,
+          clsPrefix = _this$props3.clsPrefix,
+          rows = _this$props3.rows,
+          filterDelay = _this$props3.filterDelay;
+
+      switch (type) {
+        //文本输入
+        case 'text':
+          return _react2["default"].createElement(_FilterType2["default"], {
+            rendertype: type,
+            clsPrefix: clsPrefix,
+            className: clsPrefix + ' filter-text',
+            onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
+            onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
+            filterDropdown: rows[1][index]['filterdropdown']
+          });
+        //下拉框选择
+        case 'dropdown':
+          var selectDataSource = [];
+          if (rows.length > 0) {
+            var hash = {};
+            //处理下拉重复对象组装dropdown
+            selectDataSource = Array.from(rows[1][0].datasource, function (x) {
+              return { key: x[dataIndex], value: x[dataIndex] };
+            });
+            selectDataSource = selectDataSource.reduceRight(function (item, next) {
+              hash[next.key] ? '' : hash[next.key] = true && item.push(next);
+              return item;
+            }, []);
+          }
+          return _react2["default"].createElement(_FilterType2["default"], {
+            rendertype: type,
+            className: clsPrefix + ' filter-dropdown',
+            data: selectDataSource,
+            onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
+            onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
+            filterDropdown: rows[1][index]['filterdropdown']
+          });
+        //日期
+        case 'date':
+          return _react2["default"].createElement(_FilterType2["default"], {
+            rendertype: type,
+            className: 'filter-date',
+            onClick: function onClick() {},
+            format: rows[1][index]['format'] || "YYYY-MM-DD",
+            onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
+            onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
+            filterDropdown: rows[1][index]['filterdropdown']
+          });
+        default:
+          //不匹配类型默认文本输入
+          return _react2["default"].createElement('div', null);
+      }
     };
 
     _this.currentObj = null;
@@ -206,6 +318,19 @@ var TableHeader = function (_Component) {
     return !(0, _shallowequal2["default"])(nextProps, this.props);
   };
 
+  /**
+   * @description 过滤输入后的回调函数
+   */
+
+  /**
+   * @description 过滤输入后的回调函数
+   */
+
+  /**
+   * @description 过滤渲染的组件类型
+   */
+
+
   TableHeader.prototype.render = function render() {
     var _this2 = this;
 
@@ -217,6 +342,8 @@ var TableHeader = function (_Component) {
         onDrop = _props.onDrop,
         draggable = _props.draggable,
         rows = _props.rows,
+        filterable = _props.filterable,
+        onFilterRowsChange = _props.onFilterRowsChange,
         onMouseDown = _props.onMouseDown,
         onMouseMove = _props.onMouseMove,
         onMouseUp = _props.onMouseUp,
@@ -297,9 +424,15 @@ var TableHeader = function (_Component) {
                   className: clsPrefix + '-thead-th-drag-gap ' })
               );
             } else {
-              var th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { className: ' ' + fixedStyle, key: i, onClick: function onClick(event) {
+              var th = void 0;
-                  da.onClick(da, event);
+              if (filterable && index == rows.length - 1) {
-                } })) : _react2["default"].createElement('th', _extends({}, da, { key: i, className: ' ' + fixedStyle }));
+                da.children = _this2.filterRenderType(da['filtertype'], da.dataindex, i);
+                th = _react2["default"].createElement('th', _extends({}, da, { key: i, className: da.className + '  ' + fixedStyle }));
+              } else {
+                th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { className: da.className + ' ' + fixedStyle, key: i, onClick: function onClick(event) {
+                    da.onClick(da, event);
+                  } })) : _react2["default"].createElement('th', _extends({}, da, { key: i, className: da.className + '  ' + fixedStyle }));
+              }
               return th;
             }
           })

build/lib/filterColumn.js

@@ -134,7 +134,7 @@ function filterColumn(Table, Popover) {
             _react2["default"].createElement(
               "div",
               { className: prefixCls + "-pop-column-filter-cont" },
-              _react2["default"].createElement(_beeIcon2["default"], { type: "uf-navmenu", onClick: this.openCloumList })
+              _react2["default"].createElement(_beeIcon2["default"], { type: "uf-grid", onClick: this.openCloumList })
             )
           )
         )
@@ -201,10 +201,10 @@ function filterColumn(Table, Popover) {
         if (!da.fixed) {
           return _react2["default"].createElement(
             "div",
-            { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
+            { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item" },
+            _react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked, onClick: function onClick() {
                 _this2.checkedColumItemClick(da);
-              } },
+              } }),
-            _react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
             _react2["default"].createElement(
               "span",
               null,

build/lib/sort.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,7 +8,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 exports["default"] = sort;
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -28,7 +28,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
  * @param {*} Icon
  */
 function sort(Table, Icon) {
-  return function (_Component) {
+  var _class, _temp;
+
+  var IconType = [{
+    'type': 'flat',
+    'icon': 'uf-symlist',
+    'order': 'flatscend'
+  }, {
+    'type': 'up',
+    'icon': 'uf-sortup',
+    'order': 'ascend'
+  }, {
+    'type': 'down',
+    'icon': 'uf-sortdown',
+    'order': 'descend'
+  }];
+
+  return _temp = _class = function (_Component) {
     _inherits(SortTable, _Component);
 
     function SortTable(props) {
@@ -36,44 +52,119 @@ function sort(Table, Icon) {
 
       var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-      _this.toggleSortOrder = function (order, column) {
+      _this.getOrderNum = function () {
+        var orderNum = 0;
+        _this.state.columns.forEach(function (item, index) {
+          if (item.order == 'ascend' || item.order == 'descend') {
+            orderNum++;
+          }
+        });
+        return orderNum ? orderNum : 1;
+      };
+
+      _this.changeOrderNum = function (column) {
+        var columns = _this.state.columns;
+
+        columns.forEach(function (col) {
+          if (col.orderNum > column.orderNum) {
+            col.orderNum--;
+          }
+          if (column.key == col.key) {
+            col.orderNum = '';
+          }
+        });
+        _this.setState({ columns: columns });
+      };
+
+      _this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
+        var preKey = pre[orderCols[currentIndex].key];
+        var afterKey = after[orderCols[currentIndex].key];
+        if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
+          return _this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
+        }
+        if (orderCols[currentIndex].order == 'ascend') {
+          return preKey - afterKey;
+        } else {
+          return afterKey - preKey;
+        }
+      };
+
+      _this.multiSort = function (columns) {
         var _this$state = _this.state,
             data = _this$state.data,
-            oldData = _this$state.oldData,
+            oldData = _this$state.oldData;
-            columns = _this$state.columns;
 
-        var ascend_sort = function ascend_sort(key) {
+        var self = _this;
-          return function (a, b) {
+        var orderCols = {},
-            return a.key - b.key;
+            orderColslen = 0;
-          };
+        columns.forEach(function (item) {
-        };
+          if (item.orderNum) {
-        var descend_sort = function descend_sort(key) {
+            orderColslen++;
-          return function (a, b) {
+            orderCols[item.orderNum] = item;
-            return b.key - a.key;
+          }
-          };
+        });
-        };
+        if (orderColslen > 0) {
-        // if (sortOrder === order) {
-        //   // 切换为未排序状态
-        //   order = "";
-        // }
-        if (!oldData) {
-          oldData = data.concat();
-        }
-        if (order === "ascend") {
           data = data.sort(function (a, b) {
-            return column.sorter(a, b);
+            return self._sortBy(a, b, orderCols, orderColslen, 1);
-          });
-        } else if (order === "descend") {
-          data = data.sort(function (a, b) {
-            return column.sorter(b, a);
           });
         } else {
           data = oldData.concat();
         }
-        var seleObj = columns.find(function (da) {
+        return data;
-          return da.key == column.key;
+      };
-        });
+
-        seleObj.order = order;
+      _this.toggleSortOrder = function (order, column) {
+        var _this$state2 = _this.state,
+            data = _this$state2.data,
+            oldData = _this$state2.oldData,
+            columns = _this$state2.columns;
+        var sort = _this.props.sort;
+
+        var seleObj = void 0;
+        if (!oldData) {
+          oldData = data.concat();
+        }
+        //单列排序，清空其他列的排序
+        if (sort.mode == 'single') {
+          columns.forEach(function (da) {
+            if (da.key == column.key) {
+              seleObj = da;
+            } else {
+              if (da.order) {
+                da.order = 'flatscend';
+              }
+            }
+          });
+          seleObj.order = order;
+          //通过后端请求
+          if (sort.backSource) {
+            //获取排序的字段和方式
+          } else {
+            if (order === "ascend") {
+              data = data.sort(function (a, b) {
+                return column.sorter(a, b);
+              });
+            } else if (order === "descend") {
+              data = data.sort(function (a, b) {
+                return column.sorter(b, a);
+              });
+            } else {
+              data = oldData.concat();
+            }
+          }
+        } else {
+          seleObj = columns.find(function (da) {
+            return da.key == column.key;
+          });
+          seleObj.order = order;
+          if (order === "flatscend") {
+            _this.changeOrderNum(column);
+          }
+          if (!seleObj.orderNum && (order == 'ascend' || order == 'descend')) {
+            seleObj.orderNum = _this.getOrderNum();
+          }
+          data = _this.multiSort(columns);
+        }
         _this.setState({
           data: data,
           oldData: oldData,
@@ -83,48 +174,53 @@ function sort(Table, Icon) {
 
       _this.renderColumnsDropdown = function (columns) {
         var prefixCls = "bee-table";
+        var mode = _this.props.sort.mode;
+
         return columns.map(function (originColumn) {
+          var iconTypeIndex = 0;
           var column = _extends({}, originColumn);
+          var sorterClass = 'flat';
+
+          if (column.order === "ascend") {
+            iconTypeIndex = 1;
+            sorterClass = 'up';
+          } else if (column.order === "descend") {
+            iconTypeIndex = 2;
+            sorterClass = 'down';
+          }
+
           var sortButton = void 0;
           if (column.sorter) {
-            var isAscend = column.order && column.order === "ascend";
+            //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
-            var isDescend = column.order && column.order === "descend";
+            if (iconTypeIndex > 0 && !column.orderNum && mode == 'multiple') {
+              column.orderNum = _this.getOrderNum();
+            }
             sortButton = _react2["default"].createElement(
-              "div",
+              'div',
-              { className: prefixCls + "-column-sorter" },
+              { className: prefixCls + '-column-sorter' },
               _react2["default"].createElement(
-                "span",
+                'span',
                 {
-                  className: prefixCls + "-column-sorter-up " + (isAscend ? "on" : "off"),
+                  className: prefixCls + '-column-sorter-' + sorterClass,
-                  title: "\u2191",
                   onClick: function onClick() {
-                    _this.toggleSortOrder("ascend", column);
+                    _this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
 
                     if (column.sorterClick) {
-                      column.sorterClick(column, "up");
+                      column.sorterClick(column, IconType[iconTypeIndex].type);
                     }
                   }
                 },
-                _react2["default"].createElement(Icon, { type: "uf-triangle-up" })
+                _react2["default"].createElement(Icon, { type: IconType[iconTypeIndex].icon }),
-              ),
+                _react2["default"].createElement(
-              _react2["default"].createElement(
+                  'span',
-                "span",
+                  null,
-                {
+                  column.orderNum
-                  className: prefixCls + "-column-sorter-down " + (isDescend ? "on" : "off"),
+                )
-                  title: "\u2193",
-                  onClick: function onClick() {
-                    _this.toggleSortOrder("descend", column);
-                    if (column.sorterClick) {
-                      column.sorterClick(column, "down");
-                    }
-                  }
-                },
-                _react2["default"].createElement(Icon, { type: "uf-triangle-down" })
               )
             );
           }
           column.title = _react2["default"].createElement(
-            "span",
+            'span',
             null,
             column.title,
             sortButton
@@ -154,12 +250,38 @@ function sort(Table, Icon) {
       }
     };
 
+    /**
+     * column 当前的排序的列
+     * 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
+     */
+
+
+    /**
+     * pre：前一条数据
+     * after:后一条数据
+     * orderType:升序、降序
+     */
+
+    /**
+     * 多列排序 先排order为1的，其他的基于已排序的数据排
+     */
+
+    //每个column上添加orderNum属性，不排序时为“”。
+    //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
+    //点击置为“”时，动态的设置相关column的orderNum值。并排序
+
+
     SortTable.prototype.render = function render() {
       var columns = this.renderColumnsDropdown(this.state.columns.concat());
       return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
     };
 
     return SortTable;
-  }(_react.Component);
+  }(_react.Component), _class.defaultProps = {
+    sort: {
+      mode: 'single',
+      backSource: false //默认是前端排序，值为true为后端排序
+    }
+  }, _temp;
 }
-module.exports = exports["default"];
+module.exports = exports['default'];

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.4.4",
+ "version": "1.4.5",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -91,4 +91,4 @@
   "react-addons-test-utils": "^15.5.0",
   "react-dom": "^15.5.0"
  }
-}
+}