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

时间:2022-06-05 04:54:17

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

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

原文链接:https://blog.csdn.net/aminwangaa/article/details/85543445