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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
js实现消息滚动效果
Jan 18 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
react ant Design手动设置表单的值操作
Oct 31 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时区转换转换函数
2014/01/07 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
为什么要用EJB
2014/04/17 面试题
征兵宣传标语
2014/06/20 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
裁员通知
2015/04/25 职场文书
公司表扬稿范文
2015/05/05 职场文书
安全生产培训心得体会
2016/01/18 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
pandas中对文本类型数据的处理小结
2021/11/01 Python