合并

CHANGELOG.md

@@ -1,3 +1,43 @@
+<a name="1.5.8"></a>
+## [1.5.8](https://github.com/tinper-bee/bee-table/compare/v1.5.7...v1.5.8) (2018-11-22)
+
+
+
+<a name="1.5.7"></a>
+## [1.5.7](https://github.com/tinper-bee/bee-table/compare/v1.5.6...v1.5.7) (2018-11-21)
+
+
+
+<a name="1.5.6"></a>
+## [1.5.6](https://github.com/tinper-bee/bee-table/compare/v1.5.5...v1.5.6) (2018-11-21)
+
+
+
+<a name="1.5.5"></a>
+## [1.5.5](https://github.com/tinper-bee/bee-table/compare/v1.5.4...v1.5.5) (2018-11-20)
+
+
+
+<a name="1.5.4"></a>
+## [1.5.4](https://github.com/tinper-bee/bee-table/compare/v1.5.3...v1.5.4) (2018-11-19)
+
+
+
+<a name="1.5.3"></a>
+## [1.5.3](https://github.com/tinper-bee/bee-table/compare/v1.5.2...v1.5.3) (2018-11-19)
+
+
+
+<a name="1.5.2"></a>
+## [1.5.2](https://github.com/tinper-bee/bee-table/compare/v1.5.1...v1.5.2) (2018-11-19)
+
+
+
+<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-19)
+
+
+
 <a name="1.5.0"></a>
 # [1.5.0](https://github.com/tinper-bee/bee-table/compare/v1.4.39...v1.5.0) (2018-11-16)
 
@@ -279,12 +319,7 @@
 
 
 <a name="1.2.9"></a>
-## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
+## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
-
-
-
-<a name="1.2.8"></a>
-## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)
 
 
 

build/Table.js

@@ -278,9 +278,7 @@ var Table = function (_Component) {
 
     //如果用户传了scroll.x按用户传的为主
     var setWidthParam = this.props.scroll.x;
-    var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+
-    var lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
     if (typeof setWidthParam == 'number') {
       var numSetWidthParam = parseInt(setWidthParam);
       this.contentWidth = numSetWidthParam;
@@ -290,10 +288,15 @@ var Table = function (_Component) {
       this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度
 
       this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
-      this.domWidthDiff = this.contentDomWidth - this.computeWidth;
+    }
-      if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
+    var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
-        this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
+    var lastShowIndex = computeObj.lastShowIndex;
-      }
+    this.computeWidth = computeObj.computeWidth;
+
+    this.domWidthDiff = this.contentDomWidth - this.computeWidth;
+    if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
+      this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
+      this.domWidthDiff = this.contentDomWidth - this.contentWidth;
     }
 
     if (this.computeWidth < this.contentWidth) {
@@ -380,7 +383,9 @@ var Table = function (_Component) {
         dragborderKey = _props.dragborderKey,
         minColumnWidth = _props.minColumnWidth,
         headerHeight = _props.headerHeight,
-        afterDragColWidth = _props.afterDragColWidth;
+        afterDragColWidth = _props.afterDragColWidth,
+        headerScroll = _props.headerScroll,
+        bordered = _props.bordered;
 
     var rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -415,7 +420,11 @@ var Table = function (_Component) {
       onFilterRowsChange: onFilterRowsChange,
       onFilterRowsDropChange: onFilterRowsDropChange,
       filterDelay: filterDelay,
-      afterDragColWidth: afterDragColWidth
+      afterDragColWidth: afterDragColWidth,
+      contentDomWidth: this.contentDomWidth,
+      scrollbarWidth: this.scrollbarWidth,
+      headerScroll: headerScroll,
+      bordered: bordered
     })) : null;
   };
 
@@ -682,7 +691,7 @@ var Table = function (_Component) {
       } else if (width) {
         width = parseInt(width);
       }
