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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
js实现简单选项卡制作
Aug 05 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/27 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python列表切片用法示例
2017/04/19 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python实现全排列的打印
2018/08/18 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
运动会解说词100字
2014/01/31 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
公证委托书模板
2014/04/03 职场文书
中英文求职信范文
2015/03/19 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers