React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构

最新推荐文章于 2024-02-04 17:22:59 发布
最新推荐文章于 2024-02-04 17:22:59 发布
阅读量2.1w 收藏 20
点赞数 6
分类专栏： React 文章标签： React ant design menu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roamingcode/article/details/81697578
版权

引言

最近要做一个组织机构树的树级菜单展示，UI框架使用的是Ant Design,这不正好可以使用Tree组件，如图示
原始图片
奈何领导说太丑，指明要换成类似Menu形式的树形菜单，如图示
修改后图片

于是乎，有两种修改方案

  • 先考虑改造Tree控件，这其中不仅需要修改css,还要修改Tree的内部结构
  • 不使用Tree控件直接使用Menu导航菜单，在其上添加所需要的功能

这里采用第二种方案，首先确认需要在其上添加的功能，主要包括：
1. 节点异步加载功能（打开某个部门时，异步加载该部门下的子部门及其成员）
2. 全局检索功能（在搜索框输入内容时，对菜单执行检索、高亮显示匹配的菜单并自动打开匹配菜单的所有父级菜单），见下图
3. 右键对本节点菜单进行编辑、子节点的添加、删除（视具体业务逻辑而定）
搜索图片

全局代码（未经优化）

全局状态管理使用mobx,具体可以查看相关文档
Tree.js

import React from "react";
import { inject, observer } from "mobx-react";
import {addSubmenuSelected, removeSubmenuSelected} from '../utils/common';
import { Menu, Icon, Input } from "antd";
import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
import '../assets/css/tree.css';
const SubMenu = Menu.SubMenu;

/*组织节点扁平化列表*/
let dataList = [];

/* 父节点列表 */
let parentList = [];

const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const nodeId = node.nodeId;
        dataList.push({nodeId, name: node.name, parentNodeId: node.parentNodeId});
        if (node.children.length > 0) {
            generateList(node.children);
        }
    }
};

const getParentKey = (nodeId, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children.length > 0) {
            if (node.children.some(item => item.nodeId === nodeId)) {
                parentKey = node.nodeId;
            } else if (getParentKey(nodeId, node.children)) {
                parentKey = getParentKey(nodeId, node.children);
            }
        }
    }
    return parentKey;
};

const getAllParentKey = (parentIds) => {
    if (parentIds.length === 0) {
        return;
    }
    let ids = [];
    parentIds.forEach(item => {
        if (!parentList.includes(item)) {
            parentList.push(item);
        }
        dataList.forEach(node => {
            if (node.nodeId === item) {
                if (node.parentNodeId !== null && !ids.includes(node.parentNodeId)) {
                    ids.push(node.parentNodeId);
                }
            }
        });
    });
    return getAllParentKey(ids);
};

const getDatasetNode = (currentNode) => {
    let current = currentNode;
    while (current.nodeName !== 'LI') {
        current = current.parentNode;
    }
    return current;
};

/*节点自增标示*/
let count = 10;

@inject("rootStore")
@observer
class Tree extends React.Component {
    state = {
        searchValue: "",
        selectedKeys: [],
        openKeys: [],
        rightClickNode: null
    };

    componentDidMount() {
        document.querySelector('.react-contextmenu-wrapper').addEventListener('contextmenu', this.handleRightClick);
    }

    componentWillUnmount() {
        document.querySelector('.react-contextmenu-wrapper').removeEventListener('contextmenu', this.handleRightClick);
    }

    renderIcon = (type, flag) => {
        switch (type) {
            case 'ROOT':
                return (
                    <Icon type="home" style={ flag === 1? {color: '#00EE76'} : {}} />
                );
            case 'GROUP':
                return (
                    <Icon type="usergroup-add" style={ flag === 1? {color: '#00EE76'} : {}} />
                );
            case 'BUSINESS':
                return (
                    <Icon type="bank" style={ flag === 1? {color: '#00EE76'} : {}} />
                );
            case 'LOADING':
            return (
                <Icon type="loading" style={flag === 1? {color: '#00EE76'} : {}}></Icon>
            );
            default:
                return (
                    <Icon type="team" style={ flag === 1? {color: '#00EE76'} : {}} />
                );
        }
    };

