react-antd-procomponents组件库 ProTable表格实现跨页多选。

news2024/9/21 14:45:08

在这里插入图片描述

table表格多选时所需要的api
1.onSelect - 单行选择(用户手动选择/取消选择某行的回调)
2.onSelectMultiple - 多行选择(用户使用键盘 shift 选择多行的回调)
3.onSelectAll - 全选全不选(用户手动选择/取消选择所有行的回调)
4.onChange - 每次选择行都会触发onChange,并且是后执行。(选中项发生变化时的回调)

cancleRowKeys - 取消选择的行
mySelectedRowKeys - 选中的行

1.选择行时,判断是选择还是取消选择,如果是取消选择,将行key存储至 cancleRowKeys 中

2.在onChange 方法中

  • 如果cancleRowKeys有值,说明此次选择是取消选择,从已选中的行mySelectedRowKeys过滤掉cancleRowKeys,并将cancleRowKeys重置为空
  • 如果cancleRowKeys没有值,将选中数据添加至mySelectedRowKeys,并清理重复数据

关键代码:

import { useState, useEffect, useRef } from 'react';
import { Button, Drawer, Space, Table, message } from 'antd';
import { RollbackOutlined } from '@ant-design/icons';
import { ProTable, ProFormTreeSelect } from '@ant-design/pro-components';
import type { FC } from 'react';
import type { DataType } from '../data';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { getPersonnels, publishStudents } from '../service';
import { getCodeSelecBytybe } from '@/services/globalServices';
import { getFlatArr } from '../../../utils/utils';
export type DrawerProps = {
  currentRow: DataType | undefined;
  personnelVisible: boolean;
  handlePersonnelVisible: any;
  setCurrentRow: any;
  actionRef: any;
  managecomListData: any;
  initialManagecomValue: any;
  newTreeData: any;
};
const Personnel: FC<DrawerProps> = (props) => {
  const {
    currentRow,
    setCurrentRow,
    personnelVisible,
    handlePersonnelVisible,
    actionRef,
    managecomListData,
    initialManagecomValue,
    newTreeData,
  } = props;
  const actionRef2 = useRef<ActionType>(); // 表格组件ProTable ref
  const [userflagArray, setUserflagArray] = useState([]); // 用户类型
  useEffect(() => {
    // 用户类型
    getCodeSelecBytybe({ codeType: 'userflag' }).then((res) => {
      if (res && res.success) {
        setUserflagArray(res.data);
      } else {
        setUserflagArray([]);
      }
    });
  }, []);

  const [mySelectedRowKeys, handleMySelectedRowKeys] = useState([]); // 选中的项目
  // 由于cancleRowKeys不影响dom,所以不使用useState定义
  let cancleRowKeys = []; // 取消选择的项目

  const onSelect = (record, selected) => {
    if (!selected) {
      cancleRowKeys = [record.staffCode];
    }
  };

  const onMulSelect = (selected, selectedRows, changeRows) => {
    if (!selected) {
      cancleRowKeys = changeRows.map((item) => item.staffCode);
    }
  };

  const onChange = (selectedRowKeys, selectedRows) => {
    if (cancleRowKeys.length) {
      const keys = mySelectedRowKeys.filter((item) => !cancleRowKeys.includes(item));
      handleMySelectedRowKeys(keys);
      cancleRowKeys = [];
    } else {
      handleMySelectedRowKeys([...new Set(mySelectedRowKeys.concat(selectedRowKeys))]);
    }
  };

  // 重置
  const rest = () => {
    handlePersonnelVisible(false);
    setCurrentRow(undefined);
  };

  // 发布通知
  const releaseNotes = (selectedRowKeys: any) => {
    let params = {
      studentId: selectedRowKeys.toString(),
      noticeId: currentRow?.id,
    };
    publishStudents(params).then((res) => {
      if (res && res.success) {
        rest();
        if (actionRef.current) {
          actionRef.current.reload();
        }
        message.success('发布通知成功!');
      }
    });
  };

  const columns: ProColumns[] = [
    {
      title: '工号',
      dataIndex: 'staffCode',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'userFlag',
      align: 'center',
      valueType: 'select',
      fieldProps: {
        options: userflagArray,
        fieldNames: {
          label: 'codeName',
          value: 'codeValue',
        },
      },
      render: (text: any) => {
        return text;
      },
    },
    {
      title: '管理机构',
      dataIndex: 'manageCom',
      align: 'center',
      renderFormItem: (item, { type }, form) => {
        if (type === 'form') {
          return null;
        } else {
          return (
            <div className="searchWidth">
              <ProFormTreeSelect
                placeholder="请选择"
                allowClear
                request={async () => newTreeData}
                fieldProps={{
                  showArrow: false,
                  filterTreeNode: true, // 根据输入项筛选
                  showSearch: true,
                  dropdownMatchSelectWidth: false, // 下拉菜单和选择器同宽。 默认true
                  treeNodeFilterProp: 'title',
                  fieldNames: {
                    label: 'title',
                  },
                  onChange: (e) => {
                    form.setFieldsValue({ manageCom: e });
                  },
                }}
              />
            </div>
          );
        }
      },
      render: (_: any, record: { manageCom: any }) => {
        let text2 = record.manageCom;
        Object.keys(getFlatArr(managecomListData)).map((index) => {
          if (getFlatArr(managecomListData)[index].value === record.manageCom) {
            text2 = getFlatArr(managecomListData)[index].title;
          }
          return text2;
        });
        return text2;
      },
    },
    {
      title: '入司日期',
      dataIndex: 'employDate',
      align: 'center',
      valueType: 'date',
      search: false,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      align: 'center',
      search: false,
    },
  ];
  return (
    <>
      {currentRow ? (
        <Drawer
          title="发布通知公告"
          width="70%"
          onClose={() => rest()}
          visible={personnelVisible}
          maskClosable={false}
          closable={false}
          footer={
            <Button key="back" icon={<RollbackOutlined />} onClick={() => rest()}>
              返回
            </Button>
          }
        >
          <ProTable
            rowKey="staffCode"
            actionRef={actionRef2}
            search={{
              labelWidth: 120,
              defaultCollapsed: false,
            }}
            pagination={{
              pageSize: 10,
            }}
            options={false}
            revalidateOnFocus={false}
            request={(params) => getPersonnels({ ...params } as any)}
            columns={columns}
            rowSelection={{
              selectedRowKeys: mySelectedRowKeys,
              onSelect, //用户手动选择/取消选择某行的回调
              onSelectMultiple: onMulSelect, //用户使用键盘 shift 选择多行的回调
              onSelectAll: onMulSelect, //用户手动选择/取消选择所有行的回调
              onChange, //选中项发生变化时的回调
            }}
            tableAlertRender={() => {
              return (
                <Space size={24}>
                  <Button
                    type="primary"
                    key="primarynew"
                    onClick={() => {
                      releaseNotes(mySelectedRowKeys);
                    }}
                  >
                    发布通知({mySelectedRowKeys.length})
                  </Button>
                  <span>
                    {/* <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                      取消选择
                    </a> */}
                  </span>
                </Space>
              );
            }}
            tableAlertOptionRender={() => {
              return false;
            }}
          />
        </Drawer>
      ) : null}
    </>
  );
};