-      if (lastShowIndex == i) {
+      if (lastShowIndex == i && width) {
         width = width + contentWidthDiff;
       }
 
@@ -799,8 +808,8 @@ var Table = function (_Component) {
         }
       }
       // 自动出现滚动条
-      if (_this3.contentDomWidth > _this3.contentWidth) {
+      if (!fixed && _this3.contentDomWidth < _this3.contentWidth) {
-        tableStyle.width = _this3.contentDomWidth;
+        tableStyle.width = _this3.contentWidth;
       }
       var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
         'tbody',

build/TableHeader.js

@@ -198,7 +198,11 @@ var TableHeader = function (_Component) {
 
       var _this$props3 = _this.props,
           dragborderKey = _this$props3.dragborderKey,
-          contentTable = _this$props3.contentTable;
+          contentTable = _this$props3.contentTable,
+          headerScroll = _this$props3.headerScroll,
+          contentDomWidth = _this$props3.contentDomWidth,
+          scrollbarWidth = _this$props3.scrollbarWidth,
+          bordered = _this$props3.bordered;
 
       var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
       var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@@ -262,6 +266,26 @@ var TableHeader = function (_Component) {
         colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
         //4、设置overflow属性
       }
+
+      //表头需要显示滚动条时，需兼容含有固定列
+      if (headerScroll) {
+
+        var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
+        if (bordered) {
+          showScroll = showScroll - 1;
+        }
+        var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+        var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
+        if (showScroll < 0) {
+          //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+
+          fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
+          fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
+        } else {
+          fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
+          fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
+        }
+      }
     };
 
     _this.handlerFilterTextChange = function (key, val) {
@@ -434,7 +458,8 @@ var TableHeader = function (_Component) {
         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 } : {};
 
@@ -491,6 +516,17 @@ var TableHeader = function (_Component) {
                     _this2.ableOnMouseMove(e, da);
                   },
                   onMouseDown: function onMouseDown(e) {
+                    //避免表头其他元素对其影响
+                    var filterDom = contentTable.querySelector('.filterable');
+                    //是否是过滤行元素，是的话不触发
+                    var isFilterDom = filterDom ? filterDom.contains(e.target) : false;
+
+                    if (e.target.classList.contains('uf') || isFilterDom) {
+                      return;
+                    }
+                    if (e.target.classList.contains('uf')) {
+                      return;
+                    }
                     var _state2 = _this2.state,
                         dragAbleOrBord = _state2.dragAbleOrBord,
                         dragAbleOrBordStart = _state2.dragAbleOrBordStart;

build/lib/newMultiSelect.js

@@ -0,0 +1,195 @@
+'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"] = newMultiSelect;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _beeCheckbox = require('bee-checkbox');
+
+var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
+
+var _util = require('./util');
+
+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); }
+
+/**
+ * 参数: 过滤表头
+ * @param {*} Table
+ * @param {*} Checkbox
+ * @param {*} Popover
+ * @param {*} Icon
+ */
+
+function newMultiSelect(Table, Checkbox) {
+  var _class, _temp, _initialiseProps;
+
+  return _temp = _class = function (_Component) {
+    _inherits(NewMultiSelect, _Component);
+
+    function NewMultiSelect(props) {
+      _classCallCheck(this, NewMultiSelect);
+
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+      _initialiseProps.call(_this);
+
+      var checkedAll = _this.setChecked(props.data);
+      _this.state = {
+        checkedAll: checkedAll,
+        data: (0, _util.ObjectAssign)(props.data)
+      };
+      return _this;
+    }
+
+    NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (this.props.data != nextProps.data) {
+        this.setState({
+          data: (0, _util.ObjectAssign)(nextProps.data),
+          checkedAll: this.setChecked(nextProps.data)
+        });
+      }
+    };
+
+    NewMultiSelect.prototype.setChecked = function setChecked(data) {
+      var allCheck = true;
+      if (data) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var da = _step.value;
+
+            if (!da._checked) {
+              allCheck = false;
+              break;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator["return"]) {
+              _iterator["return"]();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
+      return allCheck;
+    };
+
+    NewMultiSelect.prototype.render = function render() {
+      var columns = this.props.columns;
+      var data = this.state.data;
+
+      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
+    };
+
+    return NewMultiSelect;
+  }(_react.Component), _class.defaultProps = {
+    prefixCls: "u-table-mult-select"
+  }, _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
+
+    this.onAllCheckChange = function () {
+      var _state = _this2.state,
+          data = _state.data,
+          checkedAll = _state.checkedAll;
+
+      var selectList = [];
+      var check = checkedAll ? false : true;
+      data.forEach(function (item) {
+        item._checked = check;
+        if (item._checked) {
+          selectList.push(item);
+        }
+      });
+      _this2.setState({
+        checkedAll: check
+      });
+      _this2.props.getSelectedDataFunc(selectList);
+    };
+
+    this.handleClick = function () {};
+
+    this.onCheckboxChange = function (text, record, index) {
+      return function () {
+        var data = _this2.state.data;
+
+        var selectList = [];
+        record._checked = record._checked ? false : true;
+        var checkedAll = true;
+        for (var i = 0; i < data.length; i++) {
+          var item = data[i];
+          if (!item._checked || item._checked == false) {
+            checkedAll = false;
+            break;
+          }
+        }
+        _this2.setState(_extends({}, _this2.state, {
+          checkedAll: checkedAll
+        }));
+        data.forEach(function (da) {
+          if (da._checked) {
+            selectList.push(da);
+          }
+        });
+        _this2.props.getSelectedDataFunc(selectList, record, index);
+      };
+    };
+
+    this.getDefaultColumns = function (columns) {
+      // let checkedAll = init?false:this.state.checkedAll;
+      var checkedAll = _this2.state.checkedAll;
+
+      var _defaultColumns = [{
+        title: _react2["default"].createElement(Checkbox, {
+          className: 'table-checkbox',
+          checked: checkedAll
+          // indeterminate={indeterminate_bool && !this.state.checkedAll}
+          , onChange: _this2.onAllCheckChange
+        }),
+        key: "checkbox",
+        dataIndex: "checkbox",
+        fixed: "left",
+        width: 50,
+        render: function render(text, record, index) {
+          var attr = {};
+          record._disabled ? attr.disabled = record._disabled : "";
+          return _react2["default"].createElement(Checkbox, _extends({
+            key: index,
+            className: 'table-checkbox'
+          }, attr, {
+            checked: record._checked,
+            onClick: _this2.handleClick,
+            onChange: _this2.onCheckboxChange(text, record, index)
+          }));
+        }
+      }];
+      return _defaultColumns.concat(columns);
+    };
+  }, _temp;
+}
+module.exports = exports['default'];

