add:添加过滤行功能的清除按钮以及下拉条件的清除.

.gitignore

@@ -39,3 +39,5 @@ jspm_packages
 coverage
 .*.swp
 package-lock.json
+demo/.DS_Store
+demo/demolist/.DS_Store

demo/demolist/Demo26.js

@@ -12,9 +12,9 @@ import Table from '../../src';
 
 const columns26 = [
   { title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
-  { title: "年龄", width: 120, dataIndex: "age", key: "age", filterType: "dropdown" },
+  { title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
-  { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date" },
+  { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
-  { title: "居住地址", width: 120, dataIndex: "address", key: "address", filterType: "dropdown" },
+  { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
   { title: "备注", dataIndex: "mark", key: "mark" }
 ];
 
@@ -23,7 +23,7 @@ const data26 = [
     key: "1",
     name: "John Brown",
     age: 32,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-19",
     address: "朝阳区",
     mark: "无"
   },
@@ -31,7 +31,7 @@ const data26 = [
     key: "2",
     name: "Jim Green",
     age: 40,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "朝阳区",
     mark: "无"
   },
@@ -39,7 +39,7 @@ const data26 = [
     key: "3",
     name: "Jim Green",
     age: 40,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "东城区",
     mark: "无"
   },
@@ -47,14 +47,14 @@ const data26 = [
     key: "4",
     name: "Jim Green",
     age: 40,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "东城区",
     mark: "无"
   }, {
     key: "5",
     name: "John Brown",
     age: 32,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "海淀区",
     mark: "无"
   },
@@ -62,7 +62,7 @@ const data26 = [
     key: "6",
     name: "Jim Green",
     age: 48,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "海淀区",
     mark: "无"
   },
@@ -70,7 +70,7 @@ const data26 = [
     key: "7",
     name: "Jim Green",
     age: 40,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "海淀区",
     mark: "无"
   },
@@ -78,7 +78,7 @@ const data26 = [
     key: "8",
     name: "Jim Green",
     age: 38,
-    date: "2018-09-18 09:46:44",
+    date: "2018-09-18",
     address: "海淀区",
     mark: "无"
   }

src/FilterDropDown.js

@@ -6,10 +6,38 @@ import Icon from 'bee-icon';
 const { Item } = Menu;
 
 class FilterDropDown extends Component {
+    constructor() {
+        super();
+        this.state = {
+            selectValue: []
+        }
+    }
+    onSelectDropdown = (s) => {
+        let { onSelectDropdown } = this.props;
+        if (onSelectDropdown) {
+            this.setState({
+                selectValue: s.key
+            }, () => {
+                onSelectDropdown(s);
+            });
+        }
+    }
+    onClickClear = () => {
+        let { onClickClear } = this.props;
+        if (onClickClear) {
+            this.setState({
+                selectValue: []
+            }, () => {
+                onClickClear();
+            });
+        }
+    }
     render() {
+        let { isShowCondition } = this.props;
         let dropmenu = (
             <Menu
-                onSelect={this.props.onSelectDropdown}
+                onSelect={this.onSelectDropdown}
+                selectedKeys={this.state.selectValue}
             >
                 <Item key="1">等于</Item>
                 <Item key="2">包含</Item>
@@ -20,14 +48,16 @@ class FilterDropDown extends Component {
                 <Item key="7">以开始</Item>
             </Menu>
         );
-        return (
+        return (<div>
-            <Dropdown
+            {isShowCondition == 'show' && <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>
+                <Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-treearrow-down" /></Button>
-            </Dropdown>
+            </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-close" /></Button>
+        </div>
         );
     }
 }

src/FilterType.js

@@ -10,11 +10,117 @@ const propTypes = {
 };
 
 class FilterType extends Component {
+    constructor() {
+        super();
+        this.state = {
+            text: "",
+            selectValue: "",
+            dateValue: "",
+            open: false
+        }
+    }
+    //清除文本
+    clearText = () => {
+        this.setState({
+            text: ""
+        }, () => {
+            this.changeText("");
+        });
+    }
+    //设置文本
+    changeText = (val) => {
+        let { onChange } = this.props;
+        if (onChange) {
+            onChange(val);
+            this.setState({
+                text: val
+            });
+        }
+    }
+    //设置下拉值
+    changeSelect = (val) => {
+        let { onChange } = this.props;
+        if (onChange) {
+            onChange(val);
+            this.setState({
+                selectValue: val
+            });
+        }
+    }
+    //清除下拉值
+    clearSelectValue = () => {
+        this.setState({
+            selectValue: ""
+        }, () => {
+            this.changeSelect("");
+        });
+    }
+    //清除日期值
+    clearDateValue = () => {
+        this.setState({
+            dateValue: ""
+        }, () => {
+            this.changeDate("");
+        });
+    }
+    //设置日期值
+    changeDate = (val) => {
+        let { onChange } = this.props;
+        if (onChange) {
+            onChange(val);
+            this.setState({
+                dateValue: val,
+                open: false
+            });
+        }
+    }
+    //组件渲染
     renderControl = (rendertype) => {
         let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix } = this.props;
         switch (rendertype) {
             case 'text':
                 return <div className={`${clsPrefix} filter-wrap`}><FormControl
+                    ref={el => this.text = el}
+                    value={this.state.text}
+                    className={className}
+                    onChange={this.changeText}
+                />
+                    <FilterDropDown
+                        onSelectDropdown={onSelectDropdown}
+                        onClickClear={this.clearText}
+                        isShowClear={this.state.text}
+                        isShowCondition={filterDropdown}
+                    >
+                    </FilterDropDown>
+                </div>
+            case 'dropdown':
+                return <div className={`${clsPrefix} filter-wrap`}><Select
+                    {...this.props}
+                    value={this.state.selectValue}
+                    onChange={this.changeSelect}
+                /><FilterDropDown
+                    onSelectDropdown={onSelectDropdown}
+                    onClickClear={this.clearSelectValue}
+                    isShowCondition={filterDropdown}
+                    isShowClear={this.state.selectValue}
+                >
+                    </FilterDropDown></div>
+            case 'date':
+                return <div className={`${clsPrefix} filter-wrap`}><DatePicker
+                    {...this.props}
+                    value={this.state.dateValue}
+                    onChange={this.changeDate}
+                    open={this.state.open}
+                />{filterDropdown == 'show' && <FilterDropDown
+                    onSelectDropdown={onSelectDropdown}
+                    onClickClear={this.clearDateValue}
+                    isShowCondition={filterDropdown}
+                    isShowClear={this.state.dateValue}
+                >
+                </FilterDropDown>}
+                </div>
+            case 'bool':
+                return <div className={`${clsPrefix} filter-wrap`}><Switch
                     className={className}
                     onChange={onChange}
                 />
@@ -23,21 +129,6 @@ class FilterType extends Component {
                     >
                     </FilterDropDown>}
                 </div>
-            case 'dropdown':
-                return <div className={`${clsPrefix} filter-wrap`}><Select
-                    {...this.props}
-                />{filterDropdown == 'show' && <FilterDropDown
-                    onSelectDropdown={onSelectDropdown}
-                >
-                </FilterDropDown>}</div>
-            case 'date':
-                return <div className={`${clsPrefix} filter-wrap`}><DatePicker
-                    {...this.props}
-                />{filterDropdown == 'show' && <FilterDropDown
-                    onSelectDropdown={onSelectDropdown}
-                >
-                </FilterDropDown>}
-                </div>
             default:
                 break;
         }

src/Table.js

@@ -343,6 +343,7 @@ class Table extends Component {
           filtertype: column.filterType,
           dataindex: column.dataIndex,
           datasource: this.props.data,
+          format: column.format,
           filterdropdown: column.filterDropdown
         });
       }

src/TableHeader.js

@@ -185,10 +185,10 @@ class TableHeader extends Component {
     let currentDom = document.getElementById("u-table-drag-thead-" + this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
     currentDom.style.width = newWidth + "px";
     // this.contentTableWidth = newTableWidth;
-    contentTableDom.style.width = newTableWidth+'px';
+    contentTableDom.style.width = newTableWidth + 'px';
-    this.drag.x = x; 
+    this.drag.x = x;
     let contentColDomArr = contentTableDom.querySelectorAll('colgroup col')
-    contentColDomArr[this.drag.currIndex].style.width = newWidth+"px" ;
+    contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
     //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
     const siblingDom = contentTableDom.parentNode.nextElementSibling;
     if (siblingDom) {
@@ -261,8 +261,9 @@ class TableHeader extends Component {
       case 'date':
         return <FilterType
           rendertype={type}
-          className={`${clsPrefix} filter-date`}
+          className={`filter-date`}
           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']}