export default Personnel;

在这里插入图片描述

相关组件地址:
ant.design-Table v4
procomponents-ProTable

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/462606.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高可用keepalived + Nginx 负载均衡器

准备操作&#xff1a; [rootlocalhost ~]# systemctl stop firewalld # 或 systemctl disable --now firewalld [rootlocalhost ~]# setenforce 0 [rootlocalhost ~]# cd /etc/yum.repos.d [rootlocalhost ~]# mv repo.bak/* ./ [rootlocalhost ~]# yum -y install epel-rele…

Linux中的YUM源仓库和NFS文件共享服务(うたかたの夢)

YUM仓库源的介绍和相关信息 简介 yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红帽软件包管理器的缩写&#xff09;构建的软件更新机制&#xff0c;能够自动解决软件包之间的依赖关系。 yum由仓库和客户端组成&#xff0c;也就是整个yum由两部分组成&#xff0…

Python爬虫基础之三

Python爬虫基础包括HTTP协议、HTML、CSS和JavaScript语言基础、requests库的使用、Beautiful Soup库的使用、xpath和正则表达式的使用等。此外&#xff0c;还应该了解反爬虫机制和爬虫的一些常见问题及解决方法。 上一篇文章讲解了有关条件判断语句、循环语句、元组、字典等相…

