jquery树形插件zTree使用

一、介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

特点：

1.zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
2.采用了延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
3.兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
4.支持 JSON 数据
5.支持静态 和 Ajax 异步加载节点数据
6.支持任意更换皮肤 / 自定义图标（依靠css）
7.支持极其灵活的 checkbox 或 radio 选择功能
8.提供多种事件响应回调
9.灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
10.在一个页面内可同时生成多个 Tree 实例
11.简单的参数配置实现 灵活多变的功能

通过官网下载demo或者下载zTree相关的插件

官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

二、使用

（1）引入ztree组件
注意：需要添加jquery依赖

<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>

（2）向body中添加div

    <div>
        <div id="treeDemo" class="ztree">
        </div>
    </div>

（3）添加ztree设置

<script>
    //js方法
	function test(event, treeId, treeNode){
   
		 alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
	}