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. 微信小程序开发8-小程序的宿主环境(1)

    1.小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层.小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型 2. 1.渲染层和数据 ...

  2. 深入浅出VisualStudio——使用NuGet来安装AjaxControlToolKit

    使用NuGet可以加速配置Visual Studio 2010的开发环境. 1.创建一个空的ASP.NET web站点项目. 2.右键单击此web 站点,选择Manage NuGet Packages ...

  3. metasploit 渗透测试笔记(meterpreter篇)

    0x01 背景 meterpreter作为后渗透模块有多种类型,并且命令由核心命令和扩展库命令组成,极大的丰富了攻击方式. 需要说明的是meterpreter在漏洞利用成功后会发送第二阶段的代码和me ...

  4. AESUtil 加密

    package com.hxqc.basic.dependency.util; import org.apache.commons.lang.StringUtils; import sun.misc. ...

  5. java.lang.NoClassDefFoundError: org/aspectj/weaver/tools/PointcutPrimitive

    问题:使用Spring时,报错:java.lang.NoClassDefFoundError: org/aspectj/weaver/tools/PointcutPrimitive问题原因: 少了as ...

  6. office2013密钥

    GYWDG-NMV9P-746HR-Y2VQW-YPXKK6HDB9-BNRGY-J3F83-CF43C-D67TXG9N3P-GRJK6-VM63J-F9M27-KHGXKX2YWD-NWJ42-3 ...

  7. 随手练——HDU-1210 洗牌问题（模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 模拟的题目真不知道怎么写的话,就把真实情况展示出来,有图才有真相: 测试代码: #include ...

  8. php redis中文手册

    phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github.com/ow ...

  9. Kali-linux使用Metasploitable操作系统

    Metasploitable是一款基于Ubuntu Linux的操作系统.该系统是一个虚拟机文件,从http://sourceforge.net/projects/metasploitable/fil ...

  10. 转载：monkeyrunner之eclipse中运行monkeyrunner脚本之环境搭建（四）

    转载自:lynnLi 的monkeyrunner之eclipse中运行monkeyrunner脚本之环境搭建(四) monkeyrunner脚本使用Python语法编写,但它实际上是通过Jython来 ...