Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
b4e98f2f
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,发现更多精彩内容 >>
提交
b4e98f2f
编写于
9月 10, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of github.com:ant-design/ant-design
上级
3af86e42
70460443
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
79 addition
and
8 deletion
+79
-8
CHANGELOG.md
CHANGELOG.md
+1
-0
components/table/demo/ajax.md
components/table/demo/ajax.md
+1
-1
components/table/demo/bordered.md
components/table/demo/bordered.md
+1
-1
components/table/demo/expand.md
components/table/demo/expand.md
+39
-0
components/table/demo/local-data.md
components/table/demo/local-data.md
+1
-1
components/table/demo/nopagination.md
components/table/demo/nopagination.md
+1
-1
components/table/demo/small.md
components/table/demo/small.md
+1
-1
components/table/index.jsx
components/table/index.jsx
+2
-0
components/table/index.md
components/table/index.md
+2
-1
package.json
package.json
+1
-1
style/components/table.less
style/components/table.less
+29
-1
未找到文件。
CHANGELOG.md
浏览文件 @
b4e98f2f
...
...
@@ -18,6 +18,7 @@
### Table
*
新增可展开的 table。
[
#258
](
https://github.com/ant-design/ant-design/pull/258
)
*
新增无数据的展示样式。
[
4c54644
](
https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5
)
*
修复本地模式
`dataSource`
无法更新的问题。
[
6d2dcc4
](
https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f
)
*
修复远程模式 loading 失效的问题。
[
9b8abb2
](
https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf
)
...
...
components/table/demo/ajax.md
浏览文件 @
b4e98f2f
# 动态加载数据
-
order:
7
-
order:
4
远程读取的表格是
**更为常见的模式**
,下面的表格使用了
`dataSource`
对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。
...
...
components/table/demo/bordered.md
浏览文件 @
b4e98f2f
# 边框
-
order:
11
-
order:
7
添加表格边框线,
`bordered={true}`
。
...
...
components/table/demo/expand.md
0 → 100644
浏览文件 @
b4e98f2f
# 可展开
-
order: 9
当表格内容较多不能一次性完全展示时。
---
````
jsx
var
Table
=
antd
.
Table
;
function
renderAction
()
{
return
<
a
href
=
"javascript:;"
>
删除
</
a
>;
}
function
expandedRowRender
(
record
)
{
return
<
p
>
{
record
.
description
}
</
p
>;
}
var
columns
=
[
{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
key
:
'
name
'
},
{
title
:
'
年龄
'
,
dataIndex
:
'
age
'
,
key
:
'
age
'
},
{
title
:
'
住址
'
,
dataIndex
:
'
address
'
,
key
:
'
address
'
},
{
title
:
'
操作
'
,
dataIndex
:
''
,
key
:
'
x
'
,
render
:
renderAction
}
];
var
data
=
[
{
name
:
'
胡彦斌
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
,
description
:
'
我是胡彦斌,今年32岁,住在西湖区湖底公园1号。
'
},
{
name
:
'
吴彦祖
'
,
age
:
42
,
address
:
'
西湖区湖底公园2号
'
,
description
:
'
我是吴彦祖,今年42岁,住在西湖区湖底公园2号。
'
},
{
name
:
'
李大嘴
'
,
age
:
32
,
address
:
'
西湖区湖底公园3号
'
,
description
:
'
我是李大嘴,今年32岁,住在西湖区湖底公园3号。
'
}
];
React
.
render
(
<
Table
columns
=
{
columns
}
expandedRowRender
=
{
expandedRowRender
}
dataSource
=
{
data
}
className
=
"table"
/>
,
document
.
getElementById
(
'
components-table-demo-expand
'
));
````
components/table/demo/local-data.md
浏览文件 @
b4e98f2f
# 外界控制数据
-
order:
11
-
order:
8
由父元素控制自身数据展示。
...
...
components/table/demo/nopagination.md
浏览文件 @
b4e98f2f
# 不显示分页
-
order:
9
-
order:
5
传入 pagination 为 false 即可。
...
...
components/table/demo/small.md
浏览文件 @
b4e98f2f
# 小型列表
-
order:
10
-
order:
6
`size="small"`
, 用在对话框等空间较小的地方。
...
...
components/table/index.jsx
浏览文件 @
b4e98f2f
...
...
@@ -457,6 +457,7 @@ let AntTable = React.createClass({
let
data
=
this
.
getCurrentPageData
();
let
columns
=
this
.
renderRowSelection
();
let
classString
=
''
;
let
expandIconAsCell
=
this
.
props
.
expandedRowRender
&&
this
.
props
.
expandIconAsCell
!==
false
;
if
(
this
.
state
.
loading
&&
!
this
.
isLocalDataSource
())
{
classString
+=
'
ant-table-loading
'
;
}
...
...
@@ -483,6 +484,7 @@ let AntTable = React.createClass({
data
=
{
data
}
columns
=
{
columns
}
className
=
{
classString
}
expandIconAsCell
=
{
expandIconAsCell
}
/>
{
emptyText
}
{
this
.
renderPagination
()
}
...
...
components/table/index.md
浏览文件 @
b4e98f2f
...
...
@@ -63,10 +63,11 @@ var dataSource = new Table.DataSource({
|---------------|--------------------------|-----------------|---------------------|---------|
| rowSelection | 列表项是否可选择 | Object | | false |
| pagination | 分页器 | Object | 配置项参考
[
pagination
](
/components/pagination
)
,设为 false 时不显示分页 | |
| size | 正常或迷你类型 |
s
tring |
`normal`
or
`small`
| normal |
| size | 正常或迷你类型 |
S
tring |
`normal`
or
`small`
| normal |
| dataSource | 数据源,可以为数组(本地模式)或一个数据源描述对象(远程模式) | Array or Object | | |
| columns | 表格列的配置描述,具体项见下表 | Array | | 无 |
| rowKey | 表格列 key 的取值 | Function(recode,index):string | | record.key |
| expandIconAsCell | 设置展开 Icon 是否单独一列 | Boolean | | true |
### Column
...
...
package.json
浏览文件 @
b4e98f2f
...
...
@@ -54,7 +54,7 @@
"
rc-slider
"
:
"
~1.4.0
"
,
"
rc-steps
"
:
"
~1.2.3
"
,
"
rc-switch
"
:
"
~1.2.0
"
,
"
rc-table
"
:
"
~3.
1
.0
"
,
"
rc-table
"
:
"
~3.
2
.0
"
,
"
rc-tabs
"
:
"
~5.3.2
"
,
"
rc-tooltip
"
:
"
~2.6.4
"
,
"
rc-tree
"
:
"
~0.15.4
"
,
...
...
style/components/table.less
浏览文件 @
b4e98f2f
@import "../mixins/index";
@table-prefix-cls: ~"@{css-prefix}table";
@table-border-color: #e9e9e9;
@table-head-background-color: #f3f3f3;
...
...
@@ -84,7 +85,7 @@
position: absolute;
display: inline-block;
.animation(loadingCircle 1.5s infinite linear);
content:"\e610";
content:
"\e610";
top: 50%;
left: 50%;
margin-top: -10px;
...
...
@@ -229,3 +230,30 @@
}
}
}
.@{table-prefix-cls} {
&-row, &-expanded-row {
&-expand-icon {
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
line-height: 16px;
border: 1px solid #E9E9E9;
-webkit-user-select: none;
user-select: none;
&-cell {
width: 18px;
}
}
&-expanded:after {
content: '-'
}
&-collapsed:after {
content: '+'
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录