Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
d8433790
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,发现更多精彩内容 >>
提交
d8433790
编写于
7月 13, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
finish sort function
上级
01483740
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
179 addition
and
36 deletion
+179
-36
components/table/demo/ajax.md
components/table/demo/ajax.md
+0
-1
components/table/demo/filter.md
components/table/demo/filter.md
+41
-0
components/table/demo/sort.md
components/table/demo/sort.md
+26
-30
components/table/index.jsx
components/table/index.jsx
+63
-5
style/components/table.less
style/components/table.less
+49
-0
未找到文件。
components/table/demo/ajax.md
浏览文件 @
d8433790
...
@@ -20,7 +20,6 @@ var columns = [{
...
@@ -20,7 +20,6 @@ var columns = [{
}];
}];
function
resolve
(
result
)
{
function
resolve
(
result
)
{
console
.
log
(
this
.
loadData
);
return
result
.
data
;
return
result
.
data
;
}
}
...
...
components/table/demo/filter.md
0 → 100644
浏览文件 @
d8433790
# 筛选
-
order: 6
对某一列数据进行筛选。
---
````
jsx
var
Table
=
antd
.
Table
;
var
columns
=
[{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
},
{
title
:
'
年龄
'
,
dataIndex
:
'
age
'
,
filter
:
function
()
{
return
[{
text
:
'
选项一
'
,
value
:
'
value1
'
},
{
text
:
'
选项二
'
,
value
:
'
value2
'
}];
},
onFilter
:
function
(
key
)
{
console
.
log
(
key
);
this
.
fetch
(
this
.
props
.
dataSource
+
'
?age=
'
+
key
);
}
},
{
title
:
'
地址
'
,
dataIndex
:
'
address
'
}];
function
resolve
(
result
)
{
return
result
.
data
;
}
React
.
render
(<
Table
columns
=
{
columns
}
dataSource
=
"/components/table/demo/data.json"
resolve
=
{
resolve
}
/>
,
document
.
getElementById
(
'
components-table-demo-filter
'
));
````
components/table/demo/sort.md
浏览文件 @
d8433790
# 排序
和筛选
# 排序
-
order: 5
-
order: 5
按某一列对列表进行排序和筛选。
对某一列数据进行排序,通过指定列的
`sorter`
函数即可启动排序按钮。支持前台排序和后台排序,后台排序会发送请求。
`sorter: function(order) { ... }`
, order 为排序方向:升序
`ascend`
、降序
`descend`
或空字符串。
---
---
````
jsx
````
jsx
var
Table
=
antd
.
Table
;
var
Table
=
antd
.
Table
;
var
columns
=
[{
var
columns
=
[{
title
:
'
姓名
'
,
title
:
'
姓名(后端排序)
'
,
dataIndex
:
'
name
'
dataIndex
:
'
name
'
,
sorter
:
function
(
order
)
{
this
.
fetch
(
this
.
props
.
dataSource
+
(
order
&&
'
?sort=name&order=
'
+
order
));
}
},
{
},
{
title
:
'
年龄
'
,
title
:
'
年龄
(前端排序)
'
,
dataIndex
:
'
age
'
,
dataIndex
:
'
age
'
,
filter
:
function
()
{
sorter
:
function
(
order
)
{
return
[{
if
(
!
order
)
{
text
:
'
选项一
'
return
;
value
:
'
value1
'
}
},
{
this
.
state
.
data
=
this
.
state
.
data
.
sort
(
function
(
a
,
b
)
{
text
:
'
选项二
'
return
(
order
===
'
ascend
'
)
?
value
:
'
value2
'
(
a
.
age
-
b
.
age
)
:
(
b
.
age
-
a
.
age
);
}];
});
},
this
.
setState
({
onFilter
:
function
(
item
)
{
data
:
this
.
state
.
data
this
.
props
.
dataSource
+=
'
?age=
'
+
item
.
value
;
});
this
.
loadData
();
},
onSorter
:
function
(
a
,
b
)
{
return
a
>
b
;
}
}
},
{
},
{
title
:
'
地址
'
,
title
:
'
地址
'
,
dataIndex
:
'
address
'
dataIndex
:
'
address
'
}];
}];
var
data
=
[{
name
:
'
胡彦斌
'
,
age
:
32
,
address
:
'
西湖区湖底公园1号
'
},
{
name
:
'
胡彦祖
'
,
age
:
42
,
address
:
'
西湖区湖底公园1号
'
}];
React
.
render
(<
Table
columns
=
{
columns
}
data
=
{
data
}
/>
function
resolve
(
result
)
{
return
result
.
data
;
}
React
.
render
(<
Table
columns
=
{
columns
}
dataSource
=
"/components/table/demo/data.json"
resolve
=
{
resolve
}
/>
,
document
.
getElementById
(
'
components-table-demo-sort
'
));
,
document
.
getElementById
(
'
components-table-demo-sort
'
));
````
````
components/table/index.jsx
浏览文件 @
d8433790
...
@@ -3,6 +3,8 @@
...
@@ -3,6 +3,8 @@
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
jQuery
from
'
jquery
'
;
import
jQuery
from
'
jquery
'
;
import
Table
from
'
rc-table
'
;
import
Table
from
'
rc-table
'
;
import
Menu
from
'
rc-menu
'
;
import
Dropdown
from
'
../dropdown
'
;
let
AntTable
=
React
.
createClass
({
let
AntTable
=
React
.
createClass
({
getInitialState
()
{
getInitialState
()
{
...
@@ -20,6 +22,61 @@ let AntTable = React.createClass({
...
@@ -20,6 +22,61 @@ let AntTable = React.createClass({
size
:
'
normal
'
size
:
'
normal
'
};
};
},
},
renderMenus
(
items
)
{
let
menuItems
=
items
.
map
((
item
)
=>
{
return
<
Menu
.
Item
key
=
{
item
.
value
}
>
{
item
.
text
}
</
Menu
.
Item
>;
});
return
menuItems
;
},
toggleSortOrder
(
order
,
column
)
{
if
(
column
.
sortOrder
===
order
)
{
column
.
sortOrder
=
''
;
}
else
{
column
.
sortOrder
=
order
;
}
if
(
column
.
sorter
)
{
column
.
sorter
.
call
(
this
,
column
.
sortOrder
);
}
},
renderColumnsDropdown
()
{
this
.
props
.
columns
.
forEach
((
column
)
=>
{
if
(
!
column
.
originTitle
)
{
column
.
originTitle
=
column
.
title
;
}
let
filterDropdown
,
menus
,
sortButton
;
if
(
column
.
filter
)
{
menus
=
<
Menu
multiple
=
{
true
}
onSelect
=
{
column
.
onFilter
.
bind
(
this
)
}
>
{
this
.
renderMenus
(
column
.
filter
())
}
</
Menu
>;
filterDropdown
=
<
Dropdown
trigger
=
"click"
closeOnSelect
=
{
false
}
overlay
=
{
menus
}
>
<
i
className
=
"anticon anticon-bars"
></
i
>
</
Dropdown
>;
}
if
(
column
.
sorter
)
{
sortButton
=
<
div
className
=
"ant-table-column-sorter"
>
<
span
className
=
{
'
ant-table-column-sorter-up
'
+
(
column
.
sortOrder
===
'
ascend
'
?
'
on
'
:
'
off
'
)
}
title
=
"升序排序"
onClick
=
{
this
.
toggleSortOrder
.
bind
(
this
,
'
ascend
'
,
column
)
}
>
<
i
className
=
"anticon anticon-caret-up"
></
i
>
</
span
>
<
span
className
=
{
'
ant-table-column-sorter-down
'
+
(
column
.
sortOrder
===
'
descend
'
?
'
on
'
:
'
off
'
)
}
title
=
"降序排序"
onClick
=
{
this
.
toggleSortOrder
.
bind
(
this
,
'
descend
'
,
column
)
}
>
<
i
className
=
"anticon anticon-caret-down"
></
i
>
</
span
>
</
div
>;
}
column
.
title
=
[
column
.
originTitle
,
sortButton
,
filterDropdown
];
});
},
handleSelect
(
e
)
{
handleSelect
(
e
)
{
let
checked
=
e
.
currentTarget
.
checked
;
let
checked
=
e
.
currentTarget
.
checked
;
let
currentRowIndex
=
e
.
currentTarget
.
parentElement
.
parentElement
.
rowIndex
;
let
currentRowIndex
=
e
.
currentTarget
.
parentElement
.
parentElement
.
rowIndex
;
...
@@ -54,16 +111,17 @@ let AntTable = React.createClass({
...
@@ -54,16 +111,17 @@ let AntTable = React.createClass({
let
checkbox
=
<
input
type
=
"checkbox"
checked
=
{
checked
}
onChange
=
{
this
.
handleSelect
}
/>;
let
checkbox
=
<
input
type
=
"checkbox"
checked
=
{
checked
}
onChange
=
{
this
.
handleSelect
}
/>;
return
checkbox
;
return
checkbox
;
},
},
loadData
:
function
(
)
{
fetch
:
function
(
url
)
{
this
.
props
.
resolve
=
this
.
props
.
resolve
||
function
(
data
)
{
this
.
props
.
resolve
=
this
.
props
.
resolve
||
function
(
data
)
{
return
data
||
[];
return
data
||
[];
};
};
if
(
this
.
props
.
dataSource
)
{
let
dataSource
=
url
||
this
.
props
.
dataSource
;
if
(
dataSource
)
{
this
.
setState
({
this
.
setState
({
loading
:
true
loading
:
true
});
});
jQuery
.
ajax
({
jQuery
.
ajax
({
url
:
this
.
props
.
dataSource
,
url
:
dataSource
,
success
:
(
result
)
=>
{
success
:
(
result
)
=>
{
result
=
this
.
props
.
resolve
.
call
(
this
,
result
);
result
=
this
.
props
.
resolve
.
call
(
this
,
result
);
if
(
this
.
isMounted
())
{
if
(
this
.
isMounted
())
{
...
@@ -81,7 +139,7 @@ let AntTable = React.createClass({
...
@@ -81,7 +139,7 @@ let AntTable = React.createClass({
}
}
},
},
componentDidMount
()
{
componentDidMount
()
{
this
.
loadData
();
this
.
fetch
();
},
},
render
()
{
render
()
{
if
(
this
.
props
.
rowSelection
)
{
if
(
this
.
props
.
rowSelection
)
{
...
@@ -109,7 +167,7 @@ let AntTable = React.createClass({
...
@@ -109,7 +167,7 @@ let AntTable = React.createClass({
if
(
this
.
props
.
size
===
'
small
'
)
{
if
(
this
.
props
.
size
===
'
small
'
)
{
classString
+=
'
ant-table-small
'
;
classString
+=
'
ant-table-small
'
;
}
}
// 'message message-important message-read'
this
.
renderColumnsDropdown
();
return
<
Table
data
=
{
this
.
state
.
data
}
return
<
Table
data
=
{
this
.
state
.
data
}
className
=
{
classString
}
className
=
{
classString
}
{
...
this
.
props
}
/>;
{
...
this
.
props
}
/>;
...
...
style/components/table.less
浏览文件 @
d8433790
...
@@ -19,6 +19,18 @@
...
@@ -19,6 +19,18 @@
background: @table-head-background-color;
background: @table-head-background-color;
text-align: left;
text-align: left;
font-weight: bold;
font-weight: bold;
.anticon-bars {
margin-left: 8px;
font-size: ~"10px \9"; // ie8-9
.scale(0.83);
cursor: pointer;
color: #aaa;
transition: all 0.3s ease;
&:hover {
color: #666;
}
}
}
}
td {
td {
...
@@ -57,4 +69,41 @@
...
@@ -57,4 +69,41 @@
border-bottom: 0;
border-bottom: 0;
}
}
}
}
&-column-sorter {
margin-left: 8px;
display: inline-block;
width: 12px;
height: 14px;
vertical-align: middle;
text-align: center;
cursor: pointer;
&-up,
&-down {
line-height: 6px;
height: 6px;
display: block;
width: 12px;
&.on {
.anticon-caret-up,
.anticon-caret-down {
color: @primary-color;
}
}
}
.anticon-caret-up,
.anticon-caret-down {
font-size: ~"6px \9"; // ie8-9
.scale(0.5);
line-height: 6px;
height: 6px;
color: #aaa;
&:hover {
color: #666;
}
&:before {
-moz-transform-origin: 53% 50%; /* fix firefox position */
}
}
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录