在react中使用zTree

最新推荐文章于 2023-08-16 21:33:15 发布

墨语轩

最新推荐文章于 2023-08-16 21:33:15 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React相关文章标签：在react中使用ztree react ztree 在react的hooks中使用ztree 在react模态框中使用ztree

本文链接：https://blog.youkuaiyun.com/MFWSCQ/article/details/101457989

React相关专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在React项目中利用ZTree插件创建高度定制化的树形结构，涵盖安装配置、与React组件结合及解决常见问题，如获取节点、样式调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中我们经常会用到树形结构，在之前我们没有用到react时都是直接用jquery来操作dom等，现在使用react应当使用数据流来控制ui了，所以碰到树形结构理所当然就会想到用一些支持react的ui框架来写，比如antd中的Tree组件来实现。

但是antd中的树组件有时候并不能满足我们的一些特殊要求，如果自己造轮子来写一个树组件，emmmmmmmmm这样也是可以的，但是自己现在太菜了还是借鉴大神们造好的轮子吧。这里我们使用ztree插件来写。为什么ztree？来来来这里看一看他的强大

ztree依赖于jquery，所以要安装jquery。

安装：

npm install jquery ztree --save

然后呢，我们要引入jquery，可以这样引入：

import $ from 'jquery'

但是有时候会报错说jQuery is not defined，所以为了省事，我选择在webpack中的垫片来配置jq：

plugins: [
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
    })
],

好了现在引入相应的文件：

import './bootstrapStyle.css'
import zTree from 'zTree';

使用：

import React,{useState,useEffect,useRef} from 'react';
import S from './style.scss';
import Modal from 'layout/ui_components/modal/Modal';
import SearchForm from './SearchForm';

import './bootstrapStyle.css'
import zTree from 'zTree';

const Tree = ()=>{
    const ref = useRef(null);
    useEffect(() => {
        var setting = {
            view: {
                showIcon: false
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: false
            }
        };
        
        var zNodes = [
            { id: 1, pId: 0, name: "[core] ", open: true },
            { id: 101, pId: 1, name: "最简单的树 " },
            { id: 102, pId: 1, name: "最简单的树 --  简单 JSON 数据" },
            { id: 103, pId: 1, name: "不显示 连接线" },

            { id: 2, pId: 0, name: "[excheck] 复/单选框功能", open: false },
            { id: 201, pId: 2, name: "Checkbox 勾选操作" },
            { id: 206, pId: 2, name: "Checkbox nocheck 演示" },

            { id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false },
            { id: 301, pId: 3, name: "拖拽 节点 基本控制" },
            { id: 302, pId: 3, name: "拖拽 节点 高级控制" },

            { id: 4, pId: 0, name: "大数据量 演示", open: false },
            { id: 401, pId: 4, name: "一次性加载大数据量" },
            { id: 402, pId: 4, name: "分批异步加载大数据量" },
            { id: 5, pId: 0, name: "组合功能 演示", open: false },
            { id: 501, pId: 5, name: "冻结根节点" },
            { id: 502, pId: 5, name: "单击展开/折叠节点" },

            { id: 6, pId: 0, name: "其他扩展功能 演示", open: false },
            { id: 601, pId: 6, name: "隐藏普通节点" },
        ];

        $.fn.zTree.init($(ref.current), setting, zNodes);
       
    }, []);
   
    return (
        <div className={S.realtimeMonitorPop}>
            <SearchForm />
            <div className={S.contentBox}>
                <ul ref={ref} id="monitorTree" className="ztree"></ul>
            </div>
        </div>
    );
}

const BtnMonitor = ()=>{
    const [showModal,setModalStatus] = useState(false);
    const modal = showModal ? (
        <Modal>
            <Tree />
        </Modal>
    ) : null;

    

    return (
        <>
            <button className={`${S.btnMonitor} ${showModal ? S.active : ''}`}
                    onClick={()=>{setModalStatus(!showModal)}}
            ><i></i>实时监控</button>
            {modal}
        </>
    )
}

export default BtnMonitor;

效果图：

解释一下，这个ztree我是用了一个portals定义的modal弹出层给弹出来的，这个时候如果使用document.getElementById或者$('#monitorTree')，获取的结果为null。所以这里在获取这个节点的时候用了useRef来存储挂载ztree的节点。如果该节点直接在页面上就会简单的多，如下：

import React,{useState,useEffect} from 'react';

import './bootstrapStyle.css'
import zTree from 'zTree';


const Tree = ()=>{
    useEffect(() => {
        var setting = {
            view: {
                showIcon: false
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: false
            }
        };
        
        var zNodes = [
            { id: 1, pId: 0, name: "[core] ", open: true },
            { id: 101, pId: 1, name: "最简单的树 " },
            { id: 102, pId: 1, name: "最简单的树 --  简单 JSON 数据" },
            { id: 103, pId: 1, name: "不显示 连接线" },

            { id: 2, pId: 0, name: "[excheck] 复/单选框功能", open: false },
            { id: 201, pId: 2, name: "Checkbox 勾选操作" },
            { id: 206, pId: 2, name: "Checkbox nocheck 演示" },

            { id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false },
            { id: 301, pId: 3, name: "拖拽 节点 基本控制" },
            { id: 302, pId: 3, name: "拖拽 节点 高级控制" },

            { id: 4, pId: 0, name: "大数据量 演示", open: false },
            { id: 401, pId: 4, name: "一次性加载大数据量" },
            { id: 402, pId: 4, name: "分批异步加载大数据量" },
            { id: 5, pId: 0, name: "组合功能 演示", open: false },
            { id: 501, pId: 5, name: "冻结根节点" },
            { id: 502, pId: 5, name: "单击展开/折叠节点" },

            { id: 6, pId: 0, name: "其他扩展功能 演示", open: false },
            { id: 601, pId: 6, name: "隐藏普通节点" },
        ];

        $.fn.zTree.init($('#monitorTree'), setting, zNodes);
       
    }, []);
    return (
        <>
            <ul id="monitorTree" className="ztree"></ul>
        </>
    )
}

export default Tree;

关于ztree的css样式文件在附件中，这个css文件和原本的不太一样，用了一点bootstrap风格的图标。