jQuery中ztree 点击文本框弹出下拉框的实例代码


Posted in Javascript onFebruary 05, 2017

废话不多说了,具体代码如下所示:

<link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> 
<link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/> 
<script type="text/javascript" src="${ctx}/res/js/ztree/js/jquery.ztree.core-3.5.js"></script>
<input onclick="showMenu();return false;"/>
var setting = { 
  view: { 
    dblClickExpand: false 
  }, 
  data: { 
    simpleData: { 
      enable: true 
    } 
  }, 
  callback: { 
    onClick: onClick 
  } 
};  
function onClick(e, treeId, treeNode) { 
  var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
  nodes = zTree.getSelectedNodes(); 
  menuName = ""; 
  menuId = ""; 
  nodes.sort(function compare(a,b){return a.id-b.id;});   
  var isParent = nodes[0].getParentNode(); 
  var isChildren = nodes[0].children;    
  if((!isParent && !isChildren) || (isParent)){ 
    for (var i=0, l=nodes.length; i<l; i++) { 
      menuName += nodes[i].name + ","; 
      menuId += nodes[i].id + ",";  
    } 
    if (menuName.length > 0 ) menuName = menuName.substring(0, menuName.length-1); 
    if (menuId.length > 0 ) menuId = menuId.substring(0, menuId.length-1);      
   $("#menuName").val(menuName); 
    $("#menuId").val(menuId); 
  } 
}  
function showMenu() { 
  var cityObj = $("#menuName"); 
  var cityOffset = $("#menuName").offset(); 
  $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast")
 $("body").bind("mousedown", onBodyDown);  
  var width = cityObj.css("width"); 
  $("#treeDemo").css("width",parseInt(width)-5); 
} 
function hideMenu() { 
  $("#menuContent").fadeOut("fast"); 
  $("body").unbind("mousedown", onBodyDown); 
} 
function onBodyDown(event) { 
 if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { 
    hideMenu(); 
  } 
  }  
$(document).ready(function(){ 
  $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

以上所述是小编给大家介绍的jQuery中ztree 点击文本框弹出下拉框的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
悬浮数字的实现案例
Feb 19 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js的写法基础分析
2011/01/17 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
Vue计算属性的使用
2017/08/04 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python多线程实例教程
2014/09/06 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python:接口间数据传递与调用方法
2018/12/17 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python代码需要缩进吗
2020/07/01 Python
python脚本和网页有何区别
2020/07/02 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
html5唤起app的方法
2017/11/30 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
矿泉水广告词
2014/03/20 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
队列队形口号
2015/12/25 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
mysql全面解析json/数组
2022/07/07 MySQL