首页 > 其他分享 >Protable 树结构移除选中行

Protable 树结构移除选中行

时间:2024-02-22 09:55:05浏览次数:28  
标签:const 树结构 移除 record 选中 key ProTable Protable

信铁寒胜:它里面这个迭代的思想还是比较有用的。

要在 ProTable 树形结构中实现移除选中行的功能,你需要做以下几步:

  1. 在 ProTable 的父组件中定义数据源 data 和一个函数用于移除行。
  2. 在 ProTable 组件中传入数据源和定义一个列,其中包含一个操作列,可以在该列中添加一个移除按钮。
  3. 定义一个选中行的状态 selectedRowKeys,并在 ProTable 中设置 rowSelection 属性,用于控制行的选中状态。
  4. 在移除按钮的点击事件处理函数中,调用父组件传递的移除行函数,从数据源中移除对应的行,并更新选中行的状态。
  5. 更新数据源和选中行状态后,ProTable 会自动重新渲染,实现移除选中行的功能。

以下是一个示例代码:

 
import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Operation',
    valueType: 'option',
    render: (_, record) => (
      <a onClick={() => handleRemove(record)}>Remove</a>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John',
    age: 30,
    address: '123 Street, City',
    children: [
      {
        key: '1-1',
        name: 'Jack',
        age: 10,
        address: '123 Street, City',
      },
      {
        key: '1-2',
        name: 'Lucy',
        age: 7,
        address: '456 Avenue, Town',
      },
    ],
  },
  {
    key: '2',
    name: 'Jane',
    age: 25,
    address: '456 Avenue, Town',
    children: [
      {
        key: '2-1',
        name: 'Jim',
        age: 5,
        address: '789 Road, Village',
      },
    ],
  },
];

function MyTable() {
  const [dataSource, setDataSource] = useState(data);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const handleRemove = (record) => {
    const newData = removeRecord(dataSource, record);
    setDataSource(newData);
    setSelectedRowKeys([]);
  };

  const removeRecord = (data, record) => {
    return data.filter((item) => {
      if (item.key === record.key) {
        return false;
      } else if (item.children) {
        item.children = removeRecord(item.children, record);
        return true;
      } else {
        return true;
      }
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  };

  return (
    <ProTable
      columns={columns}
      dataSource={dataSource}
      rowSelection={rowSelection}
      pagination={false}
    />
  );
}

export default MyTable;

  

在上面的示例中,我们定义了一个移除行的函数 handleRemove,用于移除选中的行。当用户点击操作列中的移除按钮时,会调用该函数来移除对应的行。然后更新数据源和选中行状态,并重新渲染 ProTable 组件。

我们还定义了一个递归函数 removeRecord,用于从树形结构中移除指定的行。

在 ProTable 中使用 rowSelection 属性来控制行的选中状态。selectedRowKeys 是选中行的状态,onChange 用于处理选中行改变时的事件。

希望这个示例对你有所帮助。如果有任何疑问,请随时提问。

  转自:ChartGpt

标签:const,树结构,移除,record,选中,key,ProTable,Protable
From: https://www.cnblogs.com/wwssgg/p/18026675

相关文章

  • # 代码随想录算法训练营day01 | leetcode 704. 二分查找、35.搜索插入位置、34.在排序
    题目链接:704.二分查找-简单题目描述:给定一个n个元素有序的(升序)整型数组nums和一个目标值target,写一个函数搜索nums中的target,如果目标值存在返回下标,否则返回-1。示例1:输入:nums=[-1,0,3,5,9,12],target=9输出:4解释:9出现在nums中并且下标为4示......
  • Antd的ProTable高级表格缓存列设置
    1、目的:要将ProTable组件的列设置缓存到localStorage中,你可以使用浏览器的localStorageAPI。通过监听onColumnsStateChange事件,你可以在每次列的显示和隐藏状态发生变化时,将最新的列设置保存到localStorage中。然后,在组件初始化时,从localStorage中读取之前保存的列设......
  • ProTable双击可编辑
    要实现在AntDesign的Table组件中双击单元格修改内容,你可以通过以下步骤来实现:创建一个React组件,并引入所需的依赖:npminstallantd编写示例代码:importReact,{useState}from'react';import{Table,Input}from'antd';constEditableTable=()=>{c......
  • dremio source 禁用source 不可用禁止移除与反射的一些问题
    实际上dremio的反射比较有意思,而且也比较强大,比如我们可以会想通过反射,当上游系统不可用的时候依然可以查询但是实际效果并不是这样的参考配置如下问题Thesource[s3]iscurrentlyunavailable.Metadataisnotaccessible;pleasechecknodehealth(orexternals......
  • 947. 移除最多的同行或同列石头
    原题链接根据题意我们可以得到一个很有趣的结论:处于同一行或者同一列的石头是共处一个集合的,而一个集合最终可以消除到只剩一个石头。(可以实验一下)因此我们采取并查集实现。Code classSolution{public:intsum=0;intfather[1005];map<int,int>mapx;......
  • JS使用EditableProTable案例
    EditableProTable是AntDesignPro中的一个可编辑表格组件,可以方便地实现表格数据的编辑和更新。下面是一个简单的示例,演示如何在React中使用EditableProTable组件:首先,确保你已经安装了AntDesignPro相关的依赖包。然后,可以按照以下步骤创建一个简单的可编辑表格:1、创......
  • 使用JS来开发ProComponents的ProTable案例
    ProComponents的ProTable组件是基于React和TypeScript开发的,但也可以在JavaScript项目中使用。以下是一个使用JavaScript的ProTable示例:import{useState,useRef}from'react';import{Button}from'antd';importProTablefrom'@ant-design/pro-table&#......
  • 再测python3.13 —— python3.13是否移除了GIL的限制(续)
    前文:python3.13是否移除了GIL的限制x86_64ubuntu22.04环境下编译版本python3.13.0alpha0源码——python3.13.0alpha0的源码编译相关资料:PEP703–MakingtheGlobalInterpreterLockOptionalinCPythonhttps://github.com/python/cpython/issues/108223......
  • 代码随想录算法训练营第一天 | 27. 移除元素 | 704. 二分查找
     704.二分查找 已解答简单 相关标签相关企业 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。示例1:输入:numstarget输出:解释:nums......
  • [NOI2022] 移除石子
    [NOI2022]移除石子题目描述你正在玩一个名为“移除石子”的小游戏。有\(n\)堆石子排成一行,第\(i\)堆有\(a_i\)枚,你的任务是通过如下的操作将所有石子移除:操作一:选择一堆石子,将其中的至少\(2\)枚石子移除;操作二:选择一个连续的编号区间\([l,r]\)(\(1\lel\ler\l......