    loop = data => data.map(item => {
        let {searchValue} = this.state;
        const index = item.name.indexOf(searchValue);
        const beforeStr = item.name.substr(0, index);
        const afterStr = item.name.substr(index + searchValue.length);
        const title = index > -1 ? (
            <span>
                {this.renderIcon(item.nodeType, searchValue? 1 : 2)}
                {beforeStr}
                <span style={{color: '#00EE76'}}>{searchValue}</span>
                {afterStr}
            </span>
        ) : <span>
                {this.renderIcon(item.nodeType, 2)}
                <span>{item.name}</span>
            </span>;
        if (item.canDeploy) {
            return (
                <SubMenu
                    key={item.nodeId}
                    data-id={item.nodeId}
                    data-privilege={item.privilege}
                    onTitleClick={this.handleTitleClick(item)}
                    title={title}
                >
                    {this.loop(item.children)}
                </SubMenu>
            );
        }
        return (
            <Menu.Item key={item.nodeId} data-id={item.nodeId} data-privilege={item.privilege}>
                {title}
            </Menu.Item>
        );
    });

    handleChange = (e) => {
        const value = e.target.value;
        let {treeData} = this.props.rootStore.treeStore;
        /* 获取包含搜索内容的所有节点key */
        let openKeys = dataList.map((item) => {
            if (item.name.indexOf(value) > -1) {
                return getParentKey(item.nodeId, treeData);
            }
            return null;
        }).filter((item, i, self) => item && self.indexOf(item) === i);
        /* 重置需要展开的父节点id */
        parentList = [];
        /* 将所选中的内容的节点id的全部父节点id写入parentList中 */
        getAllParentKey(openKeys);
        openKeys = parentList;
        this.setState({
            openKeys,
            searchValue: value,
        });
    };

    handleClick = e => {
        /* 每个menuItem绑定点击事件 */
        console.log("click ", e);
    };

    handleOpenChange = (openKeys) => {
        /* 可获取当前所有已经打开面板的key列表 */
        // console.log(openKeys);
        this.setState({
            openKeys
        });
    };

    handleAsyncLoadData = (treeNode) => {
        let nodeTypeTemp = treeNode.nodeType;
        treeNode.nodeType = 'LOADING';
        return new Promise((resolve) => {
            if (treeNode.children.length > 0) {
                treeNode.nodeType = nodeTypeTemp;
                resolve();
                return;
            }
            setTimeout(() => {
                treeNode.nodeType = nodeTypeTemp;
                treeNode.children = [
                    { name: 'Child' + count, nodeId: (count++ + ''), parentNodeId: treeNode.nodeId, nodeType: 'GROUP', children: [], canDeploy: true, privilege: 7 },
                    { name: 'Child' + count, nodeId: (count++ + ''), parentNodeId: treeNode.nodeId, nodeType: 'GROUP', children: [], canDeploy: false, privilege: 7 },
                ];
                resolve();
            }, 2000);
        });
    };

    handleTitleClick = (treeNode) => ({key, domEvent}) => {
        // console.log(key);
        addSubmenuSelected(domEvent);
        this.setState({
            selectedKeys: []
        });
        this.handleAsyncLoadData(treeNode);
    };

    handleSelect = ({ item, key, selectedKeys }) => {
        /* 只有menuItem才能选中，选中会执行该函数 */
        console.log(item, key, selectedKeys);
        removeSubmenuSelected();
        this.setState({
            selectedKeys
        });
    };

    loopAdd = (node, data) => {
        data.forEach((item) => {
            if (node.parentNodeId === item.nodeId) {
                console.log(item);
                item.canDeploy = true;
                item.children.push(node);
                /* this.setState({
                    openKeys: this.state.openKeys.concat(item.nodeId)
                }); */
                return 1;
            } else {
                if (item.children.length > 0) {
                    return this.loopAdd(node, item.children);
                }
            }
        });
    };

    loopEdit = (node, data) => {
        data.forEach((item) => {
            if (node.nodeId === item.nodeId) {
                Object.keys(node).forEach(key => {
                    if (key !== 'children') {
                        item[key] = node[key];
                    }
                });
                return 1;
            } else {
                if (item.children.length > 0) {
                    return this.loopEdit(node, item.children);
                }
            }
        });
    };

    loopDelete = (parentId, nodeId, data) => {
        console.log(parentId, nodeId);
        data.forEach((item) => {
            if (parentId === item.nodeId) {
                let index = 0;
                item.children.forEach((child, key) => {
                    if (child.nodeId === nodeId) {
                        index = key;
                    }
                });
                // this.props.rootStore.accountStore.updateSelectedNode(item);
                item.children.splice(index, 1);
                return 1;
            } else {
                if (item.children.length > 0) {
                    return this.loopDelete(parentId, nodeId, item.children);
                }
            }
        });
    };

