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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
从0开始学Vue
Oct 27 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
清除输入框内的空格
2016/12/21 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
js中的闭包实例展示
2018/11/01 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python Pillow Image Invert
2019/01/22 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python db类用法说明
2020/07/07 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
工程质量承诺书
2014/03/27 职场文书
单位介绍信格式
2015/01/31 职场文书
产品质量保证书范本
2015/02/27 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
庆祝教师节主持词
2015/07/06 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
opencv检测动态物体的实现
2021/07/21 Python