Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
34f9ab05
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,发现更多精彩内容 >>
提交
34f9ab05
编写于
1月 01, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
make selected item can be controlled, #793
上级
ec4522ca
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
110 addition
and
89 deletion
+110
-89
components/table/demo/row-selection-and-operation.md
components/table/demo/row-selection-and-operation.md
+83
-0
components/table/demo/row-selection-radio-props.md
components/table/demo/row-selection-radio-props.md
+0
-62
components/table/index.jsx
components/table/index.jsx
+27
-27
未找到文件。
components/table/demo/row-selection-and-operation.md
0 → 100644
浏览文件 @
34f9ab05
# 选择和操作
-
order: 4
选择后进行操作,完成后清空选择,通过
`rowSelection.selectedRowKeys`
来控制选中项。
---
````
jsx
import
{
Table
,
Button
}
from
'
antd
'
;
const
columns
=
[{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
render
:
function
(
text
)
{
return
<
a
href
=
"#"
>
{
text
}
</
a
>;
}
},
{
title
:
'
年龄
'
,
dataIndex
:
'
age
'
},
{
title
:
'
住址
'
,
dataIndex
:
'
address
'
}];
const
data
=
[{
key
:
'
1
'
,
name
:
'
胡彦斌
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
},
{
key
:
'
2
'
,
name
:
'
胡彦祖
'
,
age
:
42
,
address
:
'
西湖区湖底公园1号
'
},
{
key
:
'
3
'
,
name
:
'
李大嘴
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
}];
const
App
=
React
.
createClass
({
getInitialState
()
{
return
{
selectedRowKeys
:
[],
loading
:
false
,
};
},
start
()
{
this
.
setState
({
loading
:
true
});
// 模拟 ajax 请求,完成后清空
setTimeout
(()
=>
{
this
.
setState
({
selectedRowKeys
:
[],
loading
:
false
,
});
},
1000
);
},
onSelectChange
(
selectedRowKeys
)
{
console
.
log
(
'
onSelectChange
'
,
selectedRowKeys
)
this
.
setState
({
selectedRowKeys
});
},
render
()
{
const
{
loading
,
selectedRowKeys
}
=
this
.
state
;
const
rowSelection
=
{
selectedRowKeys
,
onChange
:
this
.
onSelectChange
,
};
const
hasSelected
=
selectedRowKeys
.
length
>
0
;
return
<
div
>
<
div
style
=
{
{
marginBottom
:
16
}
}
>
<
Button
type
=
"primary"
onClick
=
{
this
.
start
}
disabled
=
{
!
hasSelected
}
loading
=
{
loading
}
>
操作
</
Button
>
<
span
style
=
{
{
marginLeft
:
8
}
}
>
{
hasSelected
?
`选择了
${
selectedRowKeys
.
length
}
个对象`
:
''
}
</
span
>
</
div
>
<
Table
rowSelection
=
{
rowSelection
}
columns
=
{
columns
}
dataSource
=
{
data
}
/>
</
div
>;
}
});
ReactDOM
.
render
(<
App
/>,
mountNode
);
````
components/table/demo/row-selection-radio-props.md
已删除
100644 → 0
浏览文件 @
ec4522ca
# 单选
-
order: 4
配置单选框的默认属性。
---
````
jsx
import
{
Table
}
from
'
antd
'
;
const
columns
=
[{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
render
:
function
(
text
)
{
return
<
a
href
=
"#"
>
{
text
}
</
a
>;
}
},
{
title
:
'
年龄
'
,
dataIndex
:
'
age
'
},
{
title
:
'
住址
'
,
dataIndex
:
'
address
'
}];
const
data
=
[{
id
:
'
1
'
,
name
:
'
胡彦斌
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
},
{
id
:
'
2
'
,
name
:
'
胡彦祖
'
,
age
:
42
,
address
:
'
西湖区湖底公园1号
'
},
{
id
:
'
3
'
,
name
:
'
李大嘴
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
}];
// 通过 rowSelection 对象表明需要行选择
const
rowSelection
=
{
type
:
'
radio
'
,
getCheckboxProps
:
function
(
record
)
{
return
{
defaultChecked
:
record
.
name
===
'
李大嘴
'
,
// 配置默认勾选的列
disabled
:
record
.
name
===
'
胡彦祖
'
// 配置无法勾选的列
};
},
onSelect
:
function
(
record
,
selected
,
selectedRows
)
{
console
.
log
(
record
,
selected
,
selectedRows
);
},
};
function
rowKey
(
record
)
{
return
record
.
id
;
}
ReactDOM
.
render
(<
Table
rowSelection
=
{
rowSelection
}
rowKey
=
{
rowKey
}
columns
=
{
columns
}
dataSource
=
{
data
}
/>
,
mountNode
);
````
components/table/index.jsx
浏览文件 @
34f9ab05
...
...
@@ -23,7 +23,7 @@ let AntTable = React.createClass({
getInitialState
()
{
return
{
// 减少状态
selectedRowKeys
:
[],
selectedRowKeys
:
this
.
props
.
selectedRowKeys
||
[],
filters
:
{},
selectionDirty
:
false
,
sortColumn
:
''
,
...
...
@@ -81,16 +81,29 @@ let AntTable = React.createClass({
pagination
:
objectAssign
({},
this
.
state
.
pagination
,
nextProps
.
pagination
)
});
}
//
外界只有 dataSource 的变化会触发新请求
//
dataSource 的变化会清空选中项
if
(
'
dataSource
'
in
nextProps
&&
nextProps
.
dataSource
!==
this
.
props
.
dataSource
)
{
this
.
setState
({
selectionDirty
:
false
,
selectedRowKeys
:
[],
});
if
(
this
.
props
.
rowSelection
&&
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
([]);
}
this
.
setSelectedRowKeys
([]);
}
if
(
nextProps
.
rowSelection
&&
'
selectedRowKeys
'
in
nextProps
.
rowSelection
)
{
this
.
setState
({
selectedRowKeys
:
nextProps
.
rowSelection
.
selectedRowKeys
||
[],
});
}
},
setSelectedRowKeys
(
selectedRowKeys
)
{
if
(
this
.
props
.
rowSelection
&&
!
(
'
selectedRowKeys
'
in
this
.
props
.
rowSelection
))
{
this
.
setState
({
selectedRowKeys
});
}
if
(
this
.
props
.
rowSelection
&&
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
(
selectedRowKeys
);
}
},
...
...
@@ -146,11 +159,11 @@ let AntTable = React.createClass({
}
});
const
newState
=
{
selectedRowKeys
:
[],
selectionDirty
:
false
,
filters
};
this
.
setState
(
newState
);
this
.
setSelectedRowKeys
([]);
this
.
props
.
onChange
.
apply
(
this
,
this
.
prepareParamsArguments
(
objectAssign
({},
this
.
state
,
newState
)));
},
...
...
@@ -167,9 +180,9 @@ let AntTable = React.createClass({
});
}
this
.
setState
({
selectedRowKeys
,
selectionDirty
:
true
selectionDirty
:
true
,
});
this
.
setSelectedRowKeys
(
selectedRowKeys
);
if
(
this
.
props
.
rowSelection
.
onSelect
)
{
let
data
=
this
.
getCurrentPageData
();
let
selectedRows
=
data
.
filter
((
row
,
i
)
=>
{
...
...
@@ -177,9 +190,6 @@ let AntTable = React.createClass({
});
this
.
props
.
rowSelection
.
onSelect
(
record
,
checked
,
selectedRows
);
}
if
(
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
(
selectedRowKeys
);
}
},
handleRadioSelect
:
function
(
record
,
rowIndex
,
e
)
{
...
...
@@ -189,10 +199,10 @@ let AntTable = React.createClass({
let
key
=
this
.
getRecordKey
(
record
,
rowIndex
);
selectedRowKeys
=
[
key
];
this
.
setState
({
selectedRowKeys
,
radioIndex
:
key
,
selectionDirty
:
true
selectionDirty
:
true
,
});
this
.
setSelectedRowKeys
(
selectedRowKeys
);
if
(
this
.
props
.
rowSelection
.
onSelect
)
{
let
data
=
this
.
getCurrentPageData
();
let
selectedRows
=
data
.
filter
((
row
,
i
)
=>
{
...
...
@@ -200,9 +210,6 @@ let AntTable = React.createClass({
});
this
.
props
.
rowSelection
.
onSelect
(
record
,
checked
,
selectedRows
);
}
if
(
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
(
selectedRowKeys
);
}
},
handleSelectAllRow
(
e
)
{
...
...
@@ -228,18 +235,15 @@ let AntTable = React.createClass({
});
}
this
.
setState
({
selectedRowKeys
,
selectionDirty
:
true
selectionDirty
:
true
,
});
this
.
setSelectedRowKeys
(
selectedRowKeys
);
if
(
this
.
props
.
rowSelection
.
onSelectAll
)
{
let
selectedRows
=
data
.
filter
((
row
,
i
)
=>
{
return
selectedRowKeys
.
indexOf
(
this
.
getRecordKey
(
row
,
i
))
>=
0
;
});
this
.
props
.
rowSelection
.
onSelectAll
(
checked
,
selectedRows
);
}
if
(
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
(
selectedRowKeys
);
}
},
handlePageChange
(
current
)
{
...
...
@@ -250,15 +254,11 @@ let AntTable = React.createClass({
pagination
.
current
=
pagination
.
current
||
1
;
}
const
newState
=
{
// 防止内存泄漏,只维持当页
selectedRowKeys
:
[],
selectionDirty
:
false
,
pagination
};
this
.
setState
(
newState
);
if
(
this
.
props
.
rowSelection
&&
this
.
props
.
rowSelection
.
onChange
)
{
this
.
props
.
rowSelection
.
onChange
([]);
}
this
.
setSelectedRowKeys
([]);
this
.
props
.
onChange
.
apply
(
this
,
this
.
prepareParamsArguments
(
objectAssign
({},
this
.
state
,
newState
)));
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录