feat:重构过滤行代码，整合回调参数集合。

2018-11-29 23:29:26 +08:00 · 2018-11-29 23:29:26 +08:00 · e8eb6723d5
parent ebd0111c36
commit e8eb6723d5
19 changed files with 21021 additions and 16351 deletions
--- a/README.md
+++ b/README.md
@ -103,8 +103,9 @@ class Demo extends Component {
 | haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 | filterable       | 是否开启根据条件来过滤数据 | bool | false
 | filterDelay       | 触发过滤输入的时候的ms延迟时间 | number | 300
-| onFilterRowsChange       | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
-| onFilterRowsDropChange       | 过滤下拉条件的回调 | (key,val)=>() | () => ()
+| onFilterChange       | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
+| onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
+| headerScroll       | 表头下是否显示滚动条 | bool| false


 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -125,7 +126,7 @@ class Demo extends Component {
 |onCellClick|单击列的单元格时调用|Function(row, event)|-|
 |onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
 | order | 设置排序 | string（"descend"、"ascend"） | - |
-| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
+| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
 | filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
 | format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
 | filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
--- a/build/FilterDropDown.js
+++ b/build/FilterDropDown.js
@ -56,15 +56,19 @@ var FilterDropDown = function (_Component) {

        var _this = _possibleConstructorReturn(this, _Component.call(this));

-        _this.onSelectDropdown = function (s) {
-            var onSelectDropdown = _this.props.onSelectDropdown;
+        _this.onSelectDropdown = function (item) {
+            var _this$props = _this.props,
+                onSelectDropdown = _this$props.onSelectDropdown,
+                dataText = _this$props.dataText;

            if (onSelectDropdown) {
-                _this.setState({
-                    selectValue: [s.key]
-                }, function () {
-                    onSelectDropdown(s);
-                });
+                if (dataText != "") {
+                    _this.setState({
+                        selectValue: [item.key]
+                    }, function () {
+                        onSelectDropdown(item);
+                    });
+                }
            }
        };

@ -97,32 +101,32 @@ var FilterDropDown = function (_Component) {
                        },
                        _react2["default"].createElement(
                            Item,
-                            { key: '2' },
+                            { key: 'LIKE' },
                            locale['include']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '6' },
+                            { key: 'ULIKE' },
                            locale['exclusive']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '1' },
+                            { key: 'EQ' },
                            locale['equal']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '5' },
+                            { key: 'UEQ' },
                            locale['unequal']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '7' },
+                            { key: 'START' },
                            locale['begin']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '3' },
+                            { key: 'END' },
                            locale['end']
                        )
                    );
@ -135,32 +139,32 @@ var FilterDropDown = function (_Component) {
                        },
                        _react2["default"].createElement(
                            Item,
-                            { key: '1' },
+                            { key: 'GT' },
                            locale['greater_than']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '2' },
+                            { key: 'GTEQ' },
                            locale['great_than_equal_to']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '3' },
+                            { key: 'LT' },
                            locale['less_than']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '4' },
+                            { key: 'LTEQ' },
                            locale['less_than_equal_to']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '5' },
+                            { key: 'EQ' },
                            locale['be_equal_to']
                        ),
                        _react2["default"].createElement(
                            Item,
-                            { key: '6' },
+                            { key: 'UEQ' },
                            locale['not_equal_to']
                        )
                    );
