Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
a222b389
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a222b389
编写于
1月 10, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
support submenu in table filter menu, ref #708
上级
27a77303
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
71 addition
and
10 deletion
+71
-10
components/table/demo/head.md
components/table/demo/head.md
+12
-2
components/table/filterDropdown.jsx
components/table/filterDropdown.jsx
+41
-7
style/components/table.less
style/components/table.less
+18
-1
未找到文件。
components/table/demo/head.md
浏览文件 @
a222b389
...
...
@@ -16,10 +16,20 @@ const columns = [{
dataIndex
:
'
name
'
,
filters
:
[{
text
:
'
姓李的
'
,
value
:
'
李
'
value
:
'
李
'
,
},
{
text
:
'
姓胡的
'
,
value
:
'
胡
'
value
:
'
胡
'
,
},
{
text
:
'
子菜单
'
,
value
:
'
子菜单
'
,
children
:
[{
text
:
'
姓陈的
'
,
value
:
'
陈
'
,
},
{
text
:
'
姓王的
'
,
value
:
'
王
'
,
}]
}],
// 指定确定筛选的条件函数
// 这里是名字中第一个字是 value
...
...
components/table/filterDropdown.jsx
浏览文件 @
a222b389
...
...
@@ -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
<
Menu
.
Item
key
=
{
item
.
value
}
>
<
Checkbox
checked
=
{
this
.
state
.
selectedKeys
.
indexOf
(
item
.
value
)
>=
0
}
/>
{
item
.
text
}
</
Menu
.
Item
>;
},
renderMenus
(
items
)
{
let
menuItems
=
items
.
map
((
item
)
=>
{
return
<
Menu
.
Item
key
=
{
item
.
value
}
>
<
Checkbox
checked
=
{
this
.
state
.
selectedKeys
.
indexOf
(
item
.
value
)
>=
0
}
/>
{
item
.
text
}
</
Menu
.
Item
>;
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
(
<
SubMenu
title
=
{
item
.
text
}
className
=
{
subMenuCls
}
key
=
{
item
.
value
}
>
{
item
.
children
.
map
(
child
=>
this
.
renderMenuItem
(
child
))
}
</
SubMenu
>
);
}
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
=
<
div
className
=
"ant-table-filter-dropdown"
>
<
Menu
multiple
=
{
multiple
}
<
Menu
multiple
=
{
multiple
}
onClick
=
{
this
.
handleMenuItemClick
}
prefixCls
=
"ant-dropdown-menu"
onSelect
=
{
this
.
setSelectedKeys
}
onDeselect
=
{
this
.
setSelectedKeys
}
...
...
style/components/table.less
浏览文件 @
a222b389
...
...
@@ -227,16 +227,33 @@
.ant-dropdown-menu {
max-height: 220px;
overflow: auto;
border: 0;
box-shadow: none;
border-radius: @border-radius-base @border-radius-base 0 0;
&-sub {
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
box-shadow: @box-shadow-base;
}
.ant-dropdown-submenu-contain-selected {
.ant-dropdown-menu-submenu-title:after {
color: @primary-color;
font-weight: bold;
}
}
}
.ant-dropdown-menu-item {
overflow: hidden;
}
> .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;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录