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操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
vue fetch中的.then()的正确使用方法
Apr 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 引用文件技巧
2010/03/02 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
作风建设演讲稿
2014/05/23 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
禁毒心得体会范文
2016/01/15 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android