当我们在 antd 表中使用 rowSelection 在父行上选择时选择子行 [英] Select child rows when we select on the parent row using rowSelection in antd table

问题描述

我正在尝试使用 antd table 的行选择 reactjs.我正在尝试这个

当您选择一个parent 节点时，您可以从onSelect 函数中获取children 节点.同样，当您从 onSelectAll 函数中select/deselect 时，您可以获取所有节点.

您需要在state中存储所选parent节点及其子节点的那些keys.

要select/deselect 复选框，您需要将那些keys 设置/取消设置为selectedRowKeys，如下所示:selectedRowKeys: Array.from(selectedCBKeys) (selectedCBKeys = 父键 + 子键)

const rowSelection = {selectedRowKeys: Array.from(selectedCBKeys),onChange: (selectedRowKeys, selectedRows) =>{}，onSelect: (record, selected, selectedRows) =>{this.getKey(记录);},onSelectAll: (selected, selectedRows, changeRows) =>{changeRows.map(item => this.getKey(item));}};

如何获取父树子节点的所有key?

只需递归遍历父树.我像这样收集了所有的 keys:

getKey = 数据 =>{this.storeKey(data.key);//它只是将密钥存储在状态"中如果(数据.孩子){data.children.map(item => this.getKey(item));}};

这就是我存储所有密钥的方式.我使用了 Set.

 状态 = {selectedCBKeys: new Set()};storeKey = 键 =>{//如果键已经存在于状态"中，只需将其删除.//它有助于切换复选框..对吗?如果 (this.state.selectedCBKeys.has(key)) {const newSet = this.state.selectedCBKeys;newSet.delete(key);this.setState({selectedCBKeys:newSet});返回;}this.setState(prevState => ({...prevState,selectedCBKeys:prevState.selectedCBKeys.add(key)}));};

App.js

import { Table } from "antd";常量列 = [{title: "姓名",数据索引:名称"，键:名称"},{title: "年龄",数据索引:年龄"，关键:年龄"，宽度:12%"},{title: "地址",数据索引:地址"，宽度:30%"，键:地址"}];常量数据 = [{关键:1，name: "老约翰·布朗",年龄:60，地址:纽约一号湖公园"，孩子们: [{关键:11，姓名:约翰·布朗"，年龄:42，地址:纽约2号湖公园"},{关键:12，姓名:小约翰·布朗"，年龄:30，地址:纽约3号湖公园"，孩子们: [{关键:121，姓名:吉米布朗"，年龄:16，地址:纽约3号湖公园"}]}]},{关键:2，姓名:乔·布莱克"，年龄:32，地址:悉尼一号湖公园"}];类 App 扩展组件 {状态 = {selectedCBKeys: new Set()};storeKey = 键 =>{如果 (this.state.selectedCBKeys.has(key)) {const newSet = this.state.selectedCBKeys;newSet.delete(key);this.setState({selectedCBKeys:newSet});返回;}this.setState(prevState => ({...prevState,selectedCBKeys:prevState.selectedCBKeys.add(key)}));console.log("新密钥:", key);};getKey = 数据 =>{this.storeKey(data.key);如果(数据.孩子){data.children.map(item => this.getKey(item));}};使成为() {const { selectedCBKeys } = this.state;//rowSelection 对象表示需要行选择const rowSelection = {selectedRowKeys: Array.from(selectedCBKeys),onChange: (selectedRowKeys, selectedRows) =>{控制台.日志(`selectedRowKeys: ${selectedRowKeys}`,"selectedRows:",选定行);},onSelect: (record, selected, selectedRows) =>{this.getKey(记录);},onSelectAll: (selected, selectedRows, changeRows) =>{控制台.日志("onSelectAll:",选择，" selectedRows: ",选定的行，" changeRows: ",更改行);//selectedRows.map(item => this.getKey(item));changeRows.map(item => this.getKey(item));}};返回 (<div className="父级"><表列={列}行选择={行选择}数据源={数据}/>

);}}

这是关于 stackblitz 的演示.告诉我，

I'm trying rowselection reactjs using antd table.I'm trying this one ant-components-table-demo-expand-children

when I select parent row it must select child rows of that parent (it should tick mark the child rows).

this.rowSelection = {
    onSelect: (record, selected, selectedRows) => this.onSelectChange(record, selected, selectedRows),
    onSelectAll: (selected, selectedRows, changeRows) => this.allRowsSelected(selected, selectedRows, changeRows)
};


<Table
    rowKey={data._id}
    columns={this.columns1}
    rowSelection={this.rowSelection}
    expandedRowRender={(record, index, indent, expanded) =>
        this.expanding(record, expanded)                         
    }
    onExpand={this.onExpand}
    dataSource={data}
/>

解决方案

When you select a parent node, you can get the children nodes from onSelect function. Similarly, You can get all the nodes when you select/deselect from onSelectAll function.

You need to store those keys of selected parent node and it's children nodes in state.

To select/deselect checkboxes, you need to set/unset those keys to selectedRowKeys like so: selectedRowKeys: Array.from(selectedCBKeys) (selectedCBKeys = parent key + it's children keys)

const rowSelection = {
      selectedRowKeys: Array.from(selectedCBKeys),

      onChange: (selectedRowKeys, selectedRows) => {},

      onSelect: (record, selected, selectedRows) => {
        this.getKey(record);
      }, 

      onSelectAll: (selected, selectedRows, changeRows) => {
        changeRows.map(item => this.getKey(item));
      }
    };

How to get all the keys of children nodes of a parent tree?

Just recursively traverse the parent tree. I collected all the keys like so:

getKey = data => {
    this.storeKey(data.key); //it just stores the key in "state"
    if (data.children) {
      data.children.map(item => this.getKey(item));
    }
  };

This is how I stored all the keys. I used Set.

 state = {
    selectedCBKeys: new Set()
  };

  storeKey = key => {

    //If the key is already present in "state" just delete it. 
     //It helps in toggling the checkboxes.. right?

    if (this.state.selectedCBKeys.has(key)) { 
      const newSet = this.state.selectedCBKeys;
      newSet.delete(key);
      this.setState({
        selectedCBKeys: newSet
      });
      return;
    }

    this.setState(prevState => ({
      ...prevState,
      selectedCBKeys: prevState.selectedCBKeys.add(key)
    }));
  };

App.js

import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: "12%"
  },
  {
    title: "Address",
    dataIndex: "address",
    width: "30%",
    key: "address"
  }
];

