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. [NCH 1, 3]

    Preview: 1. Implement strStr() O(m*n): class Solution { public: int strStr(string haystack,string ne ...

  2. Hive开窗函数的理解

    1.从一个sql语句开始 select id,sum(price) over(partition by id order by price desc) from books; sum作为聚合函数的时候 ...

  3. recycle bin tip

    if you have a question about recycle bin that can look the follow link; http://www.dba-oracle.com/t_ ...

  4. 沉淀再出发：如何在eclipse中查看java的核心代码

    沉淀再出发:如何在eclipse中查看java的核心代码 一.前言   很多时候我们在eclipse中按F3键打算查看某一个系统类的定义的时候,总是弹出找不到类这样的界面,这里我们把核心对应的代码加进 ...

  5. 一点二次插值、二点二次插值 ,matlab

    syms f x a b c; f(x)=3*x^4-4*x^3-12*x^2; q(x)=a*x^2+b*x+c; %二点二次插值 x=[-1.2 -0.8]; ff=diff(diff(f)); ...

  6. 申请MVP奖励时的小Tips

    大家新年好,今天MSPrecious为大家带来一些申请MVP奖励时的小Tips.   本文分为三个部分 MVP是什么 如何申请MVP 申请MVP需要注意的事项 MVP是什么? 我想,点进来看这篇文章的 ...

  7. mysql 基础学习1

    安装得方法有很多,这里就不详细介绍了. 进入 mysql 控制台 mysql -uroot -p 查看 有哪些库 show databases; 1.创建一个库 create database tes ...

  8. IOS 登录信息类（使用单例）

    WCUserInfo.h #import <Foundation/Foundation.h> #import "Singleton.h" @interface WCUs ...

  9. angularJs的过滤器扩展及自定义过滤器

    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...

  10. TTransport 概述

    TTransport TTransport主要作用是定义了IO读写操作以及本地缓存的操作,下面来看TIOStreamTransport是如何实现的. public abstract class TTr ...