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中外部控制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中可控的筛选和排序实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • ant-design-vue中的select选择器,对输入值的进行筛选操作

    今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题. 记在这里方便以后查看. <a-form-item label='标签' v-bind="formItemLayout"> <a-select mode="tags" :allowClear="true" :filterOption="filterOptio

  • Ant Design Pro 之 ProTable使用操作

    标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本,在Table基础上再封装的一个组件,包含完整的增删改查逻辑,不用复杂的操作,简单几个配置即可实现 官网Api地址 https://protable.ant.design/ 示例 V4版本刚出不久,网上的教程还比较少,踩了不少坑,把自己学习过程分享出来,希望可以帮到你 创建项目(需要node.js及npm环境) npm config set registry https://registry.npm.ta

  • 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: '湖南省湘潭市',

  • 在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

    前言: 本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考<基于OAuth2.0授权系统的验证码功能> 正文: 在Ant Design Pro模板中,使用账号密码登录功能部分(如下图),并没有做图形验证码的开发,所以这部分功能就需要我们自己去实现.这里登录功能其实本质是一个表单提交,所以我们只需自己开发一个图形验证码表单控件就可以,具体实现如下. 1. 图形验证码表单控件代码CaptchaInput.tsx: import React, {us

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • 浅谈Ant Design Pro 菜单自定义 icon

    Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持 使用 ant.design本身的 icon type,和传入一个 img 的 url.只需要直接在 icon 属性上配置即可,如果是个 url,Pro 会自动处理为一个 img 标签. 如果这样还不能满足需求,可以自定义 getIcon 方法. 如果你想使用 iconfont 的图标,你可以使用ant.desgin的自

  • Ant Design Vue中的table与pagination的联合使用方式

    目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用 表格table使用链接:ant desig

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • PHP与MYSQL中UTF8编码的中文排序实例

    本文实例讲述了PHP与MYSQL中UTF8编码的中文排序方法,分享给大家供大家参考.具体实现方法如下: 一般来说,中文共有三种排序方式: 1.根据拼音排序: 2.根据笔画排序: 3.根据偏旁排序. 系统的默认排序方式为拼音排序了,这个也是我们常用的,下面介绍的就是按拼音排序了 1. 需要在php数组中用中文排序,但是一般使用utf8格式的文件,直接用asort排序不行.用gbk和gb2312可以.这跟几种格式的编码有关系.gbk和gb2312本身的编码就是用拼音排序的. 复制代码 代码如下: f

随机推荐