官方网站：

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. 【leetcode-71】 简化路径

    (1 pass) 以 Unix 风格给出一个文件的绝对路径,你需要简化它.或者换句话说,将其转换为规范路径. 在 Unix 风格的文件系统中,一个点(.)表示当前目录本身:此外,两个点 (..) 表示 ...

  2. HDU 1038(速度里程计算 **)

    题意是已知车轮的直径,圈数和时间,求所行驶的里程和速度. 单位换算,代码如下: #include <bits/stdc++.h> using namespace std; const do ...

  3. tedu训练营day04

    1.猜拳:import randomlist = ['石头','剪刀','布']y = input('''(0) 石头(1) 剪刀(2) 布请出拳(0/1/2):******************* ...

  4. Impala系列:Impala查询优化

    ==========================理解 mem_limit 参数==========================set mem_limit=-1b #取消内存限制set mem_ ...

  5. MyEclipse创建SWT程序

    创建项目:NewProject->WindowsBuilder->SWT Designer->SWT/JFACE Java Project添加SWT窗口:New->Window ...

  6. 【bzoj 3110】[Zjoi2013]K大数查询

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c.如果是2 a b c形式,表示询问从第a个位置到第b个位 ...

  7. c# c/s 框架的分页用户控件，还有事件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  8. 如何用vue控制样式实现相同的结构样式

    <div class="index-board-list"> <div class="index-board-item" v-for=&quo ...

  9. 转载-HashMap1.8源码分析

    原文地址-https://tech.meituan.com/2016/06/24/java-hashmap.html HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着 ...

  10. Idea快捷操作

    command+N 导入jar包 在方法体内部有for循环,在IntellJ中是输入fori,然后会有一个提示,选中需要的for循环即可 System.out.println();在IntellJ中是 ...