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

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

官方文档及其源码下载

核心代码展示:

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  <html>
  3.    <head>
  4.      <title>selectmenu.html</title>
  5.  
  6.      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.      <meta http-equiv="description" content="this is my page">
  8.      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.      <link rel="stylesheet" href="../../frameworks/css/demo.css" type="text/css">//ztree的样式
  10.      <link rel="stylesheet" href="../../frameworks/css/zTreeStyle.css" type="text/css">//ztree的样式
  11.      <script type="text/javascript" src="../../frameworks/jquery-1.4.4.min.js"></script>//ztree必须的JS
  12.      <script type="text/javascript" src="../../frameworks/jquery.ztree.core-3.5.min.js"></script>//ztree必须的JS
  13.  
  14.      <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  15.      <SCRIPT type="text/javascript">
  16.          <!--
  17.          var setting = {
  18.              view: {
  19.                  dblClickExpand: false
  20.              },
  21.              data: {
  22.                  simpleData: {
  23.                      enable: true,
  24.                      idKey: "id",
  25.                      pIdKey: "pid",
  26.                      rootPId: 0
  27.                  }
  28.              },
  29.              callback: {
  30.                  beforeClick: beforeClick,
  31.                  onClick: onClick
  32.              }
  33.          };
  34.  
  35.          function beforeClick(treeId, treeNode) {
  36.              var check = (treeNode && !treeNode.isParent);
  37.              if (!check) alert("只能选择城市...");
  38.              return check;
  39.          }
  40.  
  41.          function onClick(e, treeId, treeNode) {
  42.              var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  43.              nodes = zTree.getSelectedNodes(),
  44.              v = "";
  45.              nodes.sort(function compare(a,b){return a.id-b.id;});
  46.              for (var i=0, l=nodes.length; i<l; i++) {
  47.                  v += nodes[i].name + ",";
  48.                  $("#mydepId").val(nodes[i].id);
  49.              }
  50.              if (v.length > 0 ) v = v.substring(0, v.length-1);
  51.              var cityObj = $("#citySel");
  52.              cityObj.attr("value", v);
  53.              var selectValue=$("#mycompId").val();
  54.              alert("从ztree中选择的值是："+selectValue);
  55.  
  56.          }
  57.  
  58.          function showMenu() {
  59.              var cityObj = $("#citySel");
  60.              var cityOffset = $("#citySel").offset();
  61.              console.log(cityOffset);
  62.              $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
  63.  
  64.              $("body").bind("mousedown", onBodyDown);
  65.          }
  66.          function hideMenu() {
  67.              $("#menuContent").fadeOut("fast");
  68.              $("body").unbind("mousedown", onBodyDown);
  69.          }
  70.          function onBodyDown(event) {
  71.              if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  72.                  hideMenu();
  73.              }
  74.          }
  75.  
  76.           function createTree () {
  77.                  var zNodes;
  78.                  $.ajax({
  79.                      url: '/omss/ztreeDepInfo', //url  action是方法的名称
  80.                      type: 'POST',
  81.                      data:{ compId: "46" },
  82.                      dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
  83.                      ContentType: "application/json; charset=utf-8",
  84.                      success: function(data) {
  85.                          zNodes = data;
  86.                          console.log("ztreedata="+JSON.stringify(data));
  87.                          $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  88.                      },
  89.                      error: function(msg) {
  90.                          alert("失败");
  91.                      }
  92.                  });
  93.              }
  94.  
  95.          $(document).ready(function() {
  96.              createTree();
  97.          });
  98.          //-->
  99.      </SCRIPT>
  100.    </head>
  101.  
  102.    <body>
  103.  
  104.      <input class="input-medium " id="citySel" type="text" readonly value="" style="width:200px;"/>
  105.      <div id="mydepId" class="hide"></div>
  106.          <button data-toggle="dropdown" id="menuBtn"  onclick="showMenu(); return false;">
  107.          <span class="ace-icon fa fa-caret-down icon-only"></span>
  108.          </button >
  109.      <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
  110.          <ul id="treeDemo" class="ztree" style="margin-top:0; width:240px;"></ul>
  111.      </div>
  112.    </body>
  113.  </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. asp.net(C#)页面事件顺序

    asp.net(C#)页面事件顺序 http://www.cnblogs.com/henw/archive/2012/02/09/2343994.html   1 using System.Data; ...

  2. 为什么要做url encode

    因为 url 对字符有限制,比如把一个邮箱放入 url,就需要使用 urlencode 函数,因为 url 中不能包含 @ 字符.

  3. RabbitMQ service is already present - only updating service parameters

    如果你安装RabbitMQ不是那么一番顺利..那么你有可能会重装多次.. So..问题来了..重装时你执行   rabbitmq-service install  的时候..有可能就会报这个错了.. ...

  4. MVC中 _ViewStart _Layout Index三个页面中的加载顺序

    MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...

  5. [asp.net core]project.json（1）

    摘要 前面介绍了使用vs2015新建asp.net core web的内容,这篇文章学习下project.json文件的内容. project.json 原文:https://docs.microso ...

  6. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  7. Linux下用于查看系统当前登录用户信息的4种方法

    1. 使用w命令查看登录用户正在使用的进程信息 w命令用于显示已经登录系统的用户的名称,以及他们正在做的事.该命令所使用的信息来源于/var/run/utmp文件.w命令输出的信息包括: 用户名称 用 ...

  8. 15个初学者必看的基础SQL查询语句

    本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 本文将分享15个初学者必看的基础SQL查询语句,都很基础,但是你不一定都会,所以好好看看吧. 1.创建表和数据插 ...

  9. pip高级使用技巧以及搭建自己的pypi服务器

    =========================  pip 访问非官方pypi源, 以及代理的设置=========================在Windows下安装某些Python的C ext ...

  10. gitlab一键安装 （转）

    原文地址:http://www.2cto.com/os/201411/353292.html 0 简介bitnami和gitlab bitnami BitNami是一个开源项目,该项目产生的开源软件包 ...