官方网站：

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. Web API中的消息处理程序（Message Handler）

    一.消息处理程序的概念 信息处理程序(Message Handler)接收HTTP请求并返回一个HTTP响应的类.Message Handler继承 HttpMessageHandler 类. 通常, ...

  2. DirectX11 With Windows SDK--02 顶点/像素着色器的创建、顶点缓冲区

    前言 由于在Direct3D 11中取消了固定管线,要想绘制图形必须要了解可编程渲染管线的流程,一个能绘制出图形的渲染管线最少需要有这两个可编程着色器:顶点着色器和像素着色器. 本章会直接跳过渲染管线 ...

  3. ACdream - 1060 递推数(矩阵+循环节)

    https://vjudge.net/problem/71677/origin 已知A(0) = 0 , A(1) = 1 , A(n) = 3 * A(n-1) + A(n-2) (n ≥ 2) 求 ...

  4. navicat and connection is being used

    1.在已经保存的连接上上编辑,测试连接成功,但是点击连接就会一直提示 connection is being used 2.需要新建一个连接,才能使用,不能再已保存的上面修改

  5. HTTP method constants

    HTTP method constants ngx.HTTP_GET ngx.HTTP_HEAD ngx.HTTP_PUT ngx.HTTP_POST ngx.HTTP_DELETE ngx.HTTP ...

  6. 使用js弹出div刷新时闪烁解决方法

    <div style="visibility: hidden"> //弹出div内容 </div>

  7. JS数据结构库

    lodash https://lodash.com/docs#now https://lodash.com/ A modern JavaScript utility library deliverin ...

  8. 如何使用xss带cookie

    参考连接:https://pentesterlab.com/exercises/xss_and_mysql_file/course 打开测试网站: 然后在192.168.1.46机器上使用socat, ...

  9. c文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件, 例如源程序文件.目标文件.可执行文件.库文件 (头文件)等. ...

  10. Apache的域名配置

    配置独立域名有什么好处呢?我们在本地做程序开发,要同时用很多开源程序.CMS.框架,或者自己写的管理系统,那么给他们每一个都配置一个独立的域名,在测试的时候只要在浏览器输入设置好的域名就可以了,非常方 ...