zTree

本是古典何须时尚 2022-03-02 06:40 227阅读 0赞

# zTree #

## 一、概述 ##

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

## 二、下载 ##

![在这里插入图片描述][20190319214737429.png]

## 三、目录说明 ##

![在这里插入图片描述][20190319214751480.png]  
api —》[http://www.treejs.cn/v3/api.php][http_www.treejs.cn_v3_api.php]  
css --》主题样式  
demo—> [http://www.treejs.cn/v3/demo.php\#\_101][http_www.treejs.cn_v3_demo.php_101]  
js—>核心的js

|-- jquery.ztree.all.js 包含所有功能的的js  
|-- jquery.ztree.core.js 普通的树的使用的核心的js  
|-- jquery.ztree.excheck.js 支持checkbox的多选树的js  
|-- jquery.ztree.exedit.js 支持可以拖拉改变树结构的js

## 四、使用core.js ##

**1.最简单的树 – 标准 JSON 数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]

**2.最简单的树 – 简单 JSON 数据**

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = 
    request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    	<TITLE> ZTREE DEMO - Standard Data </TITLE>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" href="resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    	<script type="text/javascript" src="resources/zTree/js/jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="resources/zTree/js/jquery.ztree.core.js"></script>
    	
    </HEAD>
    
    <BODY>
    <h1>最简单的树 -- 简单 JSON 数据</h1>
    	
    	<div id="treeDemo" class="ztree"></div>
    </BODY>
    <SCRIPT type="text/javascript">
    		function zTreeOnClick(event, treeId, treeNode) {
         
    		    alert(treeNode.id + ", " + treeNode.name);
    		};
    		//树的配置
    		var setting = {
         	
    				//数据格式的设置
    				data:{
         
    					simpleData:{
         
    						enable:true  //使用简单的json数据
    					}
    				},
    				//树的显示设置
    				view:{
         
    					showLine:true, //设置是否显示连线 默认为true
    					showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
    					dblClickExpand: false,//设置是否支持双击展开树节点
    					fontCss : {
         color:"blue"},//设置节点样式  
    					expandSpeed: "slow",//设置展开的速度  fast normal  slow 
    					nameIsHTML: true,//名字是否是HTML
    					
    				},
    				//设置事件回调
    				callback:{
         
    					onClick:zTreeOnClick
    				}
    		};
    		
    		/**
    		属性说明  id  当前节点的唯一ID
    			   pId [必须大写]  代表当前节点的父节点id
    			   name:节点名称
    			   open:是否展开当前节点，默认为false
    			   isParent:true  标记当前节点是否为父节点 默认为如果当前节点下有子节点 则为true   否则为false
    			   icon:设置节点的图标地址
    			   iconOpen:设置节点展开时的图标地址  此节点必须是父节点 isParent:true
    			   iconClose:设置节点收起的的图标地地址  此节点必须是父节点 isParent:true
    			   url:点击节点打开的链接地址  如果想使用onClick:zTreeOnClick事件，就不要加url属性 或者改名字 href
    			   target:设置打开链接的方式  [在新窗口打开(_blank)，要本窗口打开(_self)]
    			   
    		**/
    		//树的json数据
    		var zNodes =[
    			{
          id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
    			{
          id:11, pId:1, name:"父节点11 - 折
    			叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
    			{
          id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
    			{
          id:112, pId:11, name:"叶子节点112"},
    			{
          id:113, pId:11, name:"叶子节点113"},
    			{
          id:114, pId:11, name:"叶子节点114"},
    			{
          id:12, pId:1, name:"父节点12 - 折
    			叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png"
    			,iconClose:"resources/zTree/css/
    			zTreeStyle/img/diy/1_close.png"},
    			{
          id:121, pId:12, name:"叶子节点121"},
    			{
          id:122, pId:12, name:"叶子节点122"},
    			{
          id:123, pId:12, name:"叶子节点123"},
    			{
          id:124, pId:12, name:"叶子节点124"},
    			{
          id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
    			{
          id:2, pId:0, name:"父节点2 - 折叠"},
    			{
          id:21, pId:2, name:"父节点21 - 展开", open:true},
    			{
          id:211, pId:21, name:"叶子节点211"},
    			{
          id:212, pId:21, name:"叶子节点212"},
    			{
          id:213, pId:21, name:"叶子节点213"},
    			{
          id:214, pId:21, name:"叶子节点214"},
    			{
          id:22, pId:2, name:"父节点22 - 折叠"},
    			{
          id:221, pId:22, name:"叶子节点221"},
    			{
          id:222, pId:22, name:"叶子节点222"},
    			{
          id:223, pId:22, name:"叶子节点223"},
    			{
          id:224, pId:22, name:"叶子节点224"},
    			{
          id:23, pId:2, name:"父节点23 - 折叠"},
    			{
          id:231, pId:23, name:"叶子节点231"},
    			{
          id:232, pId:23, name:"叶子节点232"},
    			{
          id:233, pId:23, name:"叶子节点233"},
    			{
          id:234, pId:23, name:"叶子节点234"},
    			{
          id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
    		];
    		$(document).ready(function(){
         
    			//初始化zTree
    			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    		});
    	</SCRIPT>
        </HTML>

**3.最简单的树 – 相关事件**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]

## 五、使用excheck.js ##

支持复选框  
![在这里插入图片描述][20190319215038406.png]  
![在这里插入图片描述][20190319215042866.png]  
![在这里插入图片描述][2019031921504798.png]

## 六、导航菜单 ##

![在这里插入图片描述][20190319215053327.png]

[20190319214737429.png]: /images/20220302/36d1930ff3004ca49a06484a581619e3.png
[20190319214751480.png]: /images/20220302/c36fbf413f8848f78d6ce9ebbac449cc.png
[http_www.treejs.cn_v3_api.php]: http://www.treejs.cn/v3/api.php
[http_www.treejs.cn_v3_demo.php_101]: http://www.treejs.cn/v3/demo.php#_101
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]: /images/20220302/d905defe645343a39405ad4130bd2688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]: /images/20220302/bbd0cf910ced4efab7916eb30b8f2bcc.png
[20190319215038406.png]: /images/20220302/b7ee465cfaf14bf59a2fc1ae10a9e163.png
[20190319215042866.png]: /images/20220302/f9e6a96db8a94db495225a74b137f8a0.png
[2019031921504798.png]: /images/20220302/3ef3599915c94ae890fe8e78596dfc3e.png
[20190319215053327.png]: /images/20220302/1e886f886b564315bf6a1ad10a08d54d.png