React —— antd Table组件的使用
今天刚刚运用antd做了个分页,根据官网上的指导和一些自己的摸索,将其完成,有些代码编写的还是比较繁琐,没有做简化。
antd官网讲的还是比较详细的,有案例,本例在其基础上扩展了一下功能,现将其按照例子的方式记录下来,以供以后参考。
先将显示出来的效果放出来(注:本次案例是点击一次页码请求一页数据):
编码过程大体需要以下几步:
1.初始化必要属性,如数据 data,数据条数 count;
2.设置table的表头标题,即,标题1,标题2这些;
3.请求数据,引用Table组件,添加相关属性;
4.添加相应的点击效果;
嗯,应该就这些,下边开始详细讲。
最初,如果比较懒,没有要求特别的样式,可以用antd所给的样式:import '~/antd/dist/antd.css',具体路径依照各自的结构有区别。
初始化数据:
getInitialState() { this.tableColumns = []; //初始定义表头菜单 return{ queryInfo : { //设置最初一页显示多少条 pageSize: 10 }, dataSource:{ //数据存放 count: 0, //一共几条数据 data: [], //数据 }, loading: false //Load属性设置 }
}
数据初始完成后开始各种定义,使数据丰富有效起来;设置table的表头标题:
getTable() { //函数封装
this.tableColumns = [{
title: '菜单1', //菜单内容
dataIndex: 'cloud_computing_mark', //在数据中对应的属性
key: 'cloud_computing_mark' //key
}, {
title: '菜单2',
dataIndex: 'project_name',
key: 'project_name'
}, {
title: '菜单3',
dataIndex: 'data_scope',
key: 'data_scope'
}, {
title: '菜单4',
dataIndex: 'description',
key: 'description',
}, {
title: '操作',
key: 'operation',
render: (text, record) => ( //塞入内容
<span>
<a className="edit-data" onClick={this.editSource.bind(this,text)}>编辑</a>
<a className="delete-data" onClick={this.deletSource.bind(this,text)}>删除</a>
<Link className="topo-data" to={{pathname:'/a',query:{id:text.id}}}>数据拓扑</Link>
</span>
),
}];
},
请求数据(这边就写请求成功后的,我用的是JSON请求的方式),初次请求数据设置这些即可:
promise.then(function(data) {
this.setState({
dataSource:{
count: data.count,
data: data.data,
page: 1
},
});
}.bind(this))
开始引用Table组件:
<Table
columns={self.tableColumns} //th菜单项
rowKey={record => record.registered}
dataSource={this.state.dataSource.data} //数据
pagination={{ //分页
total: this.state.dataSource.count, //数据总数量
pageSize: this.state.queryInfo.pageSize, //显示几条一页
defaultPageSize: this.state.queryInfo.pageSize, //默认显示几条一页
showSizeChanger: true, //是否显示可以设置几条一页的选项
onShowSizeChange(current, pageSize) { //当几条一页的值改变后调用函数,current:改变显示条数时当前数据所在页;pageSize:改变后的一页显示条数
self.toSelectchange(current, pageSize); //这边已经设置了self = this
},
onChange(current) { //点击改变页数的选项时调用函数,current:将要跳转的页数
self.gotoThispage(current, self.state.queryInfo.pageSize);
},
showTotal: function () { //设置显示一共几条数据
return '共 ' + this.state.dataSource.count + ' 条数据';
}
}}
loading={this.state.loading} //设置loading属性
/>
当点击选择一页显示几条时,请求数据,重新渲染,所调用的函数:
toSelectchange(page,num) {
$.ajax({ url: url, type: "POST", dataType: 'json', cache:false, data:{ page: page, pagesize:num }, success:function(data) { console.log(data); this.setState({ queryInfo : { pageSize: num }, dataSource:{ count: data.count, data: data.data, } }); }.bind(this), error:function(data) { console.log(data); }.bind(this) }); }
同理,在点击页数和点击上一页下一页时,调用函数,函数与上边一样,只是请求的网址会不同。