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 =
- .ant-dropdown-menu > .ant-dropdown-menu-item:last-child, + > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title { + border-radius: 0; + } + &-btns { overflow: hidden; padding: 7px 15px;