分页与时间戳与及其转换
import moment form ‘moment’
moment(dateString).unix();//转换为时间戳
moment(item.date *1000).format('YYYY-MM-DD HH:mm:ss');
下面是转载分页方法：
编码过程大体需要以下几步：
1.初始化必要属性，如数据 data，数据条数 count;
2.设置table的表头标题，即，标题1，标题2这些;
3.请求数据，引用Table组件，添加相关属性;
4.添加相应的点击效果;
嗯，应该就这些，下边开始详细讲。
最初，如果比较懒，没有要求特别的样式，可以用antd所给的样式：import '~/antd/dist/antd.css'，具体路径依照各自的结构有区别。
初始化数据：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
getInitialState() { this.tableColumns = []; //初始定义表头菜单 return{ queryInfo : { //设置最初一页显示多少条 pageSize: 10 }, dataSource:{ //数据存放 count: 0, //一共几条数据 data: [], //数据 }, loading: false //Load属性设置 }} |
数据初始完成后开始各种定义，使数据丰富有效起来；设置table的表头标题：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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请求的方式）,初次请求数据设置这些即可：
|
1
2
3
4
5
6
7
8
9
|
promise.then(function(data) { this.setState({ dataSource:{ count: data.count, data: data.data, page: 1 }, }); }.bind(this)) |
开始引用Table组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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属性/> |
当点击选择一页显示几条时，请求数据，重新渲染，所调用的函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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) }); } |
同理，在点击页数和点击上一页下一页时，调用函数，函数与上边一样，只是请求的网址会不同。
