如何使用
Table 有两种模式，本地数据和远程数据模式。
本地数据模式
是指数据一次性载入内存，纯前端进行分页、筛选、排序等功能。
通过指定表格的数据源
dataSource
为一个数据数组。
var dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
<Table dataSource={dataSource} />
远程数据模式
是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。
通过指定表格的数据源
dataSource
为一个 DataSource 的实例如下。
var dataSource = new Table.DataSource({
url: '/api/users',
resolve: function(result) {
return result.data;
getPagination: function(result) {},
getParams: function(pagination, filters, sorter) {}
<Table dataSource={dataSource} />
API
Table
dataIndex:
'name'
,
render:
function
(text)
{
return
<
a
href
=
"javascript:;"
>
{text}
</
a
>
;
title:
'年龄'
,
dataIndex:
'age'
title:
'住址'
,
dataIndex:
'address'
title:
'操作'
,
dataIndex:
''
,
render:
function
(text, record)
{
return
<
span
>
<
a
href
=
"javascript:;"
>
操作一
</
a
>
<
span
className
=
"ant-divider"
>
</
span
>
<
a
href
=
"javascript:;"
>
操作二
</
a
>
<
span
className
=
"ant-divider"
>
</
span
>
<
a
href
=
"javascript:;"
className
=
"ant-dropdown-link"
>
更多
<
i
className
=
"anticon anticon-down"
>
</
i
>
</
span
>
;
var
data = [{
key:
'1'
,
name:
'胡彦斌'
,
age:
32
,
address:
'西湖区湖底公园1号'
key:
'2'
,
name:
'胡彦祖'
,
age:
42
,
address:
'西湖区湖底公园1号'
key:
'3'
,
name:
'李大嘴'
,
age:
32
,
address:
'西湖区湖底公园1号'
React.render(
<
Table
columns
=
{columns}
dataSource
=
{data}
/>
, document.getElementById('components-table-demo-basic'));
简单的表格，最后一列是各种操作。
dataIndex:
'name'
,
render:
function
(text)
{
return
<
a
href
=
"javascript:;"
>
{text}
</
a
>
;
title:
'年龄'
,
dataIndex:
'age'
title:
'住址'
,
dataIndex:
'address'
var
data = [{
key:
'1'
,
name:
'胡彦斌'
,
age:
32
,
address:
'西湖区湖底公园1号'
key:
'2'
,
name:
'胡彦祖'
,
age:
42
,
address:
'西湖区湖底公园1号'
key:
'3'
,
name:
'李大嘴'
,
age:
32
,
address:
'西湖区湖底公园1号'
var
rowSelection = {
onSelect:
function
(record, selected, selectedRows)
{
console.log(record, selected, selectedRows);
onSelectAll:
function
(selected, selectedRows)
{
console.log(selected, selectedRows);
React.render(
<
Table
rowSelection
=
{rowSelection}
columns
=
{columns}
dataSource
=
{data}
/>
, document.getElementById('components-table-demo-row-selection'));
第一列是联动的选择框。
dataIndex:
'name'
,
render:
function
(text)
{
return
<
a
href
=
"javascript:;"
>
{text}
</
a
>
;
title:
'年龄'
,
dataIndex:
'age'
title:
'住址'
,
dataIndex:
'address'
var
data = [];
for
(
let
i=
0
; i<
46
; i++) {
data.push({
key: i,
name:
'李大嘴'
+ i,
age:
32
,
address:
'西湖区湖底公园'
+ i +
'号'
var
pagination = {
total: data.length,
current:
2
,
showSizeChanger:
true
React.render(
<
Table
columns
=
{columns}
dataSource
=
{data}
pagination
=
{pagination}
/>
, document.getElementById('components-table-demo-paging'));
数据项较多时显示分页。
onFilter:
function
(value, record)
{
return
record.name.indexOf(value) ===
0
;
sorter:
function
(a, b)
{
return
a.name.length - b.name.length;
title:
'年龄'
,
dataIndex:
'age'
,
sorter:
function
(a, b)
{
return
a.age - b.age;
title:
'地址'
,
dataIndex:
'address'
,
sorter:
function
(a, b)
{
return
a.address.length - b.address.length;
var
data = [{
key:
'1'
,
name:
'胡斌'
,
age:
32
,
address:
'西湖区湖底公园1号'
key:
'2'
,
name:
'胡彦祖'
,
age:
42
,
address:
'西湖区湖底公园12号'
key:
'3'
,
name:
'李大嘴'
,
age:
32
,
address:
'西湖区湖底公园123号'
key:
'4'
,
name:
'李秀莲大嘴哥'
,
age:
32
,
address:
'西湖区湖底公园123号'
React.render(
<
Table
columns
=
{columns}
dataSource
=
{data}
/>
, document.getElementById('components-table-demo-head'));
筛选和排序
对某一列数据进行筛选，使用列的
filter
属性来指定筛选的列表。
对某一列数据进行排序，通过指定列的
sorter
函数即可启动排序按钮。
sorter: function(a, b) { ... }
， a、b 为比较的两个列数据。
var
dataSource =
new
Table.DataSource({
url:
"/components/table/demo/data.json"
,
resolve:
function
(result)
{
return
result.data;
data: {},
getPagination:
function
(result)
{
return
{
total: result.totalCount,
pageSize: result.pageSize
getParams:
function
(pagination, filters, sorter)
{
console.log(
'getParams 的参数是：'
, pagination, filters, sorter);
var
params = {
pageSize: pagination.pageSize,
currentPage: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order
for
(
var
key
in
filters) {
params[key] = filters[key];
console.log(
'请求参数：'
, params);
return
params;
var
Test = React.createClass({
getInitialState() {
return
{
dataSource: dataSource
refresh() {
this
.setState({
dataSource: dataSource.clone()
changeAndRefresh() {
this
.setState({
dataSource: dataSource.clone({
data: {
city:
'hz'
render() {
return
<
div
>
<
Table
columns
=
{columns}
dataSource
=
{this.state.dataSource}
/>
<
button
className
=
"ant-btn ant-btn-primary"
onClick
=
{this.refresh}
>
重新加载数据
</
button
>
<
button
className
=
"ant-btn"
onClick
=
{this.changeAndRefresh}
>
加载 city=hz 的数据
</
button
>
</
div
>
;
React.render(
<
Test
/>
, document.getElementById('components-table-demo-ajax'));
动态加载数据
远程读取的表格是
更为常见的模式
，下面的表格使用了
dataSource
对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
注意，此示例是静态数据模拟，数据并不准确，请打开网络面板查看请求。
dataIndex:
'name'
,
render:
function
(text)
{
return
<
a
href
=
"javascript:;"
>
{text}
</
a
>
;
title:
'年龄'
,
dataIndex:
'age'
title:
'住址'
,
dataIndex:
'address'
var
data = [{
key:
'1'
,
name:
'胡彦斌'
,
age:
32
,
address:
'西湖区湖底公园1号'
key:
'2'
,
name:
'胡彦祖'
,
age:
42
,
address:
'西湖区湖底公园1号'
key:
'3'
,
name:
'李大嘴'
,
age:
32
,
address:
'西湖区湖底公园1号'
React.render(
<
Table
columns
=
{columns}
dataSource
=
{data}
bordered
=
{true}
/>
, document.getElementById('components-table-demo-bordered'));
添加表格边框线，
bordered={true}
。
dataIndex:
'name'
,
render:
function
(text)
{
return
<
a
href
=
"javascript:;"
>
{text}
</
a
>
;
title:
'年龄'
,
dataIndex:
'age'
title:
'住址'
,
dataIndex:
'address'
var
data1 = [{
key:
'1'
,
name:
'胡彦斌'
,
age:
32
,
address:
'西湖区湖底公园1号'
key:
'2'
,
name:
'胡彦祖'
,
age:
42
,
address:
'西湖区湖底公园1号'
key:
'3'
,
name:
'李大嘴'
,
age:
32
,
address:
'西湖区湖底公园1号'
var
data2 = [{
key:
'11'
,
name:
'胡彦斌2'
,
age:
32
,
address:
'西湖区湖底公园2号'
key:
'22'
,
name:
'胡彦祖2'
,
age:
42
,
address:
'西湖区湖底公园2号'
key:
'33'
,
name:
'李大嘴2'
,
age:
32
,
address:
'西湖区湖底公园2号'
var
App = React.createClass({
getInitialState() {
return
{
data: []
handleClick1() {
this
.setState({
data: data1
handleClick2() {
this
.setState({
data: data2
render() {
return
<
div
>
<
Table
columns
=
{columns}
dataSource
=
{this.state.data}
/>
<
button
className
=
"ant-btn"
onClick
=
{this.handleClick1}
>
加载本地数据1
</
button
>
<
button
className
=
"ant-btn"
onClick
=
{this.handleClick2}
>
加载本地数据2
</
button
>
</
div
>
;
React.render(
<
App
/>
, document.getElementById('components-table-demo-local-data'));
外界控制数据
由父元素控制自身数据展示。
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'));
当表格内容较多不能一次性完全展示时。
