JS插件之——ztree

很牛逼的一个树形菜单,树形下拉框插件。一年前用过,很好用。今天又有机会拿过来用,温故一下基本点,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>

展示的效果如下:

时间: 09-15

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

Eclipse安装Propedit插件、SVN插件、js插件

1.在线安装Propedit 打开Eclipse的在线安装界面,点击Add Name: propedit Location:http://propedit.sourceforge.jp/eclipse/updates/ 2.在线安装Subclipse Name: subclipse 1.6.x Location:http://subclipse.tigris.org/update_1.6.x 安装完成即可使用. 3.安装包安装 下载spket-1.6.23,解开压缩包以后,把最里面的featur

火狐不支持backgroundPosition的js插件

用js backgroundPositionX,backgroundPositionY设置在firefox下无法识别,用backgroundPosition同样在火狐无法识别.要识别只能用js插件来实现的,代码如下: /** * @author Alexander Farkas * v. 1.02 */ (function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && t

前端js插件

jquery jquery官方 版本:v 2.1.0v 1.11.0 yquery 暂停更新 版本: v 1.6v 1.5 v 1.4v 1.3 v 1.2v 1.1 v 1.0 jQuery 原型插件(jquery-*) jquery-drag 版本: latestv 1.1 v 1.0 jquery-dialog 版本: latestv 1.5 v 1.4v 1.3 v 1.2v 1.1 v 1.0 样式:default jquery-scrollable 版本: latestv 1.0 j

多说【最近访客】JS插件通用代码使用方法

多说[最近访客]JS插件通用代码使用方法 多说[最近访客]JS插件可以显示近期访问过你的博客并且已经使用向多说授权过的社交网络账号登录的用户头像,效果如下图所示. 最近访客JS插件的添加步骤如下: 1. 添加多说公用JS代码,每个页面只需添加一次. <!--多说js加载开始,一个页面只需要加载一次 --> <script type="text/javascript"> var duoshuoQuery = {short_name:"您的多说二级域名&q

Bootstrap入门(二十九)JS插件6:弹出框

加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script&

学会读JQuery等JS插件源码

很多人觉得jquery.ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲.其实我个人感觉主要是有几个方面的原因: 1.对一些js不常用的语法.操作符不熟悉 2.某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰. 3.js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量.function,却找不到是在哪里定义的. 那么今天给大家分享一下我的经验,扫清你的障碍. 一.一些晦涩的操作符: 1.(functio

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

Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和字幕的制作. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 源码下载

jquery.validate.js插件的使用方法

近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" method="post"> username:<input type="text" id="UserName" name="UserName" /><!--<span id="name_

用Sublime Text 3的HTML-CSS-JS Prettify(需安装node.js)插件格式化代码

用Sublime Text 3的HTML-CSS-JS Prettify(需安装node.js)插件格式化代码 用 Sublime Text 格式化代码(安装 HTML-CSS-JS Prettify 插件)时,格式化时却会提示(默认路径未找到Node.js) 下载安装到Node.js 官网下载 32位版本(据说win x64版有问题)安装. 确认Node.js安装路径鼠标右键HTML/CSS/JS Prettify > Set Plugin Options保证插件路径与Node.js安装路径一