mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
Remove some demo
This commit is contained in:
parent
64b4031d7a
commit
f7ef12acf1
@ -1,117 +0,0 @@
|
||||
# 配置动态加载数据
|
||||
|
||||
- order: 7
|
||||
|
||||
远程读取的表格是**更为常见的模式**,下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。
|
||||
|
||||
**注意,此示例是静态数据模拟,数据并不准确,请打开网络面板查看请求。**
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
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 rowSelection = {
|
||||
getCheckboxProps: function (value) {
|
||||
return {
|
||||
defaultValue: value.name === '胡彦祖ajax2', // 配置默认勾选的列
|
||||
disabled: value.name === '李大嘴ajax3' // 配置无法勾选的列
|
||||
}
|
||||
},
|
||||
onSelect: function(record, selected, selectedRows) {
|
||||
console.log(record, selected, selectedRows);
|
||||
},
|
||||
onSelectAll: function(selected, selectedRows) {
|
||||
console.log(selected, selectedRows);
|
||||
}
|
||||
};
|
||||
|
||||
var Test = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
dataSource: dataSource
|
||||
};
|
||||
},
|
||||
refresh() {
|
||||
this.setState({
|
||||
dataSource: dataSource.clone()
|
||||
});
|
||||
},
|
||||
changeAndRefresh() {
|
||||
// 可以修改原来的 dataSource 再发请求
|
||||
this.setState({
|
||||
dataSource: dataSource.clone({
|
||||
data: {
|
||||
city: 'hz'
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return <div>
|
||||
<Table rowSelection={rowSelection} 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>;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ReactDOM.render(<Test />, document.getElementById('components-table-demo-ajax-props'));
|
||||
````
|
Loading…
Reference in New Issue
Block a user