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判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
VsCode与Node.js知识点详解
Sep 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php实现URL加密解密的方法
2016/11/17 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python logging设置level失败的解决方法
2020/02/19 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
民生工作实施方案
2014/05/31 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
合作与交流自我评价
2015/03/09 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
导游词之山东八大关
2019/12/18 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python