    /* 右键点击处理 */
    handleMenuItemClick = (e, data) => {
        e.preventDefault();
        let {treeData} = this.props.rootStore.treeStore;
        console.log(data);
        switch (data.status) {
            case 0:
                /* 添加节点 */
                this.loopAdd({
                    name: 'Child' + count,
                    nodeId: (count++ + ''),
                    parentNodeId: data.nodeId, 
                    nodeType: 'GROUP', 
                    children: [],
                    privilege: '1', 
                    canDeploy: true
                }, treeData);
                break;
            case 1: 
                this.loopEdit({
                    name: 'edit' + count,
                    nodeId: data.nodeId,
                    parentNodeId: data.nodeId, 
                    nodeType: 'GROUP', 
                    children: [],
                    privilege: '1', 
                    canDeploy: true
                }, treeData);
                break;
            case 2:
                this.loopDelete('2', data.nodeId, treeData);
                break;
            default:
                return;
        }
        // 右键处理完毕后，重置右击节点数据
        this.setState({
            rightClickNode: null
        });
    };

    handleRightClick = (event) => {
        // console.log(event.target);
        let dataNode = getDatasetNode(event.target);
        this.setState({
            rightClickNode: dataNode.dataset
        });
        // console.log(dataNode.dataset);
    };

    render() {
        let { treeData } = this.props.rootStore.treeStore;
        let {selectedKeys, searchValue, openKeys, rightClickNode} = this.state;
        /* 节点扁平化处理 */
        dataList = [];
        generateList(treeData);
        return (
            <div className="tree">
                <Input style={{marginBottom: '50px'}} placeholder="search value" value={searchValue} onChange={this.handleChange} />
                <ContextMenuTrigger id="context-menu" holdToDisplay={1000}>
                    <Menu
                        onClick={this.handleClick}
                        style={{ width: "100%" }}
                        onOpenChange={this.handleOpenChange}
                        mode="inline"
                        theme="dark"
                        openKeys={openKeys}
                        selectedKeys={selectedKeys}
                        onSelect={this.handleSelect}
                    >
                        {this.loop(treeData)}
                    </Menu>
                </ContextMenuTrigger>
                <ContextMenu id="context-menu">
                    <MenuItem
                        onClick={this.handleMenuItemClick}
                        disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false}
                        data={{nodeId: rightClickNode? rightClickNode.id : '', status: 0}}
                    >
                        添加
                    </MenuItem>
                    <MenuItem
                        onClick={this.handleMenuItemClick}
                        disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false}
                        data={{nodeId: rightClickNode? rightClickNode.id : '', status: 1}}
                    >
                        编辑
                    </MenuItem>
                    <MenuItem divider />
                    <MenuItem
                        onClick={this.handleMenuItemClick}
                        disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false}
                        data={{nodeId: rightClickNode? rightClickNode.id : '', status: 2}}
                    >
                        删除
                    </MenuItem>
                </ContextMenu>
            </div>
        );
    }
}

export default Tree;

common.js

export const removeSubmenuSelected = function () {  
    document.querySelectorAll('.submenu-selected').forEach((domNode) => {
        domNode.classList.remove('submenu-selected');
    });
};

export const addSubmenuSelected = function (domEvent) {  
    document.querySelectorAll('.submenu-selected').forEach((domNode) => {
        domNode.classList.remove('submenu-selected');
    });
    domEvent.currentTarget.classList.add('submenu-selected');
}

treeStore.js

import {observable, action} from 'mobx';

class TreeStore {
    constructor(rootStore) {
        this.rootStore = rootStore;
    }

    @observable treeData = [{
        name: 'parent1',
        nodeId: '1',
        nodeType: 'ROOT',
        canDeploy: true,
        privilege: '7',
        parentNodeId: null,
        children: [
            {
                name: 'parent2',
                nodeId: '2',
                nodeType: 'GROUP',
                canDeploy: true,
                parentNodeId: '1',
                privilege: '0',
                children: [
                    {
                        name: 'leaf1',
                        nodeId: '3',
                        parentNodeId: '2',
                        nodeType: 'GROUP',
                        canDeploy: true,
                        children: [],
                        privilege: '7'
                    },
                    {
                        name: 'leaf2',
                        nodeId: '4',
                        parentNodeId: '2',
                        nodeType: 'BUSINESS',
                        canDeploy: false,
                        children: [],
                        privilege: '7'
                    },
                    {
                        name: 'leaf3',
                        nodeId: '5',
                        parentNodeId: '2',
                        privilege: '7',
                        nodeType: 'TEAM',
                        canDeploy: true,
                        children: []
                    }
                ]
            },
            {
                name: 'parent3',
                nodeId: '6',
                parentNodeId: '1',
                nodeType: 'GROUP',
                canDeploy: true,
                privilege: '7',
                children: [
                    {
                        name: 'leaf4',
                        nodeId: '7',
                        parentNodeId: '6',
                        privilege: '7',
                        nodeType: 'GROUP',
                        children: []
                    },
                    {
                        name: 'leaf5',
                        nodeId: '8',
                        parentNodeId: '6',
                        nodeType: 'BUSINESS',
                        privilege: '7',
                        children: []
                    },
                    {
                        name: 'leaf6',
                        nodeId: '9',
                        parentNodeId: '6',
                        nodeType: 'TEAM',
                        privilege: '0',
                        children: []
                    }
                ]
            },
        ]
    }];