排序 - 插入排序(Insertion Sort)

文章目录 插入排序介绍插入排序实现插入排序的时间复杂度和稳定性插入排序时间复杂度插入排序稳定性 代码实现核心&总结 每日一道算法&#xff0c;提高脑力。第三天&#xff0c;插入排序。 插入排序介绍 直接插入排序(Straight Insertion Sort)的基本思想是: 把n个待排序…

浅谈个人对“孔乙己的长衫“的感受

名人说&#xff1a;往者不可谏&#xff0c;来者犹可追。——《论语微子篇》 创作者&#xff1a;Code_流苏(CSDN) ★温馨提示&#xff1a;以下仅代表个人观点&#xff0c;不代表其它任何人看法。 目录 〇、缘由一、社会对于学历和职业之间的关系认知是怎样的&#xff1f;二、学…

android studio AlertDialog弹出对话框

1.定义弹出的对话框的按钮和显示结果的文本框 <Buttonandroid:id"id/btn7"android:layout_width"match_parent"android:layout_height"wrap_content"android:background"drawable/btn_nine_selector"android:text"弹出对话提醒…

ROS学习第三十五节——URDF集成Gazebo实操

https://download.csdn.net/download/qq_45685327/87719249 1.编写封装惯性矩阵算法的 xacro 文件 head.xacro <robot name"base" xmlns:xacro"http://wiki.ros.org/xacro"><!-- Macro for inertia matrix --><xacro:macro name"sp…

微软杀疯了,谷歌蒸发1000亿市值作陪,中文编程和它却打起翻身仗

微软VS谷歌&#xff0c;究竟谁是最后赢家&#xff1f; 当微软宣布收购OpenAI开发的ChatGPT的决定一出&#xff0c;Google深感威胁&#xff0c;开发出Gmail的早期员工甚至大胆预测&#xff0c;Google离完全毁灭只剩下一到两年&#xff01; 好歹也在互联网之战中屹立多年&#…

密码学|AES加密算法|学习记录

AES简介 AES加密是分组加密的一种 明文长度为固定的128位 密钥可长度为128&#xff0c;192&#xff0c;256位 128bit16字节&#xff0c;在AES中我们将数据用4x4字节的矩阵表示。&#xff08;注排列顺序为先从上到下再从左到右&#xff09; AES的一般步骤 对于上图最终轮区…

ChatGPT生成式算法及发展历程

引言 GPT&#xff08;Generative Pre-Trained Transformer&#xff09;系列是OpenAI开发的一系列以Transformer[2]为基础的生成式预训练模型&#xff0c;这个系列目前包括文本预训练模型GPT-1[3]&#xff0c;GPT-2[4]&#xff0c;GPT-3[5]&#xff0c;InstructGPT[7]、ChatGPT…

项目范围控制:如何控制项目范围的变化?

一个成功的项目需要在进度、成本和质量之间取得平衡。控制项目交付范围是实现这个平衡的关键。然而&#xff0c;项目范围是会变化的&#xff0c;因此控制项目范围变化是必要的。 如何控制项目范围的变化&#xff1f; 1、了解项目的交付范围 项目经理、团队成员、利益相关者和…

