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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
javascript实现在线客服效果
Jul 15 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
实用函数5
2007/11/08 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
canvas的神奇用法
2017/02/03 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
详解JS数值Number类型
2018/02/07 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
python中List的sort方法指南
2014/09/01 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Ubuntu下安装PyV8
2016/03/13 Python
Django 用户认证组件使用详解
2019/07/23 Python
python实现各种插值法(数值分析)
2019/07/30 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
欢迎词怎么写
2015/01/23 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年体育部工作总结
2015/04/02 职场文书