    /*更新树,该方法未使用*/
    @action updateTree(treeData) {
        this.treeData = treeData;
    }
}

export default TreeStore;

异步节点加载

  1. 节点结构的抽离具体体现在 loop方法，其中直接修改使用了一部分Tree控件的代码，其中有一个重要字段canDeploy，代表当前节点下是否有子节点，是一个分界值。
  2. 当有子节点的话肯定是可以打开的，点击的时候调用handleTitleClick方法，该方法的调用可以直接查看Ant Design官方API文档，接着为当前点击的节点添加激活状态，见common.js,当叶子节点选中时见handleSelect方法，这个时候要修改Menu组件的selectedKeys选项，其中只有叶子节点才有selectedKeys配置。
  3. 调用接口进行异步节点的加载见handleAsyncLoadData方法，该方法在请求过程中以更换Icon的方式来显示loading效果，如果当前节点下面已有子节点列表，说明该节点被打开过，无需再次加载，没有子节点的话，打开后会默认填充假节点数据，填充后即可展示。

全局检索

  1. 关注搜索框的handleChange方法，其中dataList是将整个树形菜单的数据进行拉平处理的产物，执行遍历找到所有匹配内容的节点的父节点，因为要自动打开匹配内容节点的所有父级节点，所以使用getAllParentKey方法来获取上一步获得的父节点的所有父节点，将这写需要打开的父节点装到parentList里面，将它赋值给Menu配置项openKeys即可实现匹配内容节点的父节点实现自动打开。

右键编辑、添加、删除

这里实现右击菜单使用了react-contextmenu，使用方法可自行github查找
1. 该右击插件并没有提供右击回调函数，导致我们无从捕获当前被右击选择的节点是谁，这里采用绑定事件的方式来进行回调处理，见componentDidMount, componentWillUnmount
2. 右击时是需要的获取到一些节点的信息的，比如节点ID，节点权限。此时需要注意到在loop方法中，已经为其分发了一些data-*的属性值，查看控制台DOM节点可以看到这些分发的属性都作用在列表的li标签上，接下来就要获取右击选中元素，查看该标签是否为li标签，不是则继续向父级查找，直到找到第一个为止，然后获取其上的data-*的数据。li标签查找方法见getDatasetNode方法，将最后获取的数据赋值给rightClickNode
3. 添加、编辑、删除处理方法见handleMenuItemClick，该参数接收的data即为rightClickNode中的数据
4. 添加具体方法见loopAdd方法，这里都是测试使用数据
5. 编辑具体方法见loopEdit方法
6. 删除具体方法见loopDelete方法

