update:完善UI展示&添加函数节流参数&单独设置条件

demo/demolist/Demo26.js

@@ -11,10 +11,10 @@ import Table from '../../src';
 
 
 const columns26 = [
-  { title: "姓名", width: 150, dataIndex: "name", key: "name", filterType: "text" },
+  { title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
-  { title: "年龄", width: 100, dataIndex: "age", key: "age", filterType: "dropdown" },
+  { title: "年龄", width: 120, dataIndex: "age", key: "age", filterType: "dropdown" },
   { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date" },
-  { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "text" },
+  { title: "居住地址", width: 120, dataIndex: "address", key: "address", filterType: "dropdown" },
   { title: "备注", dataIndex: "mark", key: "mark" }
 ];
 
@@ -84,7 +84,7 @@ const data26 = [
   }
 ];
 
-class Demo6 extends Component {
+class Demo26 extends Component {
   handlerFilterRowsChange = (key, val) => {
     console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
   }
@@ -92,8 +92,15 @@ class Demo6 extends Component {
     console.log('过滤条件类型:', key, val);
   }
   render() {
-    return <Table onFilterRowsDropChange={this.handlerFilterRowsDropChange} onFilterRowsChange={this.handlerFilterRowsChange} filterable={true} bordered columns={columns26} data={data26} />;
+    return <Table
+      onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
+      onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
+      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
+      filterable={true}//是否开启过滤数据功能
+      bordered
+      columns={columns26}
+      data={data26} />;
   }
 }
 
-export default Demo6;
+export default Demo26;

dist/demo.css

@@ -8547,6 +8547,9 @@ ul {
     box-shadow: none; }
   .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
     font-weight: normal; }
+  .u-table-thead .filter-wrap {
+    display: -ms-flexbox;
+    display: flex; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;
@@ -10244,12 +10247,4 @@ li.rc-time-picker-panel-select-option-disabled:hover {
   .demo25 .u-table-scroll .u-table-header {
     margin-right: 15px; }
 
-th .drop-menu .uf {
-  font-size: 12px;
-  visibility: hidden;
-  margin-left: 15px; }
-
-th:hover .uf {
-  visibility: visible; }
-
 /*# sourceMappingURL=demo.css.map */

src/FilterDropDown.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import Dropdown from 'bee-dropdown';
+import Menu from 'bee-menus';
+import Button from 'bee-button';
+import Icon from 'bee-icon';
+const { Item } = Menu;
+
+class FilterDropDown extends Component {
+    render() {
+        let dropmenu = (
+            <Menu
+                onSelect={this.props.onSelectDropdown}
+            >
+                <Item key="1">等于</Item>
+                <Item key="2">包含</Item>
+                <Item key="3">以结尾</Item>
+                <Item key="4">空</Item>
+                <Item key="5">不等于</Item>
+                <Item key="6">不包含</Item>
+                <Item key="7">以开始</Item>
+            </Menu>
+        );
+        return (
+            <Dropdown
+                trigger={['click']}
+                overlay={dropmenu}
+                animation="slide-up"
+            >
+                <Button shape="border" style={{ marginLeft: "5px", minWidth: "0px", width: "38px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-navmenu" /></Button>
+            </Dropdown>
+        );
+    }
+}
+
+export default FilterDropDown;

src/FilterType.js

@@ -1,52 +1,43 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import FormControl from 'bee-form-control';
-import Button from 'bee-button';
-import Icon from 'bee-icon';
 import Select from 'bee-select';
 import DatePicker from 'bee-datepicker';
-import Menu from 'bee-menus';
+import FilterDropDown from './FilterDropDown';
-import Dropdown from 'bee-dropdown';
+
-const { Item } = Menu;
+const propTypes = {
-const format = "YYYY-MM-DD dddd";
+    filterDropdown: PropTypes.string
+};
 
 class FilterType extends Component {
     renderControl = (rendertype) => {
+        let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix } = this.props;
         switch (rendertype) {
             case 'text':
-                const dropmenu = (
+                return <div className={`${clsPrefix} filter-wrap`}><FormControl
-                    <Menu
+                    className={className}
-                        onSelect={this.props.onSelectDropdown}
+                    onChange={onChange}
-                    >
-                        <Item key="1">等于</Item>
-                        <Item key="2">包含</Item>
-                        <Item key="3">以结尾</Item>
-                        <Item key="4">空</Item>
-                        <Item key="5">不等于</Item>
-                        <Item key="6">不包含</Item>
-                        <Item key="7">以开始</Item>
-                    </Menu>
-                );
-                return <div><FormControl
-                    className={this.props.className}
-                    onChange={this.props.onChange}
-                    style={{ width: "70%" }}
                 />
-                    <Dropdown
+                    {filterDropdown == 'show' && <FilterDropDown
-                        trigger={['click']}
+                        onSelectDropdown={onSelectDropdown}
-                        overlay={dropmenu}
-                        animation="slide-up"
                     >
-                        <Button shape="border" style={{ marginLeft: "5px", minWidth: "26px", width: "26px", padding: 0, marginBottom: "4px" }}><Icon style={{ padding: 0 }} type="uf-arrow-c-o-down" /></Button>
+                    </FilterDropDown>}
-                    </Dropdown>
                 </div>
             case 'dropdown':
-                return <Select
+                return <div className={`${clsPrefix} filter-wrap`}><Select
                     {...this.props}
-                />
+                />{filterDropdown == 'show' && <FilterDropDown
+                    onSelectDropdown={onSelectDropdown}
+                >
+                </FilterDropDown>}</div>
             case 'date':
-                return <DatePicker
+                return <div className={`${clsPrefix} filter-wrap`}><DatePicker
                     {...this.props}
-                />
+                />{filterDropdown == 'show' && <FilterDropDown
+                    onSelectDropdown={onSelectDropdown}
+                >
+                </FilterDropDown>}
+                </div>
             default:
                 break;
         }
@@ -59,5 +50,8 @@ class FilterType extends Component {
         );
     }
 }
-
+FilterType.propTypes = propTypes;
+FilterType.defaultProps = {
+    filterDropdown: 'show'
+}
 export default FilterType;

src/Table.js

@@ -256,7 +256,7 @@ class Table extends Component {
   }
 
   getHeader(columns, fixed) {
-    const { onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
+    const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight } = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -291,6 +291,7 @@ class Table extends Component {
         filterable={filterable}
         onFilterRowsChange={onFilterRowsChange}
         onFilterRowsDropChange={onFilterRowsDropChange}
+        filterDelay={filterDelay}
       />
     ) : null;
   }
@@ -338,7 +339,8 @@ class Table extends Component {
           width: column.width,
           filtertype: column.filterType,
           dataindex: column.dataIndex,
-          datasource: this.props.data
+          datasource: this.props.data,
+          filterdropdown: column.filterDropdown
         });
       }
     });

