Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
07f0ace6
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,发现更多精彩内容 >>
提交
07f0ace6
编写于
7月 16, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix table style and local mode
上级
fb7c4db9
变更
7
显示空白变更内容
内联
并排
Showing
7 changed file
with
57 addition
and
28 deletion
+57
-28
components/table/demo/ajax.md
components/table/demo/ajax.md
+1
-1
components/table/demo/basic.md
components/table/demo/basic.md
+4
-4
components/table/demo/head.md
components/table/demo/head.md
+8
-1
components/table/demo/paging.md
components/table/demo/paging.md
+1
-1
components/table/demo/row-selection.md
components/table/demo/row-selection.md
+1
-1
components/table/index.jsx
components/table/index.jsx
+37
-18
style/components/table.less
style/components/table.less
+5
-2
未找到文件。
components/table/demo/ajax.md
浏览文件 @
07f0ace6
...
...
@@ -4,7 +4,7 @@
远程读取的表格是
**更为常见的模式**
,下面的表格使用了
`dataSource`
对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。
此示例是静态数据模拟,数据可能不准确,请打开网络面板查看请求。
**注意,此示例是静态数据模拟,数据并不准确,请打开网络面板查看请求。**
---
...
...
components/table/demo/basic.md
浏览文件 @
07f0ace6
...
...
@@ -12,7 +12,7 @@ var columns = [{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
render
:
function
(
text
)
{
return
<
a
href
=
"
#
"
>
{
text
}
</
a
>;
return
<
a
href
=
"
javascript:;
"
>
{
text
}
</
a
>;
}
},
{
title
:
'
年龄
'
,
...
...
@@ -25,11 +25,11 @@ var columns = [{
dataIndex
:
''
,
render
:
function
(
text
,
record
)
{
return
<
span
>
<
a
href
=
"
#"
>
删除
</
a
>
<
a
href
=
"
javascript:;"
>
操作一
</
a
>
<
span
className
=
"ant-divider"
>
|
</
span
>
<
a
href
=
"
#"
>
操作
</
a
>
<
a
href
=
"
javascript:;"
>
操作二
</
a
>
<
span
className
=
"ant-divider"
>
|
</
span
>
<
a
href
=
"
#
"
className
=
"ant-dropdown-link"
>
<
a
href
=
"
javascript:;
"
className
=
"ant-dropdown-link"
>
更多
<
i
className
=
"anticon anticon-down"
></
i
>
</
a
>
</
span
>;
...
...
components/table/demo/head.md
浏览文件 @
07f0ace6
...
...
@@ -24,6 +24,9 @@ var columns = [{
// 这里是名字中第一个字是 value
onFilter
:
function
(
value
,
record
)
{
return
record
.
name
.
indexOf
(
value
)
===
0
;
},
sorter
:
function
(
a
,
b
)
{
return
a
.
name
.
length
-
b
.
name
.
length
;
}
},
{
title
:
'
年龄
'
,
...
...
@@ -40,7 +43,7 @@ var columns = [{
}];
var
data
=
[{
name
:
'
胡
彦
斌
'
,
name
:
'
胡斌
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
},
{
...
...
@@ -51,6 +54,10 @@ var data = [{
name
:
'
李大嘴
'
,
age
:
32
,
address
:
'
西湖区湖底公园123号
'
},
{
name
:
'
李秀莲大嘴哥
'
,
age
:
32
,
address
:
'
西湖区湖底公园123号
'
}];
React
.
render
(<
Table
columns
=
{
columns
}
dataSource
=
{
data
}
/>
...
...
components/table/demo/paging.md
浏览文件 @
07f0ace6
...
...
@@ -13,7 +13,7 @@ var columns = [{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
render
:
function
(
text
)
{
return
<
a
href
=
"
#
"
>
{
text
}
</
a
>;
return
<
a
href
=
"
javascript:;
"
>
{
text
}
</
a
>;
}
},
{
title
:
'
年龄
'
,
...
...
components/table/demo/row-selection.md
浏览文件 @
07f0ace6
...
...
@@ -12,7 +12,7 @@ var columns = [{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
render
:
function
(
text
)
{
return
<
a
href
=
"
#
"
>
{
text
}
</
a
>;
return
<
a
href
=
"
javascript:;
"
>
{
text
}
</
a
>;
}
},
{
title
:
'
年龄
'
,
...
...
components/table/index.jsx
浏览文件 @
07f0ace6
...
...
@@ -53,6 +53,7 @@ let AntTable = React.createClass({
toggleSortOrder
(
order
,
column
)
{
let
sortColumn
=
this
.
state
.
sortColumn
;
let
sortOrder
=
this
.
state
.
sortOrder
;
let
sorter
;
// 同时允许一列进行排序,否则会导致排序顺序的逻辑问题
if
(
sortColumn
)
{
sortColumn
.
className
=
''
;
...
...
@@ -71,7 +72,7 @@ let AntTable = React.createClass({
}
}
if
(
this
.
mode
===
'
local
'
)
{
let
sorter
=
function
()
{
sorter
=
function
()
{
let
result
=
column
.
sorter
.
apply
(
this
,
arguments
);
if
(
sortOrder
===
'
ascend
'
)
{
return
result
;
...
...
@@ -79,29 +80,29 @@ let AntTable = React.createClass({
return
-
result
;
}
};
if
(
sortOrder
)
{
this
.
props
.
dataSource
=
this
.
props
.
dataSource
.
sort
(
sorter
);
}
else
{
this
.
props
.
dataSource
=
this
.
originDataSource
.
slice
();
}
}
this
.
setState
({
sortOrder
:
sortOrder
,
sortColumn
:
sortColumn
sortColumn
:
sortColumn
,
sorter
:
sorter
},
this
.
fetch
);
},
handleFilter
(
column
)
{
let
columnIndex
=
this
.
props
.
columns
.
indexOf
(
column
);
let
filterFns
=
[];
if
(
this
.
mode
===
'
local
'
)
{
this
.
props
.
dataSource
=
this
.
originDataSource
.
slice
().
filter
(
function
(
record
)
{
filterFns
[
columnIndex
]
=
function
(
record
)
{
if
(
column
.
selectedFilters
.
length
===
0
)
{
return
true
;
}
return
column
.
selectedFilters
.
some
(
function
(
value
)
{
return
column
.
onFilter
.
call
(
this
,
value
,
record
);
});
}
)
;
};
}
this
.
fetch
();
this
.
setState
({
filterFns
:
filterFns
},
this
.
fetch
);
},
handleSelect
(
rowIndex
,
e
)
{
let
checked
=
e
.
target
.
checked
;
...
...
@@ -285,15 +286,33 @@ let AntTable = React.createClass({
}
});
}
else
{
let
pageSize
=
this
.
state
.
pagination
.
pageSize
;
let
current
=
this
.
state
.
pagination
.
current
;
this
.
setState
({
data
:
this
.
props
.
dataSource
.
filter
(
function
(
item
,
i
)
{
var
data
=
this
.
props
.
dataSource
;
var
pageSize
=
this
.
state
.
pagination
.
pageSize
;
var
current
=
this
.
state
.
pagination
.
current
;
// 排序
if
(
this
.
state
.
sortOrder
&&
this
.
state
.
sorter
)
{
data
=
data
.
sort
(
this
.
state
.
sorter
);
}
else
{
data
=
this
.
originDataSource
.
slice
();
}
// 筛选
if
(
this
.
state
.
filterFns
)
{
this
.
state
.
filterFns
.
forEach
(
function
(
filterFn
)
{
if
(
typeof
filterFn
===
'
function
'
)
{
data
=
data
.
filter
(
filterFn
);
}
});
}
// 分页
data
=
data
.
filter
(
function
(
item
,
i
)
{
if
(
i
>=
(
current
-
1
)
*
pageSize
&&
i
<
current
*
pageSize
)
{
return
item
;
}
})
});
// 完成数据
this
.
setState
({
data
:
data
});
}
},
...
...
style/components/table.less
浏览文件 @
07f0ace6
...
...
@@ -22,7 +22,9 @@
transition: background .3s ease;
.anticon-bars {
margin-left: 8px;
margin-left: 4px;
position: relative;
top: -1px;
font-size: ~"10px \9"; // ie8-9
.scale(0.83);
cursor: pointer;
...
...
@@ -35,6 +37,7 @@
.@{tablePrefixClass}-filter-dropdown {
min-width: 88px;
margin-left: -8px;
.ant-dropdown-menu-item {
overflow: hidden;
padding: 7px 8px;
...
...
@@ -129,7 +132,7 @@
}
&-column-sorter {
margin-left:
8
px;
margin-left:
4
px;
display: inline-block;
width: 12px;
height: 14px;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录