官方网站：

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. Linux记录- Linux下限制rm -rf /

    操作说明: 为了防止在linux下执行操作的时候误操作rm -rf /,或者rm -rf 一些比较重要的目录,我们做以下操作来限制rm的删除 1.下载源码安装包 https://raw.githubu ...

  2. linux chmod命令使用

    chmod:更改文件9个属性 Linux文件属性有两种设置方法,一种是数字,一种是符号. Linux文件的基本权限就有九个,分别是owner/group/others三种身份各有自己的read/wri ...

  3. 信息摘要算法之一：MD5算法解析及实现

    MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主流编程语言普遍已有MD5实现. ...

  4. 2018牛客网暑期ACM多校训练营（第二场）J Farm（树状数组）

    题意 n*m的农场有若干种不同种类作物,如果作物接受了不同种类的肥料就会枯萎.现在进行t次施肥,每次对一个矩形区域施某种类的肥料.问最后枯萎的作物是多少. 分析 作者:xseventh链接:https ...

  5. Redis学习笔记（二）解析dump.rdb文件工具之redis-rdb-tools

    https://github.com/sripathikrishnan/redis-rdb-tools 我这里使用docker搭建 docker搭建文档 https://rdbtools.com/do ...

  6. ext.net gridlist选择内部元素时自动选择所在行

    function changeSelection(id) { var index = 0; for (var i = 0; i < mcp_liststore.data.length; i++) ...

  7. MyEclipse2017 隐藏回车换行符

    Preferences->Text Editor->Show Whitespace characters(configure visibility)->Transparency Le ...

  8. Reduce:规约；Collector:收集、判断性终止函数、组函数、分组、分区

    Stream 的终止操作  一.规约 * reduce(T iden, BinaryOperator b) 可以将流中元素反复结合起来,得到一个值. 返回 T * reduce(BinaryOpera ...

  9. GCC编译器原理（一）03------GCC 工具：gprof、ld、libbfd、libiberty 和libopcodes

    1.3.7 gprof:性能分析工具 参考文档:https://www.cnblogs.com/andashu/p/6378000.html gprof是GNU profile工具,可以运行于linu ...

  10. floyd求最小环

    ;i<=n;i++) ;j<=n;j++) g[i][j]=g[j][i]=dis[i][j]=dis[j][i]=inf; ;i<=m;i++){ int u,v,w;scanf( ...