react 的table后端排序

╰+哭是因爲堅強的太久メ 2023-06-19 09:43 10阅读 0赞

\*\*

## 被虐的有点累,但还是要像对待初恋一样对待它(代码虐我千百遍,我待代码如初恋) ##

\*\*

## 直接上代码了 ##

首先是sorter的受控模式的onChange,不明白的可以看一下ant design的官网,代码如下  
**onChange的写法**

onChange_2 = (pagination,filters,sorter,extra) =>{
            let { dispatch} = this.props;
            this.props.form.validateFields((errors, values)=>{
                if(!!errors)return;
                if(sorter.order === 'descend'){
                    values.orderWay = "desc";
                }
                if(sorter.order === 'ascend'){
                //orderBy和orderWay就是传给后台的排序参数
                //orderBy是表格选中的列的表头属性名
                    values.orderWay = "asc";
                }
                values.orderBy = sorter.field;
                pageNum=1;
                pageSize=10;
                dispatch({
                    type:'listmarkethistory/list',
                    payload:{...values,pageNum,pageSize}
                })
                //此处是为了重置分页器的分页数据,是为了在查询的时候保证数据不会乱
                //掉,同时还需要在查询的方法中加入onChange触发后的orderBy,orderWay
                //才能保证排序后用户点击分页的时候数据是排序后的数据
                //查询的方法就不贴了,通过this获取改变后的数据传给后端就ok了
                this.setSate({
                	pageNum:this.pageNum=1;
                	pageSize:this.pageSize=10;
           
                })
            })    
        };

表格  
const tableColumns = \[\{  
title: ‘序号’,  
dataIndex: ‘index’,  
key: ‘index’,  
width: 100,  
align: ‘center’,  
render: (text,record,index) => (index + 1),  
fixed: ‘left’  
\},  
\{  
title: ‘orderBy’,  
dataIndex: ‘exchId’,  
key: ‘exchId’,  
//这里是sorter的写法  
sorter:true,  
sortDirections:\[‘descend’,‘ascend’\],  
width: 150,  
align: ‘center’,  
fixed: ‘left’  
\}\]

table组件和分页器的写法  
<ExhibitTable  
bordered  
columns=\{this.state.column  
loading=\{loading\}  
dataSource=\{dataSource\}  
scroll=\{ \{ x: ‘max-content’, y: 330 \}\}  
rowKey=“index”  
onChange=\{this.onChange\_2\}  
pagination=\{false\}  
/>  
<div style=\{ \{ textAlign: “right”, margin: “16px 0” \}\}>  
<Pagination \{…\{  
current: this.state.pageNum,  
pageSize: this.state.pageSize,  
total: pageTotal,  
onChange: this.pageonChange,  
onShowSizeChange: this.pageonChange,  
showSizeChanger: true,  
pageSizeOptions: \[‘10’, ‘30’, ‘50’, ‘100’\],  
showTotal: (total, range) => range\[0\] + ‘-’ + range\[1\] + ’ 共 ’ + total + ‘条’  
\}\} />

## 还有不懂得看onChange的注释说明,代码写的不是很详细 ##