ant design pro中可控的筛选和排序实例

我就废话不多说了,大家还是直接看代码吧~

/** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table, Button } from 'antd'; const data = [{ key: '1', name: '张三', age: 22, address: '浙江省温州市', }, { key: '2', name: '李四', age: 42, address: '湖南省湘潭市', }, { key: '3', name: '王五', age: 12, address: '四川省成都市', }, { key: '4', name: '赵六', age: 25, address: '河南省郑州市', }, { key: '5', name: '宋二', age: 74, address: '海南省海口市', }, { key: '6', name: '韩八', age: 19, address: '台湾省台北市', }, { key: '7', name: '孙七', age: 55, address: '福建省福州市', }, { key: '8', name: '金九', age: 81, address: '山西省运城市', }]; class SortTable extends React.Component { state = { filteredInfo: null, sortedInfo: null, }; handleChange = (pagination, filters, sorter) => { //pagination:{current: 1, pageSize: 10} //filters:{name: null, address: null} //sorter:{column: {…}, order: "ascend", field: "name", columnKey: "name"} console.log('Various parameters', pagination); console.log('Various parameters', filters); console.log('Various parameters', sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, }); }; clearFilters = () => { this.setState({ filteredInfo: null }); }; clearAll = () => { this.setState({ filteredInfo: null, sortedInfo: null, }); }; setAgeSort = () => { this.setState({ sortedInfo: { order: 'descend', columnKey: 'age', }, }); }; render() { let { sortedInfo, filteredInfo } = this.state; sortedInfo = sortedInfo || {}; filteredInfo = filteredInfo || {}; const columns = [{ title: '名字', dataIndex: 'name', key: 'name', filters: [ { text: '孙', value: '孙' }, { text: '赵', value: '赵' }, ], filteredValue: filteredInfo.name || null, onFilter: (value, record) => record.name.includes(value), //sorter: (a, b) => a.name.length - b.name.length, sorter: (a, b) => a.name.localeCompare(b.name),//排序规则 sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, }, { title: '地址', dataIndex: 'address', key: 'address', filters: [ //筛选条件 { text: '浙江省', value: '浙江省' }, { text: '市', value: '市' }, ], filteredValue: filteredInfo.address || null, onFilter: (value, record) => { console.log(value,"value"); //浙江省 value console.log(record,"record");//{key: "2", name: "李四", age: 42, address: "湖南省湘潭市"} 遍历数据 return record.address.includes(value);//所有的数据中 包含value(浙江省)的筛选出来 }, //sorter: (a, b) => a.address.length - b.address.length, sorter: (a,b)=>(a.address).localeCompare(b.address), sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order, }]; return ( <div> <div className="table-operations"> <Button onClick={this.setAgeSort}>年龄排序</Button> <Button onClick={this.clearFilters}>清除筛选</Button> <Button onClick={this.clearAll}>清除筛选和年龄排序</Button> </div> {/*columns标题栏 dataSource内容栏根据标题填充数据*/} <Table columns={columns} dataSource={data} onChange={this.handleChange} /> </div> ); } } export default SortTable;

未排序

ant design pro中可控的筛选和排序实例

名字排序

ant design pro中可控的筛选和排序实例

名字排序

ant design pro中可控的筛选和排序实例

年龄排序

ant design pro中可控的筛选和排序实例

年龄排序

ant design pro中可控的筛选和排序实例

地址排序

ant design pro中可控的筛选和排序实例

地址排序

ant design pro中可控的筛选和排序实例

条件筛选

ant design pro中可控的筛选和排序实例

条件筛选

ant design pro中可控的筛选和排序实例

补充知识:Ant Design中外部控制Table组件的sorter(后端真分页,排序)

问题描述

用户当前列表页跳转至其他页面,返回后丢失排序记录,或者想通过其他按钮控制列表的排序解决方案

定义自己的Pagination,继承TablePaginationConfig

export interface MyTablePagination extends TablePaginationConfig { totalPages?: number; sort?: SorterResult<any>; }

分页数据来源于model控制的prop,

interface IViewProps extends Partial<ConnectProps> { tab: []; paginationAe: MyTablePagination; loading: boolean; } interface IViewStates {}

页面渲染时判断是否需要排序

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7e8d71e5347489bfe8682ab83a83b832.html