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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Webpack的dll功能使用
Jun 28 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP教程 基本语法
2009/10/23 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP数组实例详解
2016/06/26 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
不安全的常用的js写法
2009/09/15 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
村委会主任先进事迹
2014/01/15 职场文书
家长给老师的感谢信
2015/01/20 职场文书
挂职个人工作总结
2015/03/05 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
Mysql数据库group by原理详解
2022/07/07 MySQL