react中使用ztree

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

原创最新推荐文章于 2023-08-16 21:33:15 发布 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ztree #react中添加ztree #react树插件 #react tree #树

个人总结专栏收录该内容

78 篇文章

订阅专栏

本文介绍了从Ant Design的树形控件转向ZTree的过程，探讨了ZTree在功能实现上的优势，如手动修改节点后的局部刷新及懒加载更新，并详细展示了如何在React项目中引入和配置ZTree。

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

发现使用antd自带的tree控件有很多需求不能实现，比如手动修改节点后部分刷新功能，还有懒加载的情况下修改某个节点，实现局部刷新，自己写插件成本又大，干脆直接使用ztree,ztree的强大相信大家都知道 ztree官网--http://www.treejs.cn/v3/main.php

1. 添加jquery

npm install jquery -S

import $ from 'jquery'

2. 下载ztree，引入ztree

npm install ztree

import zTree from 'zTree';

//样式文件一定不要忘了引入，不然会没有样式
import 'ztree/css/zTreeStyle/zTreeStyle.css';

3. 组件中初始化ztree

componentDidMount(){
    var setting = {
	    view: {
            showIcon: this.showIconForTree,
            showLine:true,
            fontCss : {color:"#666"}
		},
		data: {
			simpleData: {
				enable: true
			}
		}
    };
    var zNodes =[
		{ id:1, pId:0, name:"父节点1 - 展开"},
		{ id:11, pId:1, name:"父节点11 - 折叠"},
		{ id:111, pId:11, name:"叶子节点111"},
		{ id:112, pId:11, name:"叶子节点112"},
		{ id:113, pId:11, name:"叶子节点113"},
    ];
    $.fn.zTree.init($("#tree"), setting, zNodes);
}
showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
}
render() {
        return (
            <div>
                {/* 类名ztree一定要加上，不然也是没有样式 */}
                <ul id='tree' className="ztree"></ul>
            </div>
        );
    }