很牛逼的一个树形菜单，树形下拉框插件。一年前用过，很好用。今天又有机会拿过来用，温故一下基本点，nice！！

官方文档说明的非常详细，按照API慢慢看，耐心解读，自然就可以解惑了。

官方文档及其源码下载

核心代码展示:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <title>selectmenu.html</title>

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="this is my page">

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

     <link rel="stylesheet" href="../../frameworks/css/demo.css" type="text/css">//ztree的样式

     <link rel="stylesheet" href="../../frameworks/css/zTreeStyle.css" type="text/css">//ztree的样式

     <script type="text/javascript" src="../../frameworks/jquery-1.4.4.min.js"></script>//ztree必须的JS

     <script type="text/javascript" src="../../frameworks/jquery.ztree.core-3.5.min.js"></script>//ztree必须的JS

     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     <SCRIPT type="text/javascript">

         <!--

         var setting = {

             view: {

                 dblClickExpand: false

             },

             data: {

                 simpleData: {

                     enable: true,

                     idKey: "id",

                     pIdKey: "pid",

                     rootPId: 0

                 }

             },

             callback: {

                 beforeClick: beforeClick,

                 onClick: onClick

             }

         };

         function beforeClick(treeId, treeNode) {

             var check = (treeNode && !treeNode.isParent);

             if (!check) alert("只能选择城市...");

             return check;

         }

         function onClick(e, treeId, treeNode) {

             var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

             nodes = zTree.getSelectedNodes(),

             v = "";

             nodes.sort(function compare(a,b){return a.id-b.id;});

             for (var i=0, l=nodes.length; i<l; i++) {

                 v += nodes[i].name + ",";

                 $("#mydepId").val(nodes[i].id);

             }

             if (v.length > 0 ) v = v.substring(0, v.length-1);

             var cityObj = $("#citySel");

             cityObj.attr("value", v);

             var selectValue=$("#mycompId").val();

             alert("从ztree中选择的值是："+selectValue);

         }

         function showMenu() {

             var cityObj = $("#citySel");

             var cityOffset = $("#citySel").offset();

             console.log(cityOffset);

             $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

             $("body").bind("mousedown", onBodyDown);

         }

         function hideMenu() {

             $("#menuContent").fadeOut("fast");

             $("body").unbind("mousedown", onBodyDown);

         }

         function onBodyDown(event) {

             if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {

                 hideMenu();

             }

         }

          function createTree () {

                 var zNodes;

                 $.ajax({

                     url: '/omss/ztreeDepInfo', //url  action是方法的名称

                     type: 'POST',

                     data:{ compId: "46" },

                     dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json

                     ContentType: "application/json; charset=utf-8",

                     success: function(data) {

                         zNodes = data;

                         console.log("ztreedata="+JSON.stringify(data));

                         $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                     },

                     error: function(msg) {

                         alert("失败");

                     }

                 });

             }

         $(document).ready(function() {

             createTree();

         });

         //-->

     </SCRIPT>

   </head>

   <body>

     <input class="input-medium " id="citySel" type="text" readonly value="" style="width:200px;"/>

     <div id="mydepId" class="hide"></div>

         <button data-toggle="dropdown" id="menuBtn"  onclick="showMenu(); return false;">

         <span class="ace-icon fa fa-caret-down icon-only"></span>

         </button >

     <div id="menuContent" class="menuContent" style="display:none; position: absolute;">

         <ul id="treeDemo" class="ztree" style="margin-top:0; width:240px;"></ul>

     </div>

   </body>

 </html>

展示的效果如下：

JS插件之——ztree的更多相关文章

  1. js插件ztree使用

    最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...

  2. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  3. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  4. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  5. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  6. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  7. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  8. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  9. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

随机推荐

  1. 解决DWZ(JUI)的panel 点击关闭或者打开按钮 自己写的标签消失

    问题描述:DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了而且面板收缩的click事件,也跟新增的按钮绑定了, ...

  2. thinkphp-许愿墙-3

    用jquery写异步传递的时候, 首先要判断表单中的输入是否为空: 如果有多个输入项, 应该, 分别的, 一步一步的来判断是否为空, 而不是用 and / or来复合判断! 同时如果为空, 应该将它设 ...

  3. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  4. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  5. [译]Mongoose指南 - 中间件

    中间件是一些函数, 当document发生init, validate, save和remove方法的时候中间件发生. 中间件都是document级别的不是model级别的. 下面讲讲两种中间件pre ...

  6. Hadoop之Hive 安装_（hadoop 集群）

    Hive mysql的metastore安装准备(***掌握***) 在nameNode1机子上实践: 把hive-0.12.0.tar.gz解压到/itcast/ # tar -zxvf hive- ...

  7. 【PHP面向对象(OOP)编程入门教程】5.如何实例化对象？

    我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...

  8. DiscuzX 论坛首页 和 分 区设置版块横排

    在论坛看到很多新手站长在咨询怎么样才可以设置和Discuz! 官方论坛首页一个分区下面横排3个板块或者更多呢?如下图: 下面我一起来操作下: 论坛 后台 论坛 板块管理 分区 编辑 图一: 图二: 说 ...

  9. Xcode如何找到默认的生成路径？

    我最近刚刚入门ObjectiveC,在研习<Objective C程序设计(第6版)>一书. 今天看到有关文件和归档的章节,但是我对XCode的生成文件路径并不了解,然后,在调试代码的时候 ...

  10. bootstrap实现弹出窗口

    bootstrap使用modal-dialog实现弹对话框. 一个对话框包含3部分: 对话框头部 modal-header 对话框内容体 modal-body 对话框底部 modal-footer 如 ...