0 zTree简介

树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

0.0 zTree的特点

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

0.1 zTree文件介绍

从zTree官网下载的zTree包括以下组成部分

•metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。
•zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）
•js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

 <!DOCTYPE html>

 <HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">

  <script type="text/javascript" src="jquery-1.4.2.js"></script>

  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

  <SCRIPT LANGUAGE="JavaScript">

   var zTreeObj;

   var setting = {};  // zTree 的参数配置，后面详解

    var zNodes = [   // zTree 的数据属性，此处使用标准json格式

    {

    name: "test1", open: true, children: [

    { name: "test1_1" }, { name: "test1_2" }]

   },

   {

    name: "test2", open: true, children: [

    { name: "test2_1" }, { name: "test2_2" }]

   }

   ];

   $(document).ready(function () {

    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源

   });

  </SCRIPT>

 </HEAD>

 <BODY>

  <div>

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

  </div>

 </BODY>

 </HTML>

html

运行结果如下

1.1 zTree的配置

zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），一下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。

 var setting = {

    view: {

     selectedMulti: true, //设置是否能够同时选中多个节点

     showIcon: true,  //设置是否显示节点图标

     showLine: true,  //设置是否显示节点与节点之间的连线

     showTitle: true,  //设置是否显示节点的title提示信息

    },

    data: {

      simpleData: {

      enable: false, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）

       idKey: "id",  //设置启用简单数据格式时id对应的属性名称

       pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构

     }

    },

    check:{

     enable: true   //设置是否显示checkbox复选框

    },

    callback: {

     onClick: onClick,    //定义节点单击事件回调函数

     onRightClick: OnRightClick, //定义节点右键单击事件回调函数

     beforeRename: beforeRename, //定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法

     onDblClick: onDblClick,  //定义节点双击事件回调函数

     onCheck: onCheck    //定义节点复选框选中或取消选中事件的回调函数

    },

    async: {

     enable: true,      //设置启用异步加载

     type: "get",      //异步加载类型:post和get

     contentType: "application/json", //定义ajax提交参数的参数类型，一般为json格式

     url: "/Design/Get",    //定义数据请求路径

     autoParam: ["id=id", "name=name"] //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称

    }

   };

setting.js

需要注意的是，zTree的事件回调部分，基本上每一个事件都对应一个beforeXXX事件，比如onClick事件对应有一个beforeOnClick事件，主要用于控制相关事件是否允许执行，如果before事件返回false，则取消执行对应相关事件。

原文地址：https://www.cnblogs.com/sylvandu/p/5805592.html

jQuery+zTree的更多相关文章

  1. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  2. jQuery.zTree的跳坑记录

    最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...

  3. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  4. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

  5. jquery zTree 查找所有的叶子节点

    jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...

  6. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  7. Jquery zTree的使用

    <%@ page language="java" pageEncoding="utf-8"%><%@taglib prefix="s ...

  8. jQuery zTree v3.5 实例3 异步树

    最终效果: 点击非叶子节点时,向后台发送请求,获取下级菜单 前台代码如下: <%@ page language="java" contentType="text/h ...

  9. jquery——zTree, 完美好用的树插件

    Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. _______________________________________________ ...

  10. jquery Ztree v3.5 实例2 自定义显示在节点前的图片

    显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...

随机推荐

  1. C/C++标准有哪些？

                        1. C 时间 名称 标准制定组织 事件 1978 K&R标准 K&R <The C Programming Language>   ...

  2. unity材质球贴图滚动

       using System.Collections; using System.Collections.Generic; using UnityEngine; public class NewBe ...

  3. php foreach 报 “Cannot create references to elements of a temporary array expression”

    今天在项目中用php foreach数据库查询结果时,为了方便没有判断数据是否存在,直接用(array)强制转换数据时,刚开始网页始终打不开,就报502,一头懵,突然间php报“Cannot crea ...

  4. 理解 Java 正则表达式怪异的 \\ 和 \\\\，让您见怪不怪

    本文链接 https://unmi.cc/understand-java-regex-backslash/, 来自 隔叶黄莺 Unmi Blog Java 语言里的几大变革,一为 jdk1.4 引入的 ...

  5. 小J学python--Exception-异常

    现在我们要打开一个名为fuck的文件,fuck是不存在的,看看异常是怎么工作的 不捕获异常的情况 #打开文件 open('fuck') 执行结果 捕获所有异常 Exception是所有异常类的父类,所 ...

  6. nohup使用相关知识

    常规用法nohup ./abc.sh > abc.out &       --输出nohup的日志到abc.outnohup ./abc.sh &                 ...

  7. day13 多线程建立方法

    #01创建多线程    继承Thread类    覆盖run方法:run方法里面运行要执行的代码    创建对象    调用start方法,start方法会开启线程,然后调用run方法 获取线程名字: ...

  8. JavaScript的DOM_通过元素的class属性操作样式

    使用 style 属性可以设置行内的 CSS 样式,而通过 id 和 class 调用是最常用的方法. <script type="text/javascript"> ...

  9. BZOJ 1061 志愿者招募 最小费用流&&线性规划建模

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1061 题目大意: 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主 ...

  10. C++内存总结——开坑，随时总结添加

    C++内存区域分为:  程序代码区:存储程序代码的地方 栈区:编译器自动管理(分配释放)的内存区域,如函数参数,函数中的局部变量 堆区(又称动态存储区):由C语言中的函数malloc和free和C++ ...