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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
angular中的cookie读写方法
Aug 02 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
原生JS实现分页
Apr 19 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
JS常用表单验证方法总结
2014/05/22 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js继承实现方法详解
2016/12/16 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python实现共轭梯度法
2019/07/03 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
求职简历中自我评价
2014/01/28 职场文书
社区文化建设方案
2014/05/02 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
教育实习指导教师评语
2014/12/31 职场文书
《穷人》教学反思
2016/02/19 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers