antd树形列表

已于 2022-12-02 14:16:22 修改
阅读量905 收藏 2
点赞数
分类专栏： 关于antdp 文章标签： 前端
于 2022-12-02 14:14:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nwsgoodstudy/article/details/128147188
版权

 

 

import React, { Component } from 'react';
import { Table, Divider, Tag, Icon, Checkbox, Tree, Button } from 'antd';
class index extends Component {
  state = {
    data: [
      {
        key: "product",
        order: "1",
        title: "产品",
        data: {
          code: "product",
          enable_edt: "N",
          enable_view: "Y",
          has_edit: null,
          has_view: "N",
          name: "产品"
        },
        children: [
          {
            key: "fund_info",
            order: "2",
            title: "产品信息",
            data: {
              code: "fund_info",
              enable_edt: "N",
              enable_view: "Y",
              has_edit: null,
              has_view: "N",
              name: "产品信息"
            },
            children: [
              {
                key: "fund_base_info",
                order: "3",
                title: "基本信息",
                data: {
                  code: "fund_base_info",
                  enable_edt: "N",
                  enable_view: "Y",
                  has_edit: null,
                  has_view: "N",
                  name: "基本信息"
                },
                children: [
                  {
                    key: "field_cplx",
                    order: "4",
                    title: "产品类型",
                    data: {
                      code: "field_cplx",
                      enable_edt: "N",
                      enable_view: "Y",
                      has_edit: null,
                      has_view: "N",
                      name: "产品类型"
                    },
                    children: []
                  },
                  {
                    key: "field_cpqc",
                    order: "5",
                    title: "产品全称",
                    data: {
                      code: "field_cpqc",
                      enable_edt: "N",
                      enable_view: "Y",
                      has_edit: null,
                      has_view: "N",
                      name: "产品全称"
                    },
                    children: []
                  }
                ]
              },
              {
                key: "fund_sale_info",
                order: "26",
                title: "销售信息",
                data: {
                  code: "fund_sale_info",
                  enable_edt: "N",
                  enable_view: "Y",
                  has_edit: null,
                  has_view: "N",
                  name: "销售信息"
                },
                children: []
              }
            ]
          },
          {
            key: "fund_role_info",
            order: "97",
            title: "岗位信息",
            data: {
              code: "fund_role_info",
              enable_edt: "N",
              enable_view: "Y",
              has_edit: null,
              has_view: "N",
              name: "岗位信息"
            },
            children: []
          }
        ]
      }
    ],//数据
    columns: [], //表格columns
    permissionTableData: [],//权限树，表格数据
    editFlag: false,//是否为编辑状态
    changeData: [],//checkbox改变后得数据
    loading: true,//loading状态
    yTreeData: [],//原始树形数据
  }

