Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
4d2119c3
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,发现更多精彩内容 >>
提交
4d2119c3
编写于
7月 14, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
prepare getParams arguments, filters, pagination, sorters
上级
ad046493
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
44 addition
and
13 deletion
+44
-13
components/table/demo/ajax.md
components/table/demo/ajax.md
+16
-3
components/table/index.jsx
components/table/index.jsx
+28
-10
未找到文件。
components/table/demo/ajax.md
浏览文件 @
4d2119c3
...
...
@@ -2,7 +2,7 @@
-
order: 7
`dataSource="/api/data.json"`
,列表数据是远程读取的,并有
loading 效果。
远程读取的表格是
**更为常见的模式**
,下面的表格使用了
`dataSource`
对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面
loading 效果。
---
...
...
@@ -10,10 +10,18 @@
var
Table
=
antd
.
Table
;
var
columns
=
[{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
dataIndex
:
'
name
'
,
filters
:
[{
text
:
'
姓李的
'
,
value
:
'
李
'
},
{
text
:
'
姓胡的
'
,
value
:
'
胡
'
}]
},
{
title
:
'
年龄
'
,
dataIndex
:
'
age
'
dataIndex
:
'
age
'
,
sorter
:
true
},
{
title
:
'
住址
'
,
dataIndex
:
'
address
'
...
...
@@ -34,6 +42,11 @@ var dataSource = {
total
:
result
.
totalCount
,
pageSize
:
result
.
pageSize
}
},
getParams
:
function
(
pagination
,
filters
,
sorters
)
{
let
params
=
{};
console
.
log
(
pagination
,
filters
,
sorters
);
return
params
;
}
};
...
...
components/table/index.jsx
浏览文件 @
4d2119c3
...
...
@@ -40,7 +40,6 @@ let AntTable = React.createClass({
return
{
selectedRowKeys
:
[],
loading
:
false
,
selectedFilters
:
[],
pagination
:
pagination
,
data
:
[]
};
...
...
@@ -83,15 +82,16 @@ let AntTable = React.createClass({
this
.
fetch
();
},
handleFilter
(
column
)
{
if
(
this
.
mode
===
'
local
'
)
{
this
.
props
.
dataSource
=
this
.
originDataSource
.
slice
().
filter
(
function
(
record
)
{
if
(
column
.
selectedFilters
.
length
===
0
)
{
return
true
;
}
return
column
.
selectedFilters
.
some
(
function
(
value
)
{
var
result
=
column
.
onFilter
.
call
(
this
,
value
,
record
);
return
result
;
return
column
.
onFilter
.
call
(
this
,
value
,
record
);
});
});
}
this
.
fetch
();
},
handleSelectFilter
(
column
,
selected
)
{
...
...
@@ -231,6 +231,24 @@ let AntTable = React.createClass({
onChange
=
{
this
.
handlePageChange
}
{
...
this
.
state
.
pagination
}
/>;
},
prepareParamsArguments
()
{
// 准备筛选、排序、分页的参数
let
pagination
;
let
filters
=
{};
let
sorters
=
{};
pagination
=
this
.
state
.
pagination
;
this
.
props
.
columns
.
forEach
(
function
(
column
)
{
if
(
column
.
dataIndex
&&
column
.
selectedFilters
&&
column
.
selectedFilters
.
length
>
0
)
{
filters
[
column
.
dataIndex
]
=
column
.
selectedFilters
;
}
if
(
column
.
dataIndex
&&
column
.
sorter
&&
column
.
sortOrder
)
{
sorters
[
column
.
dataIndex
]
=
column
.
sortOrder
;
}
});
return
[
pagination
,
filters
,
sorters
];
},
fetch
:
function
()
{
let
dataSource
=
this
.
props
.
dataSource
;
if
(
this
.
mode
===
'
remote
'
)
{
...
...
@@ -239,7 +257,7 @@ let AntTable = React.createClass({
});
jQuery
.
ajax
({
url
:
dataSource
.
url
,
params
:
dataSource
.
getParams
(
),
params
:
dataSource
.
getParams
.
apply
(
this
,
this
.
prepareParamsArguments
()
),
success
:
(
result
)
=>
{
if
(
this
.
isMounted
())
{
let
pagination
=
jQuery
.
extend
(
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录