src/Table.scss

@@ -275,6 +275,9 @@ $table-move-in-color: $bg-color-base;
     .filter-text,.filter-dropdown,.filter-date {
       font-weight: normal;
     }
+    .filter-wrap{
+      display: flex;
+    }
     th{
       background: $table-head-background-color;
       overflow: hidden;

src/TableHeader.js

@@ -223,15 +223,17 @@ class TableHeader extends Component {
    * @description 过滤渲染的组件类型
    */
   filterRenderType = (type, dataIndex, index) => {
-    const { clsPrefix, rows } = this.props;
+    const { clsPrefix, rows, filterDelay } = this.props;
     switch (type) {
       //文本输入
       case 'text':
         return <FilterType
           rendertype={type}
+          clsPrefix={clsPrefix}
           className={`${clsPrefix} filter-text`}
-          onChange={debounce(500, this.handlerFilterTextChange.bind(this, dataIndex))}
+          onChange={debounce(filterDelay || 300, this.handlerFilterTextChange.bind(this, dataIndex))}
           onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
+          filterDropdown={rows[1][index]['filterdropdown']}
         />
       //下拉框选择
       case 'dropdown':
@@ -250,6 +252,7 @@ class TableHeader extends Component {
           className={`${clsPrefix} filter-dropdown`}
           data={selectDataSource}
           onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+          onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
         />
       //日期
       case 'date':
@@ -258,6 +261,7 @@ class TableHeader extends Component {
           className={`${clsPrefix} filter-date`}
           onClick={() => { }}
           onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+          onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
         />
       default:
         //不匹配类型默认文本输入