  componentDidMount() {
    this.getRolePermissonTree();
  }
  //给子级添加父级Key
  addParentKeyWrapper = (tree) => {
    //深度克隆
    const data = JSON.parse(JSON.stringify(tree));
    function addParentKey(data, parentKey) {
      data.forEach(ele => {
        const { children } = ele;
        ele.data.parent_code = parentKey;
        if (children) {//如果唯一标识不是code可以自行改变
          addParentKey(children, ele.data.code)
        }
      })
    }
    addParentKey(data, null); //一开始为null,根节点没有父级
    return data;
  }
  getRolePermissonTree = () => { //项目中这里是请求接口
    this.setState({
      loading: true
    })
    let { data } = this.state; //实际上这个data是从接口来的
    let parentData = this.addParentKeyWrapper(data);//添加父级属性
    this.initData(parentData, "has_view");
    this.initData(parentData, "has_edit");
    let copyData = JSON.stringify(parentData); //备份原始数据
    let col = [
      {
        title: '菜单名称',
        dataIndex: 'data.name'
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_view',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={true}//是否仅用
                indeterminate={record['has_viewindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_edit',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={true}//是否仅用
                indeterminate={record['has_editindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      }
    ]
    this.setState({
      permissionTableData: parentData,
      loading: false,
      yTreeData: copyData,
      columns: col
    })
  }
  //初始化数据
  initData = (data, type) => {
    data.map((item) => {
      // console.log(item)
      item[type + 'indeterminate'] = false;
      if (item.children.length > 0) {
        this.initData(item.children, type)
        // console.log(item.children, "999")
        let allSelect = item.children.every((item1) => {
          return item1.data[type] == "Y" && item1[type + "indeterminate"] == false;
        })
        let someSelect = item.children.some((item1) => {
          return item1.data[type] == "Y";
        })
        if (allSelect) {
          item.data[type] = "Y"
          item[type + 'indeterminate'] = false;
        } else if (someSelect) {
          item.data[type] = "Y"
          item[type + 'indeterminate'] = true;
        } else {
          item.data[type] = "N"
          item[type + 'indeterminate'] = false;
        }
      }
    })
  }
  //根据code(唯一标识)找到其值
  getItem = (code) => {
    let { permissionTableData } = this.state;
    let value;
    let loops = (data, code) => {
      data.map((item, index) => {
        if (item.data.code == code) {
          value = item;
        }
        if (item.children.length > 0) {
          loops(item.children, code);
        }
      })
    }
    loops(permissionTableData, code);
    return value;
  }

  //checkbox循环事件  flag是否选中 code唯一标识  type查看或者编辑
  changeFlag = (flag, code, type) => {
    let { permissionTableData } = this.state;
    //递归循环
    let loops = (data, flag, code, type) => {
      data.map((item, index) => {
        if (item.data.code == code) {
          item.data[type] = flag ? "Y" : "N";
          item[type + 'indeterminate'] = false;
          if (item.data.parent_code) {
            //子级选中父级也选中
            let childAndParent_Select = (code, type) => {
              let parent = this.getItem(code);
              if (parent.children.length > 0) {
                let all = parent.children.every((item1) => {
                  return item1.data[type] == "Y"&&item1[type + "indeterminate"] == false;
                })
                let some = parent.children.some((item1) => {
                  return item1.data[type] == "Y";
                })
                if (all) {
                  parent[type + 'indeterminate'] = false;
                  parent.data[type] = "Y"
                } else if (some) {
                  parent[type + 'indeterminate'] = true;
                  parent.data[type] = "Y"
                } else {
                  parent[type + 'indeterminate'] = false;
                  parent.data[type] = "N"
                }
              }
              if (parent.data.parent_code) {
                childAndParent_Select(parent.data.parent_code, type)
              }
            }
            childAndParent_Select(item.data.parent_code, type);
          }
          if (item.children.length > 0) {
            //父亲选中，子级全选中，实现全选反选
            let parentAndChild_Select = (data, flag, type) => {
              data.map((item1, index) => {
                item1.data[type] = flag ? "Y" : "N";
                item1[type + 'indeterminate'] = false;
                if (item1.children.length > 0) {
                  parentAndChild_Select(item1.children, flag, type);
                }
              })
            }
            parentAndChild_Select(item.children, flag, type);
          }
        }

        if (item.children.length > 0) {
          loops(item.children, flag, code, type);
        }
      })
    }
    loops(permissionTableData, flag, code, type);
    this.setState({
      permissionTableData: permissionTableData
    }, () => {
      console.log(this.state)
    })
  }
  //查看checkbox onchange事件 e--chekcbox值 code当前唯一标识
  ViewonChange = (e, code, type) => {
    let flag = e.target.checked;
    this.changeFlag(flag, code, type);
  }
  //编辑checkbox onchange事件 e--chekcbox值 code当前唯一标识
  EditonChange = (e, code, type) => {
    let flag = e.target.checked;
    this.changeFlag(flag, code, type);
  }
  //Y与N和true/false的转换
  transformation = (text) => {
    if (text == "Y") {
      return false;
    } else if (text == "N") {
      return true;
    } else {
      return false;
    }
  }

  //编辑配置
  editMenu = () => {
    let col = [
      {
        title: '菜单名称',
        dataIndex: 'data.name'
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_view',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={this.transformation(record.data.enable_view)}//是否仅用
                onChange={(e) => this.ViewonChange(e, record.data.code, "has_view")}//change事件
                indeterminate={record['has_viewindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_edit',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={this.transformation(record.data.enable_edit)}//是否仅用
                onChange={(e) => this.EditonChange(e, record.data.code, "has_edit")}//change事件
                indeterminate={record['has_editindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      }
    ]
    this.setState({
      editFlag: true,
      columns: col
    })
  }
  //扁平化数组（tree）变为一维数组
  FlatArray = (data, val) => {
    if (data.length == 0) {
      return [];
    }
    let arr = [];
    data.map((item) => {
      arr.push(item.data);
      if (item.children.length > 0) {
        arr = arr.concat(this.FlatArray(item.children));
      }
    })
    return arr;
  }
  //保存
  saveMenu = () => {
    let { permissionTableData, yTreeData } = this.state;
    let col = [
      {
        title: '菜单名称',
        dataIndex: 'data.name'
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_view',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={true}//是否仅用
                indeterminate={record['has_viewindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      },
      {
        title: '查看权限',
        dataIndex: 'data.has_edit',
        render: (text, record) => {
          return (
            <>
              <Checkbox //参考antd Checkbox API
                checked={text == "Y" ? true : false}//是否选中
                disabled={true}//是否仅用
                indeterminate={record['has_editindeterminate'] ? true : false} //全选与反选状态
              >

              </Checkbox>
            </>
          )
        }
      }
    ]
    this.setState({
      editFlag: false,
      columns: col
    })
  }
  //对比差异 传两个数组找出变化的项
  ContrastDifferences = (data1, data) => {
    if (data1.length == 0 || data.length == 0) {
      return [];
    }
    let changeArr = [];
    data1.map((item, index) => {
      if (item.has_view != data[index].has_view || item.has_edit != data[index].has_edit) {
        changeArr.push(item);
      }
    })
    return changeArr;
  }
  render() {
    const { columns, permissionTableData, loading, editFlag } = this.state;
    return (
      <div>

        {
          editFlag ? <Button onClick={this.saveMenu}>保存</Button> : <Button onClick={this.editMenu}>编辑</Button>
        }
        <Table //参考antd Table API
          columns={columns} //表格表头
          dataSource={permissionTableData}//表格数据
          loading={loading} //loading状态
          scroll={{ y: 400, x: 1000 }} //滚动
          pagination={false} //分页
        ></Table>
      </div>
    )
  }

}
export default index;

 

$Ni
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树形列表
珍妮的小罐君
02-21 467
树形列表的展开与收缩 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; }
treeTable树形
08-14
treeTable树形 有例子，简单易用
为antd树形table加上连接线
最新发布
qq_43760344的博客
06-20 694
基于antd的树形table来实现缩进连接线
Ant Design：树形表格
闪电⚡之王的博客简介
12-27 999
【代码】Ant Design：树形表格。
antdv 树形表格（配合jeecg）
魏知非的博客
03-18 1971
项目需求用到了树形表格，目前暂不支持父子数据递归查询所以就手动改造了一下。 官网table： Ant Design Vue 原理：通过监听@expand，手动改变children里的数据。 HTML <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于...
会员树，树形结构，分销用户关系树
09-27
项目中经常会出现分销功能，会员树能直观的展示各级用户之间的关系。 核心代码是vue写的。因为我用的后台框架是layui，所以将vue代码融入到layui中了，可以直接把vue代码提取出来直接用。代码中用到的js文件html文件...
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
antd 表格树如何展开_React Ant Design树形表格的复杂增删改
weixin_39893728的博客
01-26 2217
React Ant Design树形表格的复杂增删改​ 最近由于业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中碰见了很多坑，不少功能antd只写了初步的功能，更为细化的功能只能本身完善。踩过的坑都写在了这里。javascript树形表格的显示​ 在antd中对于表格的key值有着严格的控制，每个row都必须有一个独一无二的key值，能够是数字也能够是字符串。这一点和...
树形列表html
10-13
树形列表
List树形列表界面
12-28
List树形列表界面。 简洁漂亮。
react-antd-treetable:Ant基于Antd二次开发的树状表格组件，支持懒加载，分页，过滤等功能
03-08
欢迎来到react-antd-treetable :waving_hand: 介绍 基于antd表组件封装，比较适合用于展示的信息。 主要扩展的能力： 层级缩进指示线 远程懒加载子例程 子公告分页 子例程筛选 子每秒空提示 这些功能全部通过插件实现，其他的props全部继承自Ant Design的Table组件。 用法 需要依赖antd ， @ant-design/icons npm i react-antd-treetable -S 最简单的用法和antd的表组件完全一致，数据中带有children分割即可： import React from 'react' ; import TreeTable from 'react-antd-treetable' ; const data = [ { name : 'foo' , children : [ { name
树形菜单栏（html）
05-03
树形菜单栏（html），树形菜单栏（html），树形菜单栏（html）
antd table树形表格一键展开/折叠
m0_69439101的博客
08-11 3016
antd树形表格的展开与折叠只需关注 expandedRowKeys属性 与 expandedRowsChange 事件，expandedRowKeys为表格数据id组成的数组，expandedRowsChange 表格展开与折叠时触发的回调。
简单树型列表（展示，编辑用）
CSDN025的博客
07-05 2075
千万年想起来发一篇博文，博大家一乐吧。 自己设想的效果：树型展示，开开闭闭，能取自己、父级等的id（以便编辑删除等）。 别的废话少说，上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>power</title> <link href="./js/layui/css/layui.css" rel="stylesheet" />
note_37：树形列表
Blog
03-28 310
树形列表 缩进目录 文章目录树形列表缩进目录1. 打印列表2. 树形列表 假设json数据的bean类如下： DataBean.java public class DataBean { private List<MainChapterBean> mainChapterList; public List<MainChapterBean> getMainChapte...
列表实现树形菜单
Just The Way You Are
08-21 1037
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可展开列表</title> <style> .open{ list-style-image: url(img/add.png); } .close{ list-s
antd树形组件实现增删改查 react
05-15
Antd是一款基于React框架的UI组件库，其中包括了树形组件。在实现增删改查的功能方面，Antd树形组件可以非常方便地应用。 首先，对于增加节点的功能，Antd树形组件提供了一个方法——onAdd，通过该方法可以添加一个新节点，例如： ``` onAdd = (parentId) => { const { treeData } = this.state; const parent = findNodeById(treeData, parentId); const newChild = { id: uuid(), title: 'New Node', children: [] }; parent.children.push(newChild); this.setState({ treeData }); } ``` 其次，对于删除节点的功能，Antd树形组件同样提供了一个方法——onRemove，通过该方法可以删除指定节点，例如： ``` onRemove = (nodeId) => { const { treeData } = this.state; const parent = findParentNode(treeData, nodeId); parent.children = parent.children.filter((child) => child.id !== nodeId); this.setState({ treeData }); } ``` 在实现修改节点的功能方面，Antd树形组件可以实现节点的编辑功能，可以通过双击节点文字来实现编辑。 最后，在实现查找节点的功能方面，Antd树形组件提供了相关的方法供开发人员使用，例如： ``` findNodeById(treeData, id) { for (let i = 0; i < treeData.length; i++) { const node = treeData[i]; if (node.id === id) { return node; } else if (node.children.length > 0) { const foundNode = this.findNodeById(node.children, id); if (foundNode) { return foundNode; } } } return null; } ``` 总的来说，借助Antd树形组件，实现增删改查的功能非常方便。实现这些功能的关键是要深入了解Antd树形组件的API，并结合业务需求进行开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值