const data = [
  {
    key: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        key: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park"
      },
      {
        key: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            key: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park"
          }
        ]
      }
    ]
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  }
];

class App extends Component {
  state = {
    selectedCBKeys: new Set()
  };

  storeKey = key => {
    if (this.state.selectedCBKeys.has(key)) {
      const newSet = this.state.selectedCBKeys;
      newSet.delete(key);
      this.setState({
        selectedCBKeys: newSet
      });
      return;
    }
    this.setState(prevState => ({
      ...prevState,
      selectedCBKeys: prevState.selectedCBKeys.add(key)
    }));
    console.log("new keys: ", key);
  };

  getKey = data => {
    this.storeKey(data.key);
    if (data.children) {
      data.children.map(item => this.getKey(item));
    }
  };
  render() {
    const { selectedCBKeys } = this.state;
    // rowSelection objects indicates the need for row selection
    const rowSelection = {
      selectedRowKeys: Array.from(selectedCBKeys),
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        this.getKey(record);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(
          "onSelectAll: ",
          selected,
          " selectedRows: ",
          selectedRows,
          " changeRows: ",
          changeRows
        );
        // selectedRows.map(item => this.getKey(item));
        changeRows.map(item => this.getKey(item));
      }
    };
    return (
      <div className="parent">
        <Table
          columns={columns}
          rowSelection={rowSelection}
          dataSource={data}
        />
      </div>
    );
  }
}

Here is the demo on stackblitz. Let me know,

这篇关于当我们在 antd 表中使用 rowSelection 在父行上选择时选择子行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！