手把手带你理解Spring日志原理

文章目录 1 楔子2 jcl原理分析2.1 依赖坐标2.2 API调用2.3 源码分析 3 slf4j原理分析3.1 依赖坐标3.2 API调用3.3 源码分析 4 spring是如何选择日志技术的&#xff1f;4.1 场景一&#xff1a;通过log4j2打印日志4.1.1 引入maven依赖4.1.2 编写配置文件4.1.3 执行测试方法4.1.4 …

陆奇博士最新演讲分享:我的大模型世界观(附PPT下载链接)

省时查报告-专业、及时、全面的行研报告库 省时查方案-专业、及时、全面的营销策划方案库 【免费下载】2023年3月份热门报告合集 【限时免费】ChatGPT4体验&#xff0c;无需翻墙直接用 ChatGPT调研报告&#xff08;仅供内部参考&#xff09; ChatGPT的发展历程、原理、技术架构…

使用WireShark抓包分析TCP_IP协议

文章目录 前言一、TCP/IP协议1.1 OSI分层1.2 TCP/IP 分层 二、抓包2.1 Socket代码2.2 过滤包 三、分析3.1 TCP首部3.2 实战分析3.3 三次握手3.4 四次挥手 参考 前言 TCP/IP 协议 是一组用于互联网通信的协议。它由两个主要协议组成&#xff1a;传输控制协议&#xff08;TCP&am…

【视频课程】算法工程师需要的ChatGPT大模型算法理论与实践课程!非粗浅科普...

前言 自从2022年11月ChatGPT发布之后&#xff0c;迅速火遍全球。其对话的交互方式&#xff0c;能够回答问题&#xff0c;承认错误&#xff0c;拒绝不适当的请求&#xff0c;高质量的回答&#xff0c;极度贴近人的思维的交流方式&#xff0c;让大家直呼上瘾&#xff0c;更是带火…

【Java】面试常问知识点(计算机网络方面)

计算机网络 OSI七层模型 应用层 (Application): 网络服务与最终用户的一个接口。 协议有:HTTP FTP TFTP SMTP SNMP DNS 表示层(Presentation Layer): 数据的表示、安全、压缩。(在五层模型里面已经合并到了应用层) 格式有&#xff0c;JPEG、ASCll、DECOIC、加密格式等 会…

# VGA协议实践

VGA协议实践 文章目录 VGA协议实践1.VGA介绍2. ALTPLL3. 字模与图像生成4. ROM5. 代码5.1 vga驱动模块5.2 显示数据生成模块5.3 按键消抖模块5.4 顶层模块5.5 TCL绑定引脚代码 6. 效果7.总结8.参考文章 1.VGA介绍 VGA:Video Graphics Array视频图形阵列是IBM于1987年提出的一个…

【react全家桶学习】react中函数组件和类式组件(超详/必看)

函数式组件定义及特点 定义&#xff08;核心就是一个函数&#xff0c;返回虚拟dom&#xff09;&#xff1a; import React from reactexport default function index() {return <div>index</div> }特点&#xff1a; 1、适用于【简单组件】的定义2、是一个函数&a…

macOS与Ubuntu困惑解答

homebrew&#xff08;报管理器&#xff09;、yaml、apt-get、apt是包管理工具&#xff1b; zsh、bash都是解释器&#xff0c;是shell语言的解释器&#xff0c;都是服务于shell语言的&#xff0c;它们之间的区别是&#xff0c;zsh能够很好的兼容bash&#xff0c;zsh更优雅&…

web端导航菜单系列

导航菜单属于导航中最常规的一种导航模式&#xff0c;它有2个显而易见的用途&#xff1a;帮助我们找到想要的任何东西和告诉我们现在身在何处。帮助用户在不同页面之间跳转找到目标功能。 导航作为网站或者平台的骨架&#xff0c;是产品设计中不容忽视的一环。结合自身对于导航…