官方网站：

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. 设计模式---行为变化模式之命令模式（Command）

    前提:行为变化模式 在组件的构建过程中,组建行为的变化经常导致组件本身剧烈的变化.“行为变化”模式将组件的行为和组件本身进行解耦,从而支持组件的变化,实现两者之间的松耦合. 类中非虚函数和静态函数方法 ...

  2. [leetcode-118]Pascal's triangle 杨辉三角

    Pascal's triangle (1过) Given numRows, generate the first numRows of Pascal's triangle. For example, ...

  3. hdu 5179 beautiful number（数位dp）

    原题链接 题意:求[l,r]中高位%低位等于0的数字个数.(不含0)分析:此题有三种方法.1.暴搜,毕竟最多才10个位.2.数位dp,预处理好整体的,再处理细节. dp[i][j]表示第i位上的数字位 ...

  4. Golang入门教程（十四）结构体和类详解

    golang中并没有明确的面向对象的说法,实在要扯上的话,可以将struct比作其它语言中的class. 类声明 type Book struct { Title string Author stri ...

  5. MapReduce实现词频统计

    问题描述:现在有n个文本文件,使用MapReduce的方法实现词频统计. 附上统计词频的关键代码,首先是一个通用的MapReduce模块: class MapReduce: __doc__ = ''' ...

  6. 11-SQLServer的事务、存储过程和触发器

    一. 事务 在SQLServer中,每条SQL语句,默认就是一条隐式的事务,但是如果我们需要一组SQL语句,那么就需要采用SQLServer提供的特有的标记 来声明事务的开始.提交和回滚了. 事务的开 ...

  7. Hadoop 博文整理

    参考文章##搭建 使用yum安装CDH Hadoop集群   http://blog.javachen.com/2013/04/06/install-cloudera-cdh-by-yum/   Ha ...

  8. HanLP中人名识别分析

    HanLP中人名识别分析 在看源码之前,先看几遍论文<基于角色标注的中国人名自动识别研究> 关于命名识别的一些问题,可参考下列一些issue: 名字识别的问题 #387 机构名识别错误 关 ...

  9. Carbon - 在线生成精美的代码片段图片（含插件）

    Carbon 是一个可以帮助你创建和分享源代码美丽图像的小工具.开始在文本区域输入或拖入代码文件以开始使用.你还在等什么? 让你的设计实力给阅读者留下深刻印象. 在线演示      免费下载 您可能感 ...

  10. nginx静态资源反向代理

    server { listen 80; server_name music.didi365.com; index index.php index.html index.htm; root /alida ...