react中antd低版本treetable父子节点交互联动

在react中使用antd组件库开发的时候,低版本没有这个交互。
在这里插入图片描述

import {Component} from 'react';
import {Table} from 'ygd';
const treeData = [
  {
    id: '1',
    pid: '0',
    level: 0,
    children: [
      {
        id: '1-1',
        pid: '1',
        level: 1,
        children: [
          {
            id: '1-1-1',
            pid: '1-1',
            level: 2,
          },
        ],
      },
      {
        id: '1-2',
        pid: '1',
        level: 1,
        children: [
          {
            id: '1-2-1',
            pid: '1-2',
            level: 2,
          },
        ],
      },
    ],
  },
  {
    id: '2',
    pid: '0',
    level: 0,
    children: [
      {
        id: '2-1',
        pid: '2',
        level: 1,
        children: [
          {
            id: '2-1-1',
            pid: '2-1',
            level: 2,
          },
          {
            id: '2-1-2',
            pid: '2-1',
            level: 2,
          },
        ],
      },
    ],
  },
];
class TreeTable extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectRowKeys: [],
    };
  }

  handleOnDatalevel=(record) => {
    const datalevel = [
      this.handleOnFirstlevel(record),
      this.handleOnTwolevel(record),
      this.handleOnThreelevel(record),
    ];
    return datalevel[record.level];
  }

  handleOnFirstlevel=(record) => <span>{record.level}</span>

  handleOnTwolevel=(record) => <span>{record.level}</span>

  handleOnThreelevel=(record) => <span>{record.level}</span>

  // 设置父级选择
  handleOnSetParentCheck(set, id) {
    let parent = this.getParent(treeData, id);
    if (parent) {
      set.add(parent.id);
      this.handleOnSetParentCheck(set, parent.id);
    }
    return set;
  }

  // 设置父级取消
  handleOnSetParentUncheck=(set, id) => {
    let checkedParent = false;
    let parent = this.getParent(treeData, id);
    if (parent) {
      let childlist = parent.children;
      childlist.forEach((v) => {
        if (set.has(v.id)) {
          checkedParent = true;
        }
      });
      if (!checkedParent) {
        set['delete'](parent.id);
        this.handleOnSetParentUncheck(set, parent.id);
      }
    }
    return set;
  }

  // 设置child全选
  handleOnSetChildCheck=(set, list) => {
    const _that = this;
    list.forEach(function(v) {
      set.add(v.id);
      v.children && _that.handleOnSetChildCheck(set, v.children);
    });
    return set;
  }

  // 设置child取消
  handleOnSetChildUncheck=(set, list) => {
    const _that = this;
    list.forEach(function(v) {
      set['delete'](v.id);
      v.children && _that.handleOnSetChildUncheck(set, v.children);
    });
    return set;
  }

  // 获取当前对象的父级
  getParent=(tabData, id) => {
    for (let i = 0; i < tabData.length; i++) {
      if (tabData[i].id === id) {
        return null;
      }
    }
    return _getParent(tabData);
    function _getParent(list) {
      let childlist = false;
      let isExist = false;
      for (let i = 0; i < list.length; i++) {
        if ((childlist = list[i].children)) {
          for (var key in childlist) {
            if (childlist[key].id === id) {
              isExist = true;
            }
          }
          if (isExist) {
            return list[i];
          }
          if (_getParent(childlist)) {
            return _getParent(childlist);
          }
        }
      }
    }
  }

  handleOnTableSelect=(record, selected) => {
    const {selectRowKeys} = this.state;
    const set = new Set(selectRowKeys);
    const id = record.id;
    if (selected) {
      set.add(id);
      record.children && this.handleOnSetChildCheck(set, record.children);
      this.handleOnSetParentCheck(set, id);
    } else {
      set['delete'](id);
      record.children && this.handleOnSetChildUncheck(set, record.children);
      this.handleOnSetParentUncheck(set, id);
    }
    this.setState({
      selectRowKeys: Array.from(set),
    });
  }

  render() {
    const {selectRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys: selectRowKeys,
      onSelect: this.handleOnTableSelect,
      getCheckboxProps: (record) => ({
        disabled: record.level === 2,
      }),
    };
    const columns = [{
      key: 'id',
      render: (record) => this.handleOnDatalevel(record),
    }];
    return (
      <Table
        rowKey={(record) => record.id}
        columns={columns}
        dataSource={treeData}
        showHeader={false}
        rowSelection={rowSelection}
        rowClassName={(record) => record.level === 0 ? 'firstlevel' : (record.level === 2 ? 'lastlevel' : '')}
      />
    );
  }
}
export default TreeTable;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值