官方网站：

http://www.treejs.cn/v3/main.php#_zTreeInfo

使用方式：

步骤1、文件准备

将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确

步骤 2、编写 html 页面

按照以下代码，制作 html 页面，访问试试看吧，注意：

1) "<!DOCTYPE html>" 是必需的

2) zTree 的容器 className 别忘了设置为 "ztree"

3) 入门成功后，就可以按照顺序去看 Demo 了，直接看看源码，应该能看懂的。

<!DOCTYPE html>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

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

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

  <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;

   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

   var setting = {};

   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

   var zNodes = [

   {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);

   });

  </SCRIPT>

 </HEAD>

<BODY>

<div>

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

</div>

</BODY>

</HTML>
      initTree: function() {//初始化权限

         var viewSelf = this;

         $.fn.zTree.init($("#treeDemo"), {

            async: {

                enable: true,

                url:$$ctx + "/menuMng/findFirstMenuList"

            },

            data: {

                simpleData: { enable: true, idKey: "id", pIdKey: "pid"},

                key: { name: "name" }

            },

            check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},

            callback: {

                onAsyncSuccess: function() {

                   var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

//                 treeObj.expandAll(true);//全不展开

                }

            }

         });

         $.fn.zTree.init($("#treeDemo_dashboard"), {

            async: {

                enable: true,

                url:$$ctx + "/menuMng/findDashboardMenuList"

            },

            data: {

                simpleData: { enable: true, idKey: "id", pIdKey: "pid"},

                key: { name: "name" }

            },

            check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},

            callback: {

                onAsyncSuccess: function() {

                   var treeObj = $.fn.zTree.getZTreeObj("treeDemo_dashboard");

//                 treeObj.expandAll(true);//全不展开

                }

            }

         });

      },

zTree：一个依靠 jQuery 实现的多功能 “树插件”的更多相关文章

  1. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  2. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  3. 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）

    整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...

  4. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  5. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  6. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  7. 从零开始学习jQuery (十) jQueryUI常用功能实战

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...

  8. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  9. JQuery常用函数及功能

    JQuery常用函数及功能小结 来源:http://blog.csdn.net/screensky/article/details/7831000 1.文档加载完成执行函数 $(document).r ...

随机推荐

  1. 163邮箱SMTP设置

    如题要设置系统邮件自动发送 首先注册的网易邮箱要去开通SMTP服务,然后就是端口的设置 授权码 端口

  2. ACM-ICPC 2018 南京赛区网络预赛 G Lpl and Energy-saving Lamps（模拟+线段树）

    https://nanti.jisuanke.com/t/30996 题意 每天增加m个灯泡,n个房间,能一次性换就换,模拟换灯泡过程.询问第几天的状态 分析 离线做,按题意模拟.比赛时线段树写挫了. ...

  3. bzoj千题计划324：bzoj5249: [2018多省省队联测]IIIDX（线段树）

    https://www.lydsy.com/JudgeOnline/problem.php?id=5249 把树建出来 如果所有的d互不相同,后续遍历即可 现在有的d相同 将d从小到大排序,考虑如何将 ...

  4. HDU 1088(文本处理 **)

    题意是对一段文本进行处理,如果读到 <br>,则换行:如果读到 <hr>,若当前行无字符,则输出 80 个 ’-‘ 并换行,否则在下一行输出 80 个 ’-‘ 再换行:如果一行 ...

  5. Linux 下装逼技巧

    ``` 1.下载cmatrix-1.2a.tar.gz文件 [root@localhost ~]# wget https://jaist.dl.sourceforge.net/project/cmat ...

  6. vue-router 编程式路由

    $route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...

  7. WEUI Picker不切换数据

    /*js部分,myPicker是设备号input的ID*/ $('#myPicker').change(function () { /*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根 ...

  8. Java8新特性_接口中的默认方法

    默认方法由来猜想 1. Collection接口.Collections公共类.  同是操作集合,为啥要搞俩?没必要.在接口中搞一些默认实现,一个接口即搞定了. 2. Java8支持Lambda表达式 ...

  9. SSH免费登录

    SSH免费登录很简单,如果有用过git的就更简单了 只需要一下两步操作就OK: 1.生成公钥和私钥,在linx上生成公钥和私钥,执行:ssh-keygen 2.执行ssh-copy-id +ip 例如 ...

  10. Linux centos 防火墙篇

    防火墙的关闭 service iptables stop 永久关闭 chkconfug iptables off 查看状态 service iptables status