码不动了，对比着官方Menu组件和Tree组件，应该可以理解。（有其他的方案也可以在下面进行交流优化）
roamingcode
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
React + antd树状结构目录
读心悦
08-12 818
图一的效果，使用了antd的Menu组件，根据菜单目录的json来渲染的，当从数据库里读取出数据后，是将数据保存到redux中，或者是mobx，避免在分配页面重新请求数据。在开发后台管理的时候，基本上都会有导航菜单的管理。如果是稍微复杂一点的，还会有权限管理，就是对菜单做权限管理，不同的角色，看到不同的菜单。图一，默认的总菜单，只有超级管理员才能看到所有的菜单；图二是分配菜单的目录，根据用户的角色权限来分配对应的菜单目录。这里使用的redux的两种写法，后续会说明两种写法的。...
react+antd实现树形菜单展示(后台使用java)
ip15988的博客
11-29 7395
1.数据库表设计(我使用的是单表一对多,里面需要有一个pid指向父层级的id) 2.在后台获取数据的时候,使用的实体类为此种形式 public class UserTree { private Integer id; private String name; private Integer pid; //每个实体类对象中都有持有本类对象的集合 privat...
Antd Vue Tree树形控件——菜单选中状态前后端数据结构不一致的解决方案
温温温B的博客
05-12 1337
完整菜单列表该角色的菜单列表该角色菜单列表。
React实例之完善布局菜单（三）
最新发布
zxmatline的博客
02-04 876
接着上篇的内容继续。规划界面布局。界面分为三个部分，左边为菜单部分，右边上部有个80 px高度左右的功能区，下面是主内容区。依据这个设计，我们进行下面的步骤：在 SMenu项目中创建一个目录：SLayout, 这个目录里我们存储各种布局，我们先来示例一种，其它的我们根据需要可以自行设计。在这个目录中创建文件这个没什么好说的，就是主要就是利用Flex的特殊用Bootstrap对界面进行布局，没什么难度。现在我们利用这个布局把所用的元素添加进来。
基于antd Tree实现可编辑菜单树，支持节点新增、删除、修改、拖拽
ElvisSu的专栏
05-11 5111
基于antd Tree实现可编辑菜单树，支持节点新增、删除、修改、拖拽
浅记封装的antd组件： 树形下拉选择
weixin_60651132的博客
05-06 771
3、父节点选择后，可以设置子节点全选。
antd结合reactRouter实现侧边栏菜单动态渲染
qq_52845451的博客
10-22 3427
antd结合reactRouter实现侧边栏菜单动态渲染
react-simple-tree-menu:一个简单的React树菜单组件
05-05
React简单树菜单 受启发， 是一个简单的，数据驱动的轻型React Tree菜单组件，该组件： 不依赖于任何UI框架 使用render props和control props完全可自定义 允许搜索 支持键盘浏览 检查。 用法 在您的React应用程序中使用以下命令进行安装： npm i react-simple-tree-menu // or yarn add react-simple-tree-menu 要生成TreeMenu ，您需要以以下结构提供数据。 // as an array const treeData = [ { key : 'first-level-node-1' , label : 'Node 1 at the first level' , ... , // any other props you need, e.g. url
react ant-design实现导航菜单menu的路由设置/切换页面
weixin_45667289的博客
12-28 1万+
react+ant-design实现导航菜单menu的路由设置或切换页面
React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动
m0_46364033的博客
08-14 2212
如Ant Design Vue 中所示，并没有提供获取半选节点的方法，当设置checked和checkStrictly时，父子节点也不再自动关联了。
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ;...
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于...
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
React Ant设计登陆页面 我尝试使用React和Ant Design重新创建引导登录页面。 您可以在查看现场演示。 原始设计属于 。
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 ...
解决ant-design-vue中menu菜单无法默认展开的问题
01-18
在ant-design-vue的文档中， menu有两个可以传的参数，分别为defaultOpenKeys和openKeys，但在接手做一个项目时，openKeys这个参数前人已经写了，可能是从文档中直接复制demo没有删除掉，我也没去管。 等到需要用到...
mobx-react-lite 基于 React Hook API 轻量级状态管理
热门推荐
roamingcode的博客
07-08 1万+
Hook 简介 官方原话：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 随着 Hook API 的发布，使得函数式组件生态也逐渐丰富起来，Github 上基于 Hook 封装的组件库也不断增多。 今天就来说说 [mobx-react-lite](https://github.com/mobxjs/mob...
React Router Config（React 集中配置式路由）
roamingcode的博客
07-09 1万+
React Router Config 简介 React Router Config 是 React Router 的一个辅助工具，主要帮你做集中配置式路由 什么是配置式路由呢，如下 import App from '../App'; import Child from '../components/route-static/Child'; import GrandChild from '../c...
react中使用ant design 中的alert
06-03
要在 React 中使用 Ant Design 中的 Alert，您需要首先安装 Ant Design 和 React-DOM 库。可以使用以下命令进行安装： ``` npm install antd react-dom ``` 安装完成后，您可以在 React 组件中导入 Alert 组件，并将其放置在 JSX 代码中。以下是一个示例： ```jsx import React from 'react'; import { Alert } from 'antd'; const MyComponent = () => { return ( <div> <Alert message="This is an alert message" type="info" /> </div> ); }; export default MyComponent; ``` 在上面的示例中，我们从 Ant Design 库中导入了 Alert 组件，并在 JSX 代码中使用它。我们传递给 Alert 组件的 props 包括消息和类型。根据您的需求，您可以选择不同的类型，如 success、warning、error 等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值