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条件判断使用小技巧总结
Sep 08 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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中函数的形参与实参的问题说明
2010/09/01 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript数组去掉重复
2011/05/12 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
vue.js 获取select中的value实例
2018/03/01 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
知识竞赛拉拉队口号
2014/06/16 职场文书
法人委托书的范本格式
2014/09/11 职场文书
兵马俑的导游词
2015/02/02 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript