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. php下载远程大文件（获取远程文件大小）

    function download_file($url) { // $url = http://192.168.8.95/vm/download_file?downurl=http://192.168 ...

  2. 【转】pscp实现远程文件（夹）传输

    原文地址:http://blog.163.com/yang_jianli/blog/static/16199000620128251383197/ pscp与linux下的scp命令相似,功能相同,在 ...

  3. vue知识点之day5

    vuex是解决多层父子关系传值的问题,减少了传值的复杂度 vue+webpack安装图示

  4. 关于webWorker的理解和简单例子

    一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...

  5. Emacs快捷键（较全）

    C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...

  6. Python学习---django下的Session操作 180205

    和Cookie一样,都是用来进行用户认证.不同的是,Cookie可以吧明文/密文的信息都会KV返回给客户段,但是session可以吧用户的Value[敏感信息]保存在服务器端,安全. Django中默 ...

  7. php中的extract函数

    extract函数用来将一个数字分解成多个变量直接使用,下面是W3C的解释:PHP extract() 函数从数组中把变量导入到当前的符号表中.对于数组中的每个元素,键名用于变量名,键值用于变量值.第 ...

  8. 020.1.1 collections集合工具类

    内容:常见需求以及使用—逆转比较器顺序,最值和同步方法 collections类的方法都是静态方法 强行逆转比较器的顺序例子: //##主函数.java List<String> list ...

  9. Python定制类(进阶6)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6411919.html 本文出自:[Edwin博客园] Python定制类(进阶6) 1. python中什么 ...

  10. MongoDB authentication failed

    0.随笔摘要: MongoDB  安装配置 MongoDB  权限控制 MongoDB  注意事项 authentication failed 1.MongoDB  下载安装配置 MongoDB官网  ...