diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index 1a4cf3d7d2..cf77bf0cd0 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -16,10 +16,20 @@ const columns = [{
dataIndex: 'name',
filters: [{
text: '姓李的',
- value: '李'
+ value: '李',
}, {
text: '姓胡的',
- value: '胡'
+ value: '胡',
+ }, {
+ text: '子菜单',
+ value: '子菜单',
+ children: [{
+ text: '姓陈的',
+ value: '陈',
+ }, {
+ text: '姓王的',
+ value: '王',
+ }]
}],
// 指定确定筛选的条件函数
// 这里是名字中第一个字是 value
diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx
index c656f25ebf..a4dd7dae92 100644
--- a/components/table/filterDropdown.jsx
+++ b/components/table/filterDropdown.jsx
@@ -3,12 +3,14 @@ import Menu from 'rc-menu';
import Dropdown from '../dropdown';
import Icon from '../icon';
import Checkbox from '../checkbox';
+const { SubMenu } = Menu;
let FilterMenu = React.createClass({
getInitialState() {
return {
selectedKeys: this.props.selectedKeys,
- visible: false
+ keyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
+ visible: false,
};
},
componentWillReceiveProps(nextProps){
@@ -45,15 +47,47 @@ let FilterMenu = React.createClass({
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
}
},
+ renderMenuItem(item) {
+ return
+ = 0} />
+ {item.text}
+ ;
+ },
renderMenus(items) {
- let menuItems = items.map((item) => {
- return
- = 0} />
- {item.text}
- ;
+ let menuItems = items.map(item => {
+ if (item.children && item.children.length > 0) {
+ const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
+ const containSelected = Object.keys(keyPathOfSelectedItem).some(key => {
+ const keyPath = keyPathOfSelectedItem[key];
+ if (keyPath.indexOf(item.value) >= 0) {
+ return true;
+ }
+ });
+ const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
+ return (
+
+ {item.children.map(child => this.renderMenuItem(child))}
+
+ );
+ }
+ return this.renderMenuItem(item);
});
return menuItems;
},
+ handleMenuItemClick(info) {
+ if (info.keyPath.length <= 1) {
+ return;
+ }
+ const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
+ if (this.state.selectedKeys.indexOf(info.key) >= 0) {
+ // deselect SubMenu child
+ delete keyPathOfSelectedItem[info.key];
+ } else {
+ // select SubMenu child
+ keyPathOfSelectedItem[info.key] = info.keyPath;
+ }
+ this.setState({ keyPathOfSelectedItem });
+ },
render() {
let {column, locale} = this.props;
// default multiple selection in filter dropdown
@@ -62,7 +96,7 @@ let FilterMenu = React.createClass({
multiple = column.filterMultiple;
}
let menus =
-