Table 表格

Inhalt

展示行列数据。

何时使用

  • 当有大量结构化的数据需要展现时;
  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

如何使用

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

参数

说明

类型

可选值

默认值

rowSelection

列表项是否可选择

Object

false

pagination

分页器

Object

配置项参考 pagination,设为 false 时不显示分页

size

正常或迷你类型

String

normal or small

normal

dataSource

数据源,可以为数组(本地模式)或一个数据源描述对象(远程模式)

Array or Object

columns

表格列的配置描述,具体项见下表

Array

rowKey

表格列 key 的取值

Function(recode,index):string

record.key

expandIconAsCell

设置展开 Icon 是否单独一列

Boolean

true

Column

列描述数据对象,是 columns 中的一项。

参数

说明

类型

可选值

默认值

title

列头显示文字

String or React.Element

dataIndex

列数据在 data 中对应的 key

React.Element

key

React 需要的 key

String

render

生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引

Function(text, record, index) {}

filters

表头的筛选菜单项

Array

onFilter

本地模式下,确定筛选的运行函数

Function

sorter

排序函数,本地模式下为一个函数,远程模式下为布尔值

Function or Boolean

width

列宽度

String or Number

dataSource

远程数据源配置对象。

参数

说明

类型

可选值

默认值

url

数据源地址

String

resolve

获得数据的解析函数,接收参数为远程数据返回的 result

Function

getPagination

和后台接口返回的分页数据进行适配的函数,返回值会传给表格中的分页器

Function

getParams

和后台接口接收的参数进行适配,返回值会作为请求的参数发送

Function

var Table = antd.Table;
var columns = [{ title: '姓名', 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> </a> </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'));
var Table = antd.Table;
var columns = [{ title: '姓名', 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'));
var Table = antd.Table; var columns = [{ title: '姓名', 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'));
var Table = antd.Table; var columns = [{ title: '姓名', dataIndex: 'name', filters: [{ text: '姓李的', value: '李' }, { text: '姓胡的', value: '胡' }]
}, { title: '年龄', dataIndex: 'age', sorter: true
}, { title: '住址', dataIndex: 'address'
}]; 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> &nbsp; <button className="ant-btn" onClick={this.changeAndRefresh}> 加载 city=hz 的数据 </button> </div>; }
}); React.render(<Test />, document.getElementById('components-table-demo-ajax'));
var Table = antd.Table;
var columns = [{ title: '姓名', dataIndex: 'name'
}, { 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} size="small" />
, document.getElementById('components-table-demo-small'));
var Table = antd.Table;
var columns = [{ title: '姓名', 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'));
var Table = antd.Table;
var columns = [{ title: '姓名', 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> &nbsp; <button className="ant-btn" onClick={this.handleClick2}>加载本地数据2</button> </div>; }
}) React.render(<App />
, document.getElementById('components-table-demo-local-data'));
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'));
Zusammenfassen
本文介绍了表格组件的使用场景和方法。表格适用于展示大量结构化数据,支持排序、搜索、分页等复杂操作。表格有两种模式:本地数据模式和远程数据模式。本地数据模式将数据一次性加载到内存中,前端进行操作;而远程数据模式则是从服务器按需加载数据,适合大数据量场景。文章详细列出了表格和列的API,包括参数说明、类型及默认值等。通过示例代码,展示了如何定义表格的列、数据源及其交互功能,如选择、分页和筛选等。整体上,本文为开发者提供了清晰的表格组件使用指南,帮助其在项目中有效展示和管理数据。