demo/TableDemo.scss

@@ -13,6 +13,7 @@
 @import "../node_modules/bee-tooltip/src/Tooltip.scss";
 @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 "../src/Table.scss";
 
 

demo/demolist/Demo27.js

@@ -149,15 +149,31 @@ class Demo27 extends Component {
           </Dropdown>
         }
       },
-      { title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
+      {
+        title: "姓名",
+        width: 180,
+        dataIndex: "name",
+        key: "name",
+        filterType: "text",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "string"//字符条件
+      },
+      {
+        title: "区间",
+        width: 200,
+        dataIndex: "mark",
+        key: "mark",
+        filterType: "number",//输入框类型
+        filterDropdownType: "number"//数值类条件
+      },
       {
         title: "年龄",
-        width: 150,
+        width: 180,
         sorter: (a, b) => a.age - b.age,
         dataIndex: "age",
         key: "age",
         filterType: "dropdown",
-        filterDropdown: "hide",
+        filterDropdown: "hide",//不显示条件
         filterDropdownAuto: "manual",//切换手动传入模式
         filterDropdownData: this.state.dropdownvalue,
         filterDropdownFocus: () => {

dist/demo.css

@@ -5,6 +5,7 @@
 /*  Navlayout  */
 @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);
 .red {
   color: rgb(244,67,54) !important; }
 
@@ -8598,10 +8599,7 @@ ul {
     .u-table-thead .filter-wrap .filter-btns {
       min-width: 58px; }
   .u-table-thead th {
-    background: #f7f7f7;
+    background: #f7f7f7; }
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
@@ -8651,16 +8649,26 @@ ul {
     .u-table-thead-th-drag-gap {
       height: 100%;
       position: absolute;
-      right: 0px;
+      right: -10px;
       top: 0;
-      background: #ccc;
+      width: 20px;
-      width: 2px;
       box-sizing: border-box;
       z-index: 1; }
+      .u-table-thead-th-drag-gap .online {
+        height: 100%;
+        width: 1px;
+        background: transparent;
+        margin: 0 auto; }
+      .u-table-thead-th-drag-gap .online-hover {
+        background: #000000; }
     .u-table-thead-th .th-drag-gap {
       background: transparent; }
     .u-table-thead-th .th-drag-gap-hover {
       cursor: col-resize; }
+    .u-table-thead-th .th-drag-gap > div {
+      background: transparent; }
+    .u-table-thead-th .th-drag-gap-hover > div {
+      background: #000000; }
   .u-table-thead-th:last-child-drag-gap {
     border: none; }
   .u-table-filter-column-pop-cont {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.5.1",
+ "version": "1.5.8",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -52,6 +52,7 @@
   "bee-dropdown": "^1.0.1",
   "bee-form-control": "latest",
   "bee-icon": "^1.0.5",
+  "bee-input-number": "^1.1.14",
   "bee-loading": "^1.0.3",
   "bee-locale": "0.0.11",
   "bee-menus": "^1.0.7",

src/FilterDropDown.js

@@ -1,4 +1,9 @@
+/**
+ * 过滤行功能内的下拉条件
+ */
+
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Dropdown from 'bee-dropdown';
 import Menu from 'bee-menus';
 import Button from 'bee-button';
@@ -7,13 +12,19 @@ import i18n from './i18n';
 import { getComponentLocale } from 'bee-locale/build/tool';
 const { Item } = Menu;
 
+
 class FilterDropDown extends Component {
     constructor() {
         super();
         this.state = {
-            selectValue: []
+            selectValue: []//选择的条件的值
         }
     }
+    /**
+     * 点击下拉菜单
+     *
+     * @param {*} s 选中的selectRecord
+     */
     onSelectDropdown = (s) => {
         let { onSelectDropdown } = this.props;
         if (onSelectDropdown) {
@@ -24,6 +35,11 @@ class FilterDropDown extends Component {
             });
         }
     }
+
+    /**
+     * 清除事件
+     *
+     */
     onClickClear = () => {
         let { onClickClear } = this.props;
         if (onClickClear) {
@@ -34,36 +50,81 @@ class FilterDropDown extends Component {
             });
         }
     }
+
+    /**
+     * 根据props来获得指定的Menu,分为String和Number
+     *
+     * @returns JSX Menu
+     */
+    getMenu = () => {
+        let { selectValue } = this.state;
+        let { filterDropdownType } = this.props;
+        let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
+        switch (filterDropdownType) {
+            case 'string':
+                return <Menu
+                    onSelect={this.onSelectDropdown}
+                    selectedKeys={selectValue}
+                >
+                    <Item key="2">{locale['include']}</Item>
+                    <Item key="6">{locale['exclusive']}</Item>
+                    <Item key="1">{locale['equal']}</Item>
+                    <Item key="5">{locale['unequal']}</Item>
+                    <Item key="7">{locale['begin']}</Item>
+                    <Item key="3">{locale['end']}</Item>
+                </Menu>
+            case 'number':
+                return <Menu
+                    onSelect={this.onSelectDropdown}
+                    selectedKeys={selectValue}
+                >
+                    <Item key="1">{locale['greater_than']}</Item>
+                    <Item key="2">{locale['great_than_equal_to']}</Item>
+                    <Item key="3">{locale['less_than']}</Item>
+                    <Item key="4">{locale['less_than_equal_to']}</Item>
+                    <Item key="5">{locale['be_equal_to']}</Item>
+                    <Item key="6">{locale['not_equal_to']}</Item>
+                </Menu>
+            default:
+                return <div></div>;
+        }
+    }
     render() {
         let { isShowCondition } = this.props;
 
-        let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
-
-        let dropmenu = (
-            <Menu
-                onSelect={this.onSelectDropdown}
-                selectedKeys={this.state.selectValue}
-            >
-                <Item key="2">{locale['include']}</Item>
-                <Item key="6">{locale['exclusive']}</Item>
-                <Item key="1">{locale['equal']}</Item>
-                <Item key="5">{locale['unequal']}</Item>
-                <Item key="7">{locale['begin']}</Item>
-                <Item key="3">{locale['end']}</Item>
-            </Menu>
-        );
         return (<div className="filter-btns">
             {isShowCondition == 'show' && <Dropdown
                 trigger={['click']}
-                overlay={dropmenu}
+                overlay={this.getMenu()}
                 animation="slide-up"
             >
-                <Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-filter" /></Button>
+                <Button
+                    shape="border"
+                    style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}
+                >
+                    <Icon style={{ padding: 0, color: '#585858' }} type="uf-filter" />
+                </Button>
             </Dropdown>}
-            <Button 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" }}><Icon style={{ padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" /></Button>
+            <Button
+                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" }}
+            >
+                <Icon style={{ padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" />
+            </Button>
         </div>
         );
     }
 }
 
+FilterDropDown.propTypes = {
+    isShowCondition: PropTypes.string,
+    filterDropdownType: PropTypes.oneOf(['string', 'number'])
+}
+
+FilterDropDown.defaultProps = {
+    isShowCondition: 'show',
+    filterDropdownType: 'string'
+}
+
 export default FilterDropDown;

src/FilterType.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import FormControl from 'bee-form-control';
 import Select from 'bee-select';
+import InputNumber from 'bee-input-number';
 import DatePicker from 'bee-datepicker';
 import FilterDropDown from './FilterDropDown';
 
@@ -16,7 +17,8 @@ class FilterType extends Component {
             text: "",
             selectValue: "",
             dateValue: "",
-            open: false
+            open: false,
+            number: 0
         }
     }
     //清除文本
@@ -27,7 +29,22 @@ class FilterType extends Component {
         let { onChange } = this.props;
         onChange && onChange("");
     }
-
+    //设置数值
+    changeNumber = (number) => {
+        let { onChange } = this.props;
+        onChange && onChange(number);
+        this.setState({
+            number
+        });
+    }
+    //清除数值
+    clearNumber = () => {
+        let { onChange } = this.props;
+        onChange && onChange("");
+        this.setState({
+            number: ""
+        });
+    }
     //设置文本
     changeText = (eve) => {
         this.setState({
@@ -84,8 +101,14 @@ class FilterType extends Component {
         }
     }
     //组件渲染
+    /**
+     * 根据不同的类型生成对应的组件类型包含一些参数的适应
+     *
+     * @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
+     * @returns
+     */
     renderControl = (rendertype) => {
-        let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
+        let { filterDropdown, filterDropdownType, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
         switch (rendertype) {
             case 'text':
                 return <div className={`${clsPrefix} filter-wrap`}><FormControl
@@ -102,6 +125,24 @@ class FilterType extends Component {
                         onClickClear={this.clearText}
                         isShowClear={this.state.text}
                         isShowCondition={filterDropdown}
+                        filterDropdownType={filterDropdownType}
+                    >
+                    </FilterDropDown>
+                </div>
+            case 'number':
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <InputNumber
+                        className={className}
+                        value={this.state.number}
+                        onChange={this.changeNumber}
+                    />
+                    <FilterDropDown
+                        locale={locale}
+                        onSelectDropdown={onSelectDropdown}
+                        onClickClear={this.clearNumber}
+                        isShowClear={this.state.number}
+                        isShowCondition={filterDropdown}
+                        filterDropdownType={filterDropdownType}
                     >
                     </FilterDropDown>
                 </div>
@@ -144,7 +185,7 @@ class FilterType extends Component {
                     </FilterDropDown>}
                 </div>
             default:
-                break;
+                return <div></div>;
         }
 
     }

src/Table.js

@@ -203,9 +203,7 @@ class Table extends Component {
     
     //如果用户传了scroll.x按用户传的为主
     let setWidthParam = this.props.scroll.x
-    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+
-    let lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
     if (typeof (setWidthParam) == 'number') {
       let numSetWidthParam = parseInt(setWidthParam);
       this.contentWidth = numSetWidthParam;
@@ -215,10 +213,16 @@ class Table extends Component {
       this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
 
       this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
-      this.domWidthDiff = this.contentDomWidth - this.computeWidth;
+      
-      if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
+    }
-        this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
+    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
-      }
+    let lastShowIndex = computeObj.lastShowIndex;
+    this.computeWidth = computeObj.computeWidth;
+
+    this.domWidthDiff = this.contentDomWidth - this.computeWidth;
+    if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
+      this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
+      this.domWidthDiff = this.contentDomWidth - this.contentWidth;
     }
 
     if (this.computeWidth < this.contentWidth) {
@@ -290,7 +294,7 @@ class Table extends Component {
 
   getHeader(columns, fixed) {
     const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
-      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth } = this.props;
+      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -328,6 +332,10 @@ class Table extends Component {
         onFilterRowsDropChange={onFilterRowsDropChange}
         filterDelay={filterDelay}
         afterDragColWidth = {afterDragColWidth}
+        contentDomWidth={this.contentDomWidth}
+        scrollbarWidth = {this.scrollbarWidth}
+        headerScroll = {headerScroll}
+        bordered = {bordered}
       />
     ) : null;
   }
@@ -374,14 +382,15 @@ class Table extends Component {
           key: column.key,
           children: "过滤渲染",
           width: column.width,
-          filtertype: column.filterType,
+          filtertype: column.filterType,//下拉的类型 包括['text','dropdown','date','daterange','number']
-          dataindex: column.dataIndex,
+          dataindex: column.dataIndex,//field
-          datasource: this.props.data,
+          datasource: this.props.data,//需要单独拿到数据处理
-          format: column.format,
+          format: column.format,//设置日期的格式
-          filterdropdown: column.filterDropdown,
+          filterdropdown: column.filterDropdown,//是否显示 show hide
           filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
           filterdropdowndata: column.filterDropdownData,//自定义数据格式
-          filterdropdownfocus: column.filterDropdownFocus//焦点触发函数回调
+          filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
+          filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
         });
       }
     });
@@ -588,7 +597,7 @@ class Table extends Component {
       } else if (width) {
         width = parseInt(width);
       }
-      if (lastShowIndex == i) {
+      if (lastShowIndex == i && width) {
         width = width + contentWidthDiff;
       }
 
@@ -703,8 +712,8 @@ class Table extends Component {
         }
       }
       // 自动出现滚动条
-      if (this.contentDomWidth > this.contentWidth) {
+      if ( !fixed && this.contentDomWidth < this.contentWidth) {
-        tableStyle.width = this.contentDomWidth;
+        tableStyle.width = this.contentWidth;
       }
       const tableBody = hasBody ? getBodyWrapper(
         <tbody className={`${clsPrefix}-tbody`}>

src/TableHeader.js

@@ -208,7 +208,7 @@ class TableHeader extends Component {
     if (!this.border) return;
     //固定表头拖拽
 
-    const { dragborderKey, contentTable } = this.props;
+    const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered} = this.props;
     let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
     let contentTableDom = document.getElementById(
       "u-table-drag-thead-" + this.theadKey
@@ -280,6 +280,26 @@ class TableHeader extends Component {
       colDomArr[this.drag.currIndex].style.width = newWidth + "px";
       //4、设置overflow属性
     }
+
+    //表头需要显示滚动条时，需兼容含有固定列
+    if(headerScroll){
+
+      let showScroll =  contentDomWidth - newTableWidth - scrollbarWidth ;
+      if(bordered){
+        showScroll = showScroll -1;
+      }
+      const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
+      const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
+      if(showScroll < 0){
+        //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+  
+        fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
+        fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
+      }else{
+        fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
+        fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
+      }
+    }
   };
 
   /**
@@ -324,6 +344,27 @@ class TableHeader extends Component {
               dataIndex
             )}
             filterDropdown={rows[1][index]["filterdropdown"]}
+            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+          />
+        );
+        //数值输入
+      case "number":
+        return (
+          <FilterType
+            locale={locale}
+            rendertype={type}
+            clsPrefix={clsPrefix}
+            className={`${clsPrefix} filter-text`}
+            onChange={debounce(
+              filterDelay || 300,
+              this.handlerFilterTextChange.bind(this, dataIndex)
+            )}
+            onSelectDropdown={this.handlerFilterDropChange.bind(
+              this,
+              dataIndex
+            )}
+            filterDropdown={rows[1][index]["filterdropdown"]}
+            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
           />
         );
       //下拉框选择
@@ -359,6 +400,7 @@ class TableHeader extends Component {
             )}
             filterDropdown={rows[1][index]["filterdropdown"]}
             onFocus={rows[1][index]["filterdropdownfocus"]}
+            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
           />
         );
       //日期
@@ -376,6 +418,7 @@ class TableHeader extends Component {
               dataIndex
             )}
             filterDropdown={rows[1][index]["filterdropdown"]}
+            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
           />
         );
       default:
@@ -403,7 +446,8 @@ class TableHeader extends Component {
       onMouseOut,
       contentWidthDiff,
       fixed,
-      lastShowIndex
+      lastShowIndex,
+      contentTable
     } = this.props;
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
 
@@ -457,6 +501,17 @@ class TableHeader extends Component {
                     onDragEnter:(e)=>{this.onDragEnter(e, da)},
                     onMouseMove:(e)=>{this.ableOnMouseMove(e, da)},
                     onMouseDown:(e)=>{
+                      //避免表头其他元素对其影响
+                      const filterDom = contentTable.querySelector('.filterable');
+                     //是否是过滤行元素，是的话不触发
+                      const isFilterDom =filterDom ?filterDom.contains(e.target):false;
+                      
+                      if(e.target.classList.contains('uf') ||isFilterDom){
+                        return;
+                      }
+                      if(e.target.classList.contains('uf')){
+                        return;
+                      }
                       let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
                       this.setState({
                         dragAbleOrBordStart:dragAbleOrBord==="able"?"ableStart":""

src/i18n.js

@@ -7,6 +7,12 @@ module.exports = {
     'unequal':'不等于',
     'begin':'以开始',
     'end':'以结尾',
+    'greater_than':'大于',
+    'great_than_equal_to':'大于等于',
+    'less_than':'小于',
+    'less_than_equal_to':'小于等于',
+    'be_equal_to':'等于',
+    'not_equal_to':'不等于',
     'en-us': {
         'resetSettings': 'reset settings',
         'include': 'include',
@@ -15,6 +21,12 @@ module.exports = {
         'unequal':'unequal',
         'begin':'begin',
         'end':'end',
+        'greater_than':'greater than',
+        'great_than_equal_to':'great than equal to',
+        'less_than':'less than',
+        'less_than_equal_to':'less than equal to',
+        'be_equal_to':'be equal to',
+        'not_equal_to':'not equal to',
     },
     'zh-tw': {
         'resetSettings': '還原設置',
@@ -24,5 +36,11 @@ module.exports = {
         'unequal':'不等於',
         'begin':'以開始',
         'end':'以結尾',
+        'greater_than':'大於',
+        'great_than_equal_to':'大於等於',
+        'less_than':'小於',
+        'less_than_equal to':'小於等於',
+        'be_equal_to':'等於',
+        'not_equal_to':'不等於'
     }
 }

src/lib/newMultiSelect.js

@@ -0,0 +1,134 @@
+import React, { Component } from "react";
+import Checkbox from 'bee-checkbox';
+import {ObjectAssign} from './util';
+/**
+ * 参数: 过滤表头
+ * @param {*} Table
+ * @param {*} Checkbox
+ * @param {*} Popover
+ * @param {*} Icon
+ */
+
+export default function newMultiSelect(Table, Checkbox) {
+
+  return class NewMultiSelect extends Component {
+    static defaultProps = {
+      prefixCls: "u-table-mult-select"
+    }
+
+    constructor(props) {
+      super(props);
+      let checkedAll = this.setChecked(props.data);
+      this.state = {
+        checkedAll,
+        data:ObjectAssign(props.data),
+      }
+    }
+
+    componentWillReceiveProps(nextProps){
+      if(this.props.data != nextProps.data){
+        this.setState({
+          data:ObjectAssign(nextProps.data),
+          checkedAll:this.setChecked(nextProps.data),
+        })
+      }
+    }
+
+    setChecked(data){
+      let allCheck = true;
+      if(data){
+        for (const da of data) {
+          if(!da._checked){
+            allCheck = false;
+            break;
+          }
+        }
+      }
+      return allCheck;
+    }
+
+    onAllCheckChange=()=>{
+      let {data,checkedAll} = this.state;
+      let selectList = [];
+      let check = checkedAll?false:true;
+      data.forEach(item => {
+        item._checked = check;
+        if(item._checked){
+          selectList.push(item);
+        }
+      });
+      this.setState({
+        checkedAll:check
+      });
+      this.props.getSelectedDataFunc(selectList);
+    }
+
+    handleClick=()=>{
+      
+    }
+ 
+    onCheckboxChange = (text, record, index) => () => {
+      let {data} = this.state;
+      let selectList = [];
+      record._checked = record._checked?false:true;
+      let checkedAll = true;
+      for(let i=0;i<data.length;i++){
+        let item = data[i];
+        if(!item._checked || item._checked == false){
+          checkedAll = false;
+          break;
+        }
+      }
+      this.setState({
+        ...this.state,
+        checkedAll
+      })
+      data.forEach((da)=>{
+        if(da._checked){
+          selectList.push(da);
+        }
+      })
+      this.props.getSelectedDataFunc(selectList,record,index);
+    };
+
+    
+
+    getDefaultColumns=(columns)=>{
+      // let checkedAll = init?false:this.state.checkedAll;
+      let {checkedAll} = this.state;
+      let _defaultColumns =[{
+          title: (
+            <Checkbox
+              className="table-checkbox"
+              checked={checkedAll}
+              // indeterminate={indeterminate_bool && !this.state.checkedAll}
+              onChange={this.onAllCheckChange}
+            />
+          ),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          fixed:"left",
+          width: 50,
+          render: (text, record, index) => {
+            let attr = {};
+            record._disabled?attr.disabled = record._disabled:"";
+            return <Checkbox
+                key={index}
+                className="table-checkbox"
+                {...attr}
+                checked={record._checked}
+                onClick={this.handleClick}
+                onChange={this.onCheckboxChange(text, record, index)}
+              ></Checkbox>
+          }
+        }]
+        return _defaultColumns.concat(columns);
+    }
+
+    render() {
+      const {columns} = this.props;
+      const {data} = this.state;
+      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
+    }
+  };
+}