afc163
9 years ago
1 changed files with 0 additions and 117 deletions
@ -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