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 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
jQuery文字轮播特效
Feb 12 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
javascript实现简易的计算器
Jan 17 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php格式化json函数示例代码
2016/05/12 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
护理自我鉴定范文
2013/10/06 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
运动会5000米加油稿
2015/07/21 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL