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


Posted in Javascript onNovember 17, 2020

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

/**
 * 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 {}

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

class View extends React.Component<IViewProps, IViewStates> {
 componentDidMount() {
  const { dispatch, pagination } = this.props;
  // 此次Params定义你访问接口传递的参数声明
  /*类似:
  export interface OpcParamsType {
  // 通用参数
  currentPage?: number;
  pageSize?: number;
  id?: number;
  ids?: any;
 }
 */
  const params: Partial<Params> = {
   currentPage: 1,
   pageSize: pagination.pageSize,
  };
  if (pagination.sort !== '') {
   params.sort = pagination.sort;
  }
  if (dispatch) {
   dispatch({
    //你的命名空间+方法名
    type: 'your/fetchTab',
    payload: params,
   });
  }
 }
}

表格点击排序或分页的响应事件

/**
  * @name: 表格分页点击事件
  * @msg:
  * @param {type}
  * @return:
  */
 handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => {
  const { dispatch } = this.props;
  const params: Partial<Params> = {
   currentPage: pagination.current,
   pageSize: pagination.pageSize,
  };
  if (sorter.order !== undefined) {
   params.sort = sorter;
  }
  if (dispatch) {
   dispatch({
    type: 'your/fetchTab',
    payload: params,
   });
  }
 };

行属性配置

const columns = [
   {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true,
    sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
   },]

表格组件

<div>
    <ProTable
     rowKey={(record) => record.name}
     columns={columns}
     loading={loading}
     dataSource={tab}
     search={false}
     options={false}
     tableAlertRender={false}
     pagination={{
      ...pagination,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: () => `${pagination.current}/${pagination.totalPages}`,
     }}
     onChange={this.handleStandardTableChange}
    />
   </div>

完整代码

/* eslint-disable react/no-unused-state */
import React from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import intl from 'react-intl-universal';
import { Button, Divider, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { connect, ConnectProps } from 'umi';
import { ConnectState } from '@/models/connect';
import { MyTablePagination } from '@/pages/diagnosis/audit/data';
interface IViewProps extends Partial<ConnectProps> {
 tab: [];
 paginationAe: MyTablePagination;
 loading: boolean;
}
interface IViewStates {}
class View extends React.Component<IViewProps, IViewStates> {
 componentDidMount() {
  const { dispatch, pagination } = this.props;
  // 此次Params定义你访问接口传递的参数声明
  /*类似:
  export interface OpcParamsType {
  // 通用参数
  currentPage?: number;
  pageSize?: number;
  id?: number;
  ids?: any;
 }
 */
  const params: Partial<Params> = {
   currentPage: 1,
   pageSize: pagination.pageSize,
  };
  if (pagination.sort !== '') {
   params.sort = pagination.sort;
  }
  if (dispatch) {
   dispatch({
    //你的命名空间+方法名
    type: 'your/fetchTab',
    payload: params,
   });
  }
 }

  /**
  * @name: 表格分页点击事件
  * @msg:
  * @param {type}
  * @return:
  */
 handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => {
  const { dispatch } = this.props;
  const params: Partial<Params> = {
   currentPage: pagination.current,
   pageSize: pagination.pageSize,
  };
  if (sorter.order !== undefined) {
   params.sort = sorter;
  }
  if (dispatch) {
   dispatch({
    type: 'your/fetchTab',
    payload: params,
   });
  }
 };

 render() {
  const { tab, pagination, loading } = this.props;
  const { sort } = pagination;

  const columns = [
   {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true,
    sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
   },];
  return (
   <div>
    <ProTable
     rowKey={(record) => record.name}
     columns={columns}
     loading={loading}
     dataSource={tab}
     search={false}
     options={false}
     tableAlertRender={false}
     pagination={{
      ...pagination,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: () => `${pagination.current}/${pagination.totalPages}`,
     }}
     onChange={this.handleStandardTableChange}
    />
   </div>
  );
 }
}
export default connect(({ your, loading }: ConnectState) => ({
 tab: your.tab,
 loading: loading.effects['your/fetchTab'],
 pagination: your.pagination,
}))(View);

以上这篇ant design pro中可控的筛选和排序实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
antd table按表格里的日期去排序操作
Nov 17 #Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 #Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 #Javascript
详解Vue数据驱动原理
Nov 17 #Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 #Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
解放web程序员的输入验证
2006/10/06 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python单例模式实例解析
2018/08/28 Python
自学python的建议和周期预算
2019/01/30 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python devel安装失败问题解决方案
2020/06/09 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
汇科协同Java笔试题
2012/03/31 面试题
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2016高考感言
2015/08/01 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript