improve filter

components/table/demo/filter.md

@@ -23,9 +23,9 @@ var columns = [{
       value: 'value2'
     }];
   },
-  onFilter: function(key) {
-    console.log(key);
-    this.fetch(this.props.dataSource + '?age=' + key);
+  onFilter: function(filters) {
+    console.log(filters);
+    this.fetch(this.props.dataSource + '?age=' + filters.join(','));
   }
 }, {
   title: '地址',

components/table/index.jsx

@@ -11,6 +11,7 @@ let AntTable = React.createClass({
     return {
       selectedRowKeys: [],
       loading: false,
+      filters: [],
       data: []
     };
   },
@@ -24,9 +25,7 @@ let AntTable = React.createClass({
   },
   renderMenus(items) {
     let menuItems = items.map((item) => {
-      return <Menu.Item key={item.value}>
-        {item.text}
-      </Menu.Item>;
+      return <Menu.Item key={item.value}>{item.text}</Menu.Item>;
     });
     return menuItems;
   },
@@ -40,9 +39,21 @@ let AntTable = React.createClass({
       column.sorter.call(this, column.sortOrder);
     }
   },
-  onSelectFilter() {
+  handleFilter(column) {
+    if (column.onFilter) {
+      column.onFilter.call(this, column.filters);
+    }
+  },
+  handleSelectFilter(column, selected) {
+    column.filters = column.filters || [];
+    column.filters.push(selected);
   },
-  onDeselectFilter() {
+  handleDeselectFilter(column, key) {
+    column.filters = column.filters || [];
+    var index = column.filters.indexOf(key);
+    if (index !== -1) {
+      column.filters.splice(index, 1);
+    }
   },
   renderColumnsDropdown() {
     this.props.columns = this.props.columns.map((column) => {
@@ -51,14 +62,30 @@ let AntTable = React.createClass({
       }
       let filterDropdown, menus, sortButton;
       if (column.filter) {
-        menus = <Menu multiple={true} onSelect={this.onSelectFilter} onDeselect={this.onDeselectFilter}>
+        menus = <Menu multiple={true}
+          className="ant-table-filter-dropdown"
+          onSelect={this.handleSelectFilter.bind(this, column)}
+          onDeselect={this.handleDeselectFilter.bind(this, column)}>
           {this.renderMenus(column.filter())}
-          <button className="ant-btn ant-btn-primary ant-btn-sm" onClick={column.onFilter.bind(this)}>
-            确 定
-          </button>
+          <Menu.Item disabled>
+            <button style={{
+                cursor: 'pointer',
+                pointerEvents: 'visible'
+              }}
+              className="ant-btn ant-btn-primary ant-btn-sm"
+              onClick={this.handleFilter.bind(this, column)}>
+              确 定
+            </button>
+          </Menu.Item>
         </Menu>;
-        filterDropdown = <Dropdown trigger="click" closeOnSelect={false} overlay={menus}>
-          <i className="anticon anticon-bars"></i>
+        let dropdownSelectedClass = '';
+        if (column.filters && column.filters.length > 0) {
+          dropdownSelectedClass = 'ant-table-filter-selected';
+        }
+        filterDropdown = <Dropdown trigger="click"
+          closeOnSelect={false}
+          overlay={menus}>
+          <i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
         </Dropdown>;
       }
       if (column.sorter) {

style/components/dropdown.less

@@ -65,6 +65,7 @@
       font-weight: normal;
       color: #666;
       white-space: nowrap;
+      cursor: pointer;
 
       a {
         color: #666;
@@ -103,6 +104,20 @@
         background-color: #e5e5e5;
         line-height: 0;
       }
+
+      &-selected {
+        background-color: tint(@primary-color, 90%);
+        position: relative;
+        &:after {
+          content: '\e613';
+          font-family: 'anticon';
+          font-weight: bold;
+          position: absolute;
+          top: 6px;
+          right: 16px;
+          color: @primary-color;
+        }
+      }
     }
   }
 }

style/components/select.less

@@ -249,7 +249,7 @@
       cursor: pointer;
 
       &:hover, &-active, &-selected {
-        background-color: rgba(142, 200, 249, 0.1) !important;
+        background-color: tint(@primary-color, 90%) !important;
       }
 
       &-selected {

style/components/table.less

@@ -31,6 +31,14 @@
         color: #666;
       }
     }
+
+   .@{tablePrefixClass}-filter-dropdown {
+      min-width: 88px;
+    }
+
+    .@{tablePrefixClass}-filter-selected.anticon-bars {
+      color: @primary-color;
+    }
   }
 
   td {
@@ -61,6 +69,7 @@
       background: #fff;
       border-bottom: 1px solid #e9e9e9;
     }
+
     td {
       padding: 6px 8px;
     }