@ -204,6 +208,7 @@ var FilterDropDown = function (_Component) {
            isShowCondition == 'show' && _react2["default"].createElement(
                _beeDropdown2["default"],
                {
+                    overlayClassName: 'u-filter-dropdown-menu-wrap',
                    trigger: ['click'],
                    overlay: this.getMenu(),
                    animation: 'slide-up'
--- a/build/FilterType.js
+++ b/build/FilterType.js
@ -58,26 +58,68 @@ var propTypes = {
 var FilterType = function (_Component) {
    _inherits(FilterType, _Component);

-    function FilterType() {
+    function FilterType(props) {
        _classCallCheck(this, FilterType);

-        var _this = _possibleConstructorReturn(this, _Component.call(this));
+        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+        _this.clearFilter = function () {
+            var _this$props = _this.props,
+                onFilterClear = _this$props.onFilterClear,
+                dataIndex = _this$props.dataIndex;

-        _this.clearText = function () {
            _this.setState({
-                text: ""
+                value: "", //清空值
+                condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
+            }, function () {
+                //调用清除方法参数为当前字段的field
+                onFilterClear && onFilterClear(dataIndex);
            });
-            var onChange = _this.props.onChange;
-
-            onChange && onChange("");
        };

-        _this.changeNumber = function (number) {
-            var onChange = _this.props.onChange;
-
-            onChange && onChange(number);
+        _this.changeText = function (val) {
            _this.setState({
-                number: number
+                value: val
+            });
+        };
+
+        _this.changeTextCall = function (e) {
+            var _this$props2 = _this.props,
+                onFilterChange = _this$props2.onFilterChange,
+                dataIndex = _this$props2.dataIndex;
+
+            if (e.keyCode == 13) {
+                onFilterChange(dataIndex, e.target.value, _this.state.condition);
+            }
+        };
+
+        _this.changeValue = function () {
+            _this.setState({
+                value: ""
+            });
+        };
+
+        _this.onSelectDropdown = function (item) {
+            var _this$props3 = _this.props,
+                onFilterChange = _this$props3.onFilterChange,
+                dataIndex = _this$props3.dataIndex;
+
+            _this.setState({
+                condition: item.key
+            }, function () {
+                onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
+            });
+        };
+
+        _this.changeNumber = function (value) {
+            var _this$props4 = _this.props,
+                onFilterChange = _this$props4.onFilterChange,
+                dataIndex = _this$props4.dataIndex;
+
+            _this.setState({
+                value: value
+            }, function () {
+                onFilterChange(dataIndex, value, _this.state.condition);
            });
        };

@ -86,37 +128,25 @@ var FilterType = function (_Component) {

            onChange && onChange("");
            _this.setState({
-                number: ""
+                value: ""
            });
        };

-        _this.changeText = function (eve) {
-            _this.setState({
-                text: eve
-            });
-        };
-
-        _this.changeTextCall = function (eve) {
-            var onChange = _this.props.onChange;
-
-            if (eve.keyCode == 13) {
-                onChange(eve.target.value);
-            }
-        };
-
        _this.changeTextCallBlur = function (val) {
            var onChange = _this.props.onChange;

            onChange && onChange(val);
        };

-        _this.changeSelect = function (val) {
-            var onChange = _this.props.onChange;
+        _this.changeSelect = function (value) {
+            var _this$props5 = _this.props,
+                onFilterChange = _this$props5.onFilterChange,
+                dataIndex = _this$props5.dataIndex;

-            if (onChange) {
-                onChange(val);
+            if (onFilterChange) {
+                onFilterChange(dataIndex, value, _this.state.condition);
                _this.setState({
-                    selectValue: val
+                    value: value
                });
            }
        };
@ -137,28 +167,31 @@ var FilterType = function (_Component) {
            });
        };

-        _this.changeDate = function (val) {
-            var onChange = _this.props.onChange;
+        _this.changeDate = function (value) {
+            var _this$props6 = _this.props,
+                onFilterChange = _this$props6.onFilterChange,
+                dataIndex = _this$props6.dataIndex;

-            if (onChange) {
-                onChange(val);
+            if (onFilterChange) {
+                onFilterChange(dataIndex, value, _this.state.condition);
                _this.setState({
-                    dateValue: val,
+                    value: value,
                    open: false
                });
            }
        };

        _this.renderControl = function (rendertype) {
-            var _this$props = _this.props,
-                filterDropdown = _this$props.filterDropdown,
-                filterDropdownType = _this$props.filterDropdownType,
-                format = _this$props.format,
-                className = _this$props.className,
-                onChange = _this$props.onChange,
-                onSelectDropdown = _this$props.onSelectDropdown,
-                clsPrefix = _this$props.clsPrefix,
-                locale = _this$props.locale;
+            var _this$props7 = _this.props,
+                dataIndex = _this$props7.dataIndex,
+                filterDropdown = _this$props7.filterDropdown,
+                filterDropdownType = _this$props7.filterDropdownType,
+                format = _this$props7.format,
+                className = _this$props7.className,
+                onChange = _this$props7.onChange,
+                onSelectDropdown = _this$props7.onSelectDropdown,
+                clsPrefix = _this$props7.clsPrefix,
+                locale = _this$props7.locale;

            switch (rendertype) {
                case 'text':
@ -166,20 +199,19 @@ var FilterType = function (_Component) {
                        'div',
                        { className: clsPrefix + ' filter-wrap' },
                        _react2["default"].createElement(_beeFormControl2["default"], {
-                            ref: function ref(el) {
-                                return _this.text = el;
-                            },
-                            value: _this.state.text,
+                            value: _this.state.value,
                            className: className,
                            onChange: _this.changeText,
-                            onKeyDown: _this.changeTextCall,
-                            onBlur: _this.changeTextCallBlur
+                            onKeyDown: _this.changeTextCall
+                            //onBlur={this.changeTextCallBlur}
                        }),
                        _react2["default"].createElement(_FilterDropDown2["default"], {
                            locale: locale,
-                            onSelectDropdown: onSelectDropdown,
-                            onClickClear: _this.clearText,
-                            isShowClear: _this.state.text,
+                            dataIndex: dataIndex,
+                            dataText: _this.state.value,
+                            onSelectDropdown: _this.onSelectDropdown,
+                            onClickClear: _this.clearFilter,
+                            isShowClear: _this.state.value,
                            isShowCondition: filterDropdown,
                            filterDropdownType: filterDropdownType
                        })
@ -190,15 +222,17 @@ var FilterType = function (_Component) {
                        { className: clsPrefix + ' filter-wrap' },
                        _react2["default"].createElement(_beeInputNumber2["default"], {
                            className: className,
-                            value: _this.state.number,
+                            value: _this.state.value,
                            onChange: _this.changeNumber,
                            iconStyle: 'one'
                        }),
                        _react2["default"].createElement(_FilterDropDown2["default"], {
                            locale: locale,
-                            onSelectDropdown: onSelectDropdown,
-                            onClickClear: _this.clearNumber,
-                            isShowClear: _this.state.number,
+                            dataIndex: dataIndex,
+                            dataText: _this.state.value,
+                            onSelectDropdown: _this.onSelectDropdown,
+                            onClickClear: _this.clearFilter,
+                            isShowClear: _this.state.value != 0,
                            isShowCondition: filterDropdown,
                            filterDropdownType: filterDropdownType
                        })
@ -208,15 +242,18 @@ var FilterType = function (_Component) {
                        'div',
                        { className: clsPrefix + ' filter-wrap' },
                        _react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
-                            value: _this.state.selectValue,
+                            value: _this.state.value,
                            onChange: _this.changeSelect
                        })),
                        _react2["default"].createElement(_FilterDropDown2["default"], {
                            locale: locale,
-                            onSelectDropdown: onSelectDropdown,
-                            onClickClear: _this.clearSelectValue,
+                            dataIndex: dataIndex,
+                            dataText: _this.state.value,
+                            onSelectDropdown: _this.onSelectDropdown,
+                            onClickClear: _this.clearFilter,
                            isShowCondition: filterDropdown,
-                            isShowClear: _this.state.selectValue
+                            isShowClear: _this.state.value,
+                            filterDropdownType: filterDropdownType
                        })
                    );
                case 'date':
@ -224,7 +261,7 @@ var FilterType = function (_Component) {
                        'div',
                        { className: clsPrefix + ' filter-wrap' },
                        _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
-                            value: _this.state.dateValue,
+                            value: _this.state.value,
                            onChange: _this.changeDate,
                            open: _this.state.open,
                            format: format,
@ -232,10 +269,13 @@ var FilterType = function (_Component) {
                        })),
                        _react2["default"].createElement(_FilterDropDown2["default"], {
                            locale: locale,
-                            onSelectDropdown: onSelectDropdown,
-                            onClickClear: _this.clearDateValue,
+                            dataIndex: dataIndex,
+                            dataText: _this.state.value,
+                            onSelectDropdown: _this.onSelectDropdown,
+                            onClickClear: _this.clearFilter,
                            isShowCondition: filterDropdown,
-                            isShowClear: _this.state.dateValue
+                            isShowClear: _this.state.value,
+                            filterDropdownType: filterDropdownType
                        })
                    );
                case 'daterange':
@ -243,10 +283,11 @@ var FilterType = function (_Component) {
                        'div',
                        { className: clsPrefix + ' filter-wrap' },
                        _react2["default"].createElement(RangePicker, _extends({}, _this.props, {
-                            value: _this.state.dateValue,
+                            value: _this.state.value,
                            onChange: _this.changeDate,
                            open: _this.state.open,
                            format: format,
+                            showTime: true,
                            locale: _zh_CN2["default"],
                            placeholder: '开始 ~ 结束',
                            dateInputPlaceholder: ['开始', '结束'],
@ -254,10 +295,12 @@ var FilterType = function (_Component) {
                        })),
                        _react2["default"].createElement(_FilterDropDown2["default"], {
                            locale: locale,
-                            onSelectDropdown: onSelectDropdown,
-                            onClickClear: _this.clearDateValue,
+                            dataIndex: dataIndex,
+                            dataText: _this.state.value,
+                            onSelectDropdown: _this.onSelectDropdown,
+                            onClickClear: _this.clearFilter,
                            isShowCondition: filterDropdown,
-                            isShowClear: _this.state.dateValue
+                            isShowClear: _this.state.value
                        })
                    );
                case 'bool':
@ -278,23 +321,54 @@ var FilterType = function (_Component) {
        };

        _this.state = {
+            value: "",
            text: "",
            selectValue: "",
            dateValue: "",
            open: false,
+            condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
            number: 0
        };
        return _this;
    }
-    //清除文本

-    //设置数值
+    /**
+     * 清除过滤条件
+     *
+     */
+
+
+    /**
+     * 设置输入文本的值
+     *
+     */
+
+
+    /**
+     * 输入框回车执行回调
+     *
+     */
+
+    /**
+     * 更改修改值
+     *
+     */
+
+    /**
+     * 下拉条件的回调
+     *
+     * @param {*} key 字段
+     * @param {*} value 值1,2,3...6
+     */
+
+
+    /**
+     * 修改数值型的值
+     *
+     */

    //清除数值

-    //设置文本
-
-    //回车执行函数

    //失去焦点后执行函数

--- a/build/Table.css
+++ b/build/Table.css
@ -611,3 +611,9 @@
      height: 100%;
      top: 0px;
      left: 3px; }
+
+.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+  line-height: 32px;
+  height: 32px;
+  padding: 0px 16px 0 16px;
+  cursor: pointer; }
--- a/build/Table.js
+++ b/build/Table.js
@ -364,8 +364,8 @@ var Table = function (_Component) {
  Table.prototype.getHeader = function getHeader(columns, fixed) {
    var _props = this.props,
        filterDelay = _props.filterDelay,
-        onFilterRowsDropChange = _props.onFilterRowsDropChange,
-        onFilterRowsChange = _props.onFilterRowsChange,
+        onFilterChange = _props.onFilterChange,
+        onFilterClear = _props.onFilterClear,
        filterable = _props.filterable,
        showHeader = _props.showHeader,
        expandIconAsCell = _props.expandIconAsCell,
@ -417,9 +417,9 @@ var Table = function (_Component) {
      rowStyle: trStyle,
      fixed: fixed,
      filterable: filterable,
-      onFilterRowsChange: onFilterRowsChange,
-      onFilterRowsDropChange: onFilterRowsDropChange,
-      filterDelay: filterDelay,
+      onFilterChange: onFilterChange //过滤行输入或下拉之后回调
+      , onFilterClear: onFilterClear //过滤行清除后回调
+      , filterDelay: filterDelay,
      afterDragColWidth: afterDragColWidth,
      contentDomWidth: this.contentDomWidth,
      scrollbarWidth: this.scrollbarWidth,
--- a/build/TableHeader.js
+++ b/build/TableHeader.js
@ -295,19 +295,19 @@ var TableHeader = function (_Component) {
      }
    };

-    _this.handlerFilterTextChange = function (key, val) {
-      var onFilterRowsChange = _this.props.onFilterRowsChange;
+    _this.handlerFilterChange = function (key, value, condition) {
+      var onFilterChange = _this.props.onFilterChange;

-      if (onFilterRowsChange) {
-        onFilterRowsChange(key, val);
+      if (onFilterChange) {
+        onFilterChange(key, value, condition);
      }
    };

-    _this.handlerFilterDropChange = function (key, val) {
-      var onFilterRowsDropChange = _this.props.onFilterRowsDropChange;
+    _this.handlerFilterClear = function (field) {
+      var onFilterClear = _this.props.onFilterClear;

-      if (onFilterRowsDropChange) {
-        onFilterRowsDropChange(key, val.key);
+      if (onFilterClear) {
+        onFilterClear(field);
      }
    };

@ -322,15 +322,15 @@ var TableHeader = function (_Component) {
        //文本输入
        case "text":
          return _react2["default"].createElement(_FilterType2["default"], {
-            locale: locale,
-            rendertype: type,
-            clsPrefix: clsPrefix,
-            className: clsPrefix + " filter-text",
-            onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
-            // onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
-            , onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
-            filterDropdown: rows[1][index]["filterdropdown"],
-            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+            locale: locale //多语
+            , rendertype: type //渲染类型
+            , clsPrefix: clsPrefix //css前缀
+            , className: clsPrefix + " filter-text",
+            dataIndex: dataIndex //字段
+            , onFilterChange: _this.handlerFilterChange //输入框回调
+            , onFilterClear: _this.handlerFilterClear //清除回调
+            , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
+            , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
          });
        //数值输入
        case "number":
@ -339,14 +339,16 @@ var TableHeader = function (_Component) {
            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"],
+            dataIndex: dataIndex //字段
+            , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动
+            , onFilterClear: _this.handlerFilterClear //清除回调
+            , filterDropdown: rows[1][index]["filterdropdown"],
            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
          });
        //下拉框选择
        case "dropdown":
          var selectDataSource = [];
+          //处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
          if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
            var hash = {};
            //处理下拉重复对象组装dropdown
@ -361,6 +363,7 @@ var TableHeader = function (_Component) {
              return item;
            }, []);
          } else {
+            //从外部数据源加载系统数据
            selectDataSource = rows[1][index]["filterdropdowndata"];
          }
          return _react2["default"].createElement(_FilterType2["default"], {
@ -368,9 +371,10 @@ var TableHeader = function (_Component) {
            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"],
+            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
          });
@ -382,9 +386,10 @@ var TableHeader = function (_Component) {
            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"],
+            dataIndex: dataIndex //字段
+            , onFilterChange: _this.handlerFilterChange //输入框回调
+            , onFilterClear: _this.handlerFilterClear //清除回调
+            , filterDropdown: rows[1][index]["filterdropdown"],
            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
          });
        //日期范围
@ -395,9 +400,10 @@ var TableHeader = function (_Component) {
            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"],
+            dataIndex: dataIndex //字段
+            , onFilterChange: _this.handlerFilterChange //输入框回调
+            , onFilterClear: _this.handlerFilterClear //清除回调
+            , filterDropdown: rows[1][index]["filterdropdown"],
            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
          });
        default:
@ -458,15 +464,17 @@ var TableHeader = function (_Component) {
  // }

  /**
-   * @description 过滤输入后的回调函数
+   * 过滤输入后或下拉条件的回调函数
   */

-  /**
-   * @description 过滤输入后的回调函数
-   */

  /**
-   * @description 过滤渲染的组件类型
+   * 过滤行清除回调
+   */
+
+
+  /**
+   * 过滤渲染的组件类型
   */


--- a/demo/demolist/Demo26.js
+++ b/demo/demolist/Demo26.js
@ -85,16 +85,17 @@ const data26 = [
 ];

 class Demo26 extends Component {
-  handlerFilterRowsChange = (key, val) => {
-    console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
  }
-  handlerFilterRowsDropChange = (key, val) => {
-    console.log('过滤条件类型:', key, val);
+
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
  }
  render() {
    return <Table
-      onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
-      onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
+      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
      filterable={true}//是否开启过滤数据功能
      bordered
--- a/demo/demolist/Demo27.js
+++ b/demo/demolist/Demo27.js
@ -106,12 +106,12 @@ class Demo27 extends Component {
      dropdownvalue: []
    }
  }
-  handlerFilterRowsChange = (key, val) => {
-    console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
  }

-  handlerFilterRowsDropChange = (key, val) => {
-    console.log('过滤条件类型:', key, val);
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
  }
  getSelectedDataFunc = data => {
    console.log(data);
@ -158,49 +158,47 @@ class Demo27 extends Component {
        filterDropdown: "show",//显示条件
        filterDropdownType: "string"//字符条件
      },
-      {
-        title: "区间",
-        width: 200,
-        dataIndex: "mark",
-        key: "mark",
-        filterType: "number",//输入框类型
-        filterDropdownType: "number"//数值类条件
-      },
      {
        title: "年龄",
        width: 180,
-        sorter: (a, b) => a.age - b.age,
        dataIndex: "age",
        key: "age",
-        filterType: "dropdown",
-        filterDropdown: "hide",//不显示条件
-        filterDropdownAuto: "manual",//切换手动传入模式
-        filterDropdownData: this.state.dropdownvalue,
-        filterDropdownFocus: () => {
-          this.setState({
-            dropdownvalue: [{ key: "自定义数据1", value: "1" }, { key: "自定义数据2", value: "2" }]
-          });
-        }
+        filterType: "number",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
      },
      {
-        title: "居住地址",
-        width: 350,
+        title: "日期",
+        width: 190,
+        dataIndex: "date",
+        key: "date",
+        filterType: "date",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "string"//字符条件
+      },
+      {
+        title: "时间范围",
+        width: 290,
+        dataIndex: "mark",
+        key: "mark",
+        filterType: "daterange",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
+      },
+      {
+        title: "地址",
+        width: 100,
        dataIndex: "address",
        key: "address",
-        filterType: "daterange",
-        filterDropdown: "show"
-      },
-      {
-        title: "操作",
-        width: 100,
-        key: "other",
-        dataIndex: "other"
+        filterType: "dropdown",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
      }
    ];
    return <ComplexTable
-      onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
-      onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
-      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
+      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
+      filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
      filterable={true}//是否开启过滤数据功能
      getSelectedDataFunc={this.getSelectedDataFunc}
      bordered
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -2421,9 +2421,6 @@ i.uf {
 /*
 * 选择时删除文本阴影，及设置默认选中颜色
 */
-::-moz-selection {
-  background: rgb(187,222,251);
-  text-shadow: none; }
 ::selection {
  background: rgb(187,222,251);
  text-shadow: none; }
@ -5287,7 +5284,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
  .u-panel .u-panel-body {
    padding: 15px 15px;
    position: relative; }
-    .u-panel .u-panel-body .uf {
+    .u-panel .u-panel-body .u-panel-copy {
      position: absolute;
      right: 25px;
      top: 30px;
@ -5297,7 +5294,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
      margin: 8px;
      border-radius: 4px;
      cursor: pointer; }
-      .u-panel .u-panel-body .uf:hover {
+      .u-panel .u-panel-body .u-panel-copy:hover {
        color: #a8a7a7; }

 .u-panel-default {
@ -6673,7 +6670,8 @@ input.u-button[type="submit"] {
  border-radius: 0 500px 500px 0; }

 .u-pagination {
-  font-size: 14px; }
+  font-size: 14px;
+  position: relative; }
  .u-pagination-list {
    float: left;
    margin: 5px; }
@ -6811,6 +6809,15 @@ input.u-button[type="submit"] {
    margin: 5px; }
    .u-pagination-total span {
      padding: 0 5px; }
+  .u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 2;
+    cursor: not-allowed; }

 .pagination-state {
  float: left;
@ -6917,15 +6924,29 @@ input.u-button[type="submit"] {
  margin: 0 5px;
  height: 18px;
  line-height: 18px;
-  font-size: 14px; }
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
  .u-checkbox.disabled .u-checkbox-label {
    cursor: not-allowed;
    opacity: 0.5; }
  .u-checkbox input[type='checkbox'] {
-    display: none;
-    cursor: pointer; }
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
  .u-checkbox input[disabled] {
    cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: #1e88e5; }
  .u-checkbox.is-checked .u-checkbox-label:before {
    box-shadow: inset 0 0 0 10px rgb(30,136,229);
    border-color: rgb(30,136,229); }
@ -6977,22 +6998,37 @@ input.u-button[type="submit"] {
  box-shadow: inset 0 0 0 10px rgb(76,175,80);
  border-color: rgb(76,175,80); }

+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(255,152,0);
  border-color: rgb(255,152,0); }

+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(244,67,54);
  border-color: rgb(244,67,54); }

+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(97,97,97);
  border-color: rgb(97,97,97); }

+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(0,188,212);
  border-color: rgb(0,188,212); }

+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 /* FormGroup */
 /*  Navlayout  */
 /* keyframes 定义 */
@ -7530,7 +7566,8 @@ ul {
    zoom: 1;
    position: absolute;
    right: 4px;
-    padding: 0 0 0 8px; }
+    padding: 0 0 0 8px;
+    top: -3px; }
  .u-select-selection--multiple .u-select-selection-choice-remove:before {
    display: block;
    font-family: "uf"; }
@ -8874,6 +8911,12 @@ ul {
      top: 0px;
      left: 3px; }

+.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
+  line-height: 32px;
+  height: 32px;
+  padding: 0px 16px 0 16px;
+  cursor: pointer; }
+
 /* FormGroup */
 /*  Navlayout  */
 /* FormGroup */
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -50,8 +50,8 @@ import 'bee-table/build/Table.css';
 | haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 | filterable       | 是否开启根据条件来过滤数据 | bool | false
 | filterDelay       | 触发过滤输入的时候的ms延迟时间 | number | 300
-| onFilterRowsChange       | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
-| onFilterRowsDropChange       | 过滤下拉条件的回调 | (key,val)=>() | () => ()
+| onFilterChange       | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
+| onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false


@ -72,9 +72,9 @@ import 'bee-table/build/Table.css';
 |render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
 |onCellClick|单击列的单元格时调用|Function(row, event)|-|
 | order | 设置排序 | string（"descend"、"ascend"） | -|
-| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
+| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
 | filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
-| format | 设置日期类的格式 | string | YYYY-MM-DD |
+| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
 | filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
 | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
--- a/src/FilterDropDown.js
+++ b/src/FilterDropDown.js
@ -25,14 +25,16 @@ class FilterDropDown extends Component {
     *
     * @param {*} s 选中的selectRecord
     */
-    onSelectDropdown = (s) => {
-        let { onSelectDropdown } = this.props;
+    onSelectDropdown = (item) => {
+        let { onSelectDropdown, dataText } = this.props;
        if (onSelectDropdown) {
-            this.setState({
-                selectValue: [s.key]
-            }, () => {
-                onSelectDropdown(s);
-            });
+            if (dataText != "") {
+                this.setState({
+                    selectValue: [item.key]
+                }, () => {
+                    onSelectDropdown(item);
+                });
+            }
        }
    }

@ -66,24 +68,24 @@ class FilterDropDown extends Component {
                    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>
+                    <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="START">{locale['begin']}</Item>
+                    <Item key="END">{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>
+                    <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>;
@ -94,6 +96,7 @@ class FilterDropDown extends Component {

        return (<div className="filter-btns">
            {isShowCondition == 'show' && <Dropdown
+                overlayClassName="u-filter-dropdown-menu-wrap"
                trigger={['click']}
                overlay={this.getMenu()}
                animation="slide-up"
--- a/src/FilterType.js
+++ b/src/FilterType.js
@ -14,30 +14,88 @@ const propTypes = {
 };

 class FilterType extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
        this.state = {
+            value: "",
            text: "",
            selectValue: "",
            dateValue: "",
            open: false,
+            condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
            number: 0
        }
    }
-    //清除文本
-    clearText = () => {
+
+    /**
+     * 清除过滤条件
+     *
+     */
+    clearFilter = () => {
+        let { onFilterClear, dataIndex } = this.props;
        this.setState({
-            text: ""
+            value: "",//清空值
+            condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
+        }, () => {
+            //调用清除方法参数为当前字段的field
+            onFilterClear && onFilterClear(dataIndex);
        });
-        let { onChange } = this.props;
-        onChange && onChange("");
    }
-    //设置数值
-    changeNumber = (number) => {
-        let { onChange } = this.props;
-        onChange && onChange(number);
+
+    /**
+     * 设置输入文本的值
+     *
+     */
+    changeText = (val) => {
        this.setState({
-            number
+            value: val
+        });
+    }
+
+    /**
+     * 输入框回车执行回调
+     *
+     */
+    changeTextCall = (e) => {
+        let { onFilterChange, dataIndex } = this.props;
+        if (e.keyCode == 13) {
+            onFilterChange(dataIndex, e.target.value, this.state.condition);
+        }
+    }
+    /**
+     * 更改修改值
+     *
+     */
+    changeValue = () => {
+        this.setState({
+            value: ""
+        });
+    }
+    /**
+     * 下拉条件的回调
+     *
+     * @param {*} key 字段
+     * @param {*} value 值1,2,3...6
+     */
+    onSelectDropdown = (item) => {
+        let { onFilterChange, dataIndex } = this.props;
+        this.setState({
+            condition: item.key
+        }, () => {
+            onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
+        });
+    }
+
+    /**
+     * 修改数值型的值
+     *
+     */
+    changeNumber = (value) => {
+        let { onFilterChange, dataIndex } = this.props;
+        this.setState({
+            value
+        }, () => {
+            onFilterChange(dataIndex, value, this.state.condition);
        });
    }
    //清除数值
@ -45,34 +103,22 @@ class FilterType extends Component {
        let { onChange } = this.props;
        onChange && onChange("");
        this.setState({
-            number: ""
+            value: ""
        });
    }
-    //设置文本
-    changeText = (eve) => {
-        this.setState({
-            text: eve
-        });
-    }
-    //回车执行函数
-    changeTextCall = (eve) => {
-        let { onChange } = this.props;
-        if (eve.keyCode == 13) {
-            onChange(eve.target.value);
-        }
-    }
+
    //失去焦点后执行函数
    changeTextCallBlur = (val) => {
        let { onChange } = this.props;
        onChange && onChange(val);
    }
    //设置下拉值
-    changeSelect = (val) => {
-        let { onChange } = this.props;
-        if (onChange) {
-            onChange(val);
+    changeSelect = (value) => {
+        let { onFilterChange, dataIndex } = this.props;
+        if (onFilterChange) {
+            onFilterChange(dataIndex, value, this.state.condition);
            this.setState({
-                selectValue: val
+                value
            });
        }
    }
@ -93,12 +139,12 @@ class FilterType extends Component {
        });
    }
    //设置日期值
-    changeDate = (val) => {
-        let { onChange } = this.props;
-        if (onChange) {
-            onChange(val);
+    changeDate = (value) => {
+        let { onFilterChange, dataIndex } = this.props;
+        if (onFilterChange) {
+            onFilterChange(dataIndex, value, this.state.condition);
            this.setState({
-                dateValue: val,
+                value,
                open: false
            });
        }
@ -111,23 +157,24 @@ class FilterType extends Component {
     * @returns
     */
    renderControl = (rendertype) => {
-        let { filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
+        let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
        switch (rendertype) {
            case 'text':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <FormControl
-                        ref={el => this.text = el}
-                        value={this.state.text}
+                        value={this.state.value}
                        className={className}
                        onChange={this.changeText}
                        onKeyDown={this.changeTextCall}
-                        onBlur={this.changeTextCallBlur}
+                    //onBlur={this.changeTextCallBlur}
                    />
                    <FilterDropDown
                        locale={locale}
-                        onSelectDropdown={onSelectDropdown}
-                        onClickClear={this.clearText}
-                        isShowClear={this.state.text}
+                        dataIndex={dataIndex}
+                        dataText={this.state.value}
+                        onSelectDropdown={this.onSelectDropdown}
+                        onClickClear={this.clearFilter}
+                        isShowClear={this.state.value}
                        isShowCondition={filterDropdown}
                        filterDropdownType={filterDropdownType}
                    >
@ -137,15 +184,17 @@ class FilterType extends Component {
                return <div className={`${clsPrefix} filter-wrap`}>
                    <InputNumber
                        className={className}
-                        value={this.state.number}
+                        value={this.state.value}
                        onChange={this.changeNumber}
                        iconStyle="one"
                    />
                    <FilterDropDown
                        locale={locale}
-                        onSelectDropdown={onSelectDropdown}
-                        onClickClear={this.clearNumber}
-                        isShowClear={this.state.number}
+                        dataIndex={dataIndex}
+                        dataText={this.state.value}
+                        onSelectDropdown={this.onSelectDropdown}
+                        onClickClear={this.clearFilter}
+                        isShowClear={this.state.value != 0}
                        isShowCondition={filterDropdown}
                        filterDropdownType={filterDropdownType}
                    >
@ -155,31 +204,37 @@ class FilterType extends Component {
                return <div className={`${clsPrefix} filter-wrap`}>
                    <Select
                        {...this.props}
-                        value={this.state.selectValue}
+                        value={this.state.value}
                        onChange={this.changeSelect}
                    /><FilterDropDown
                        locale={locale}
-                        onSelectDropdown={onSelectDropdown}
-                        onClickClear={this.clearSelectValue}
+                        dataIndex={dataIndex}
+                        dataText={this.state.value}
+                        onSelectDropdown={this.onSelectDropdown}
+                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
-                        isShowClear={this.state.selectValue}
+                        isShowClear={this.state.value}
+                        filterDropdownType={filterDropdownType}
                    >
                    </FilterDropDown></div>
            case 'date':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <DatePicker
                        {...this.props}
-                        value={this.state.dateValue}
+                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        locale={zhCN}
                    /><FilterDropDown
                        locale={locale}
-                        onSelectDropdown={onSelectDropdown}
-                        onClickClear={this.clearDateValue}
+                        dataIndex={dataIndex}
+                        dataText={this.state.value}
+                        onSelectDropdown={this.onSelectDropdown}
+                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
-                        isShowClear={this.state.dateValue}
+                        isShowClear={this.state.value}
+                        filterDropdownType={filterDropdownType}
                    >
                    </FilterDropDown>
                </div>
@ -187,20 +242,23 @@ class FilterType extends Component {
                return <div className={`${clsPrefix} filter-wrap`}>
                    <RangePicker
                        {...this.props}
-                        value={this.state.dateValue}
+                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
+                        showTime={true}
                        locale={zhCN}
                        placeholder={'开始 ~ 结束'}
                        dateInputPlaceholder={['开始', '结束']}
                        showClear={true}
                    /><FilterDropDown
                        locale={locale}
-                        onSelectDropdown={onSelectDropdown}
-                        onClickClear={this.clearDateValue}
+                        dataIndex={dataIndex}
+                        dataText={this.state.value}
+                        onSelectDropdown={this.onSelectDropdown}
+                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
-                        isShowClear={this.state.dateValue}
+                        isShowClear={this.state.value}
                    >
                    </FilterDropDown>
                </div>
--- a/src/Table.js
+++ b/src/Table.js
@ -293,7 +293,7 @@ class Table extends Component {
  }

  getHeader(columns, fixed) {
-    const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
+    const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
    const rows = this.getHeaderRows(columns);
    if (expandIconAsCell && fixed !== 'right') {
@ -328,8 +328,8 @@ class Table extends Component {
        rowStyle={trStyle}
        fixed={fixed}
        filterable={filterable}
-        onFilterRowsChange={onFilterRowsChange}
-        onFilterRowsDropChange={onFilterRowsDropChange}
+        onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
+        onFilterClear={onFilterClear}//过滤行清除后回调
        filterDelay={filterDelay}
        afterDragColWidth = {afterDragColWidth}
        contentDomWidth={this.contentDomWidth}
--- a/src/Table.scss
+++ b/src/Table.scss
@ -693,3 +693,14 @@ $table-move-in-color: $bg-color-base;
    }
  }
 }
+
+.u-filter-dropdown-menu-wrap {
+    .u-dropdown-menu {
+        li.u-dropdown-menu-item {
+            line-height: 32px;
+            height: 32px;
+            padding: 0px 16px 0 16px;
+            cursor: pointer;
+        }
+    }
+}
--- a/src/TableHeader.js
+++ b/src/TableHeader.js
@ -304,26 +304,29 @@ class TableHeader extends Component {
    }
  };

+  
  /**
-   * @description 过滤输入后的回调函数
+   * 过滤输入后或下拉条件的回调函数
   */
-  handlerFilterTextChange = (key, val) => {
-    let { onFilterRowsChange } = this.props;
-    if (onFilterRowsChange) {
-      onFilterRowsChange(key, val);
+  handlerFilterChange = (key, value, condition) => {
+    let { onFilterChange } = this.props;
+    if (onFilterChange) {
+      onFilterChange(key, value, condition);
    }
  };
+
  /**
-   * @description 过滤输入后的回调函数
+   * 过滤行清除回调
   */
-  handlerFilterDropChange = (key, val) => {
-    let { onFilterRowsDropChange } = this.props;
-    if (onFilterRowsDropChange) {
-      onFilterRowsDropChange(key, val.key);
+  handlerFilterClear = (field) => {
+    let { onFilterClear } = this.props;
+    if (onFilterClear) {
+      onFilterClear(field);
    }
-  };
+  }
+
  /**
-   * @description 过滤渲染的组件类型
+   * 过滤渲染的组件类型
   */
  filterRenderType = (type, dataIndex, index) => {
    const { clsPrefix, rows, filterDelay, locale } = this.props;
@ -332,24 +335,18 @@ class TableHeader extends Component {
      case "text":
        return (
          <FilterType
-            locale={locale}
-            rendertype={type}
-            clsPrefix={clsPrefix}
+            locale={locale}//多语
+            rendertype={type}//渲染类型
+            clsPrefix={clsPrefix}//css前缀
            className={`${clsPrefix} filter-text`}
-            onChange={debounce(
-              filterDelay || 300,
-              this.handlerFilterTextChange.bind(this, dataIndex)
-            )}
-            // onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
-            onSelectDropdown={this.handlerFilterDropChange.bind(
-              this,
-              dataIndex
-            )}
-            filterDropdown={rows[1][index]["filterdropdown"]}
+            dataIndex={dataIndex}//字段
+            onFilterChange={this.handlerFilterChange}//输入框回调
+            onFilterClear={this.handlerFilterClear}//清除回调
+            filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
          />
        );
-        //数值输入
+      //数值输入
      case "number":
        return (
          <FilterType
@ -357,14 +354,9 @@ class TableHeader extends Component {
            rendertype={type}
            clsPrefix={clsPrefix}
            className={`${clsPrefix} filter-text`}
-            onChange={debounce(
-              filterDelay || 300,
-              this.handlerFilterTextChange.bind(this, dataIndex)
-            )}
-            onSelectDropdown={this.handlerFilterDropChange.bind(
-              this,
-              dataIndex
-            )}
+            dataIndex={dataIndex}//字段
+            onFilterChange={debounce(filterDelay || 300, this.handlerFilterChange)}//输入框回调并且函数防抖动
+            onFilterClear={this.handlerFilterClear}//清除回调
            filterDropdown={rows[1][index]["filterdropdown"]}
            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
          />
@ -372,10 +364,8 @@ class TableHeader extends Component {
      //下拉框选择
      case "dropdown":
        let selectDataSource = [];
-        if (
-          rows.length > 0 &&
-          (rows[1][index]["filterdropdownauto"] || "auto") == "auto"
-        ) {
+        //处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
+        if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
          let hash = {};
          //处理下拉重复对象组装dropdown
          selectDataSource = Array.from(rows[1][0].datasource, x => ({
@ -387,6 +377,7 @@ class TableHeader extends Component {
            return item;
          }, []);
        } else {
+          //从外部数据源加载系统数据
          selectDataSource = rows[1][index]["filterdropdowndata"];
        }
        return (
@ -395,11 +386,9 @@ class TableHeader extends Component {
            rendertype={type}
            className={`${clsPrefix} filter-dropdown`}
            data={selectDataSource}
-            onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
-            onSelectDropdown={this.handlerFilterDropChange.bind(
-              this,
-              dataIndex
-            )}
+            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
@ -412,13 +401,11 @@ class TableHeader extends Component {
            locale={locale}
            rendertype={type}
            className={`filter-date`}
-            onClick={() => {}}
+            onClick={() => { }}
            format={rows[1][index]["format"] || "YYYY-MM-DD"}
-            onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
-            onSelectDropdown={this.handlerFilterDropChange.bind(
-              this,
-              dataIndex
-            )}
+            dataIndex={dataIndex}//字段
+            onFilterChange={this.handlerFilterChange}//输入框回调
+            onFilterClear={this.handlerFilterClear}//清除回调
            filterDropdown={rows[1][index]["filterdropdown"]}
            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
          />
@ -430,13 +417,11 @@ class TableHeader extends Component {
            locale={locale}
            rendertype={type}
            className={`filter-date`}
-            onClick={() => {}}
+            onClick={() => { }}
            format={rows[1][index]["format"] || "YYYY-MM-DD"}
-            onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
-            onSelectDropdown={this.handlerFilterDropChange.bind(
-              this,
-              dataIndex
-            )}
+            dataIndex={dataIndex}//字段
+            onFilterChange={this.handlerFilterChange}//输入框回调
+            onFilterClear={this.handlerFilterClear}//清除回调
            filterDropdown={rows[1][index]["filterdropdown"]}
            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
          />