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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
JS中的变量作用域(console版)
Jul 18 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+Ajax实现表单验证的详解
2013/06/25 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
django中模板的html自动转意方法
2018/05/27 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
实习自荐信
2013/10/13 职场文书
行政管理专业推荐信
2013/11/02 职场文书
应届生如何写自荐信
2014/01/05 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
老人节标语大全
2014/10/08 职场文书
课外活动总结
2015/02/04 职场文书
技术员个人工作总结
2015/03/03 职场文书
求职自荐信怎么写
2015/03/04 职场文书
倡议书范文大全
2015/04/28 职场文书
银行工作心得体会范文
2016/01/23 职场文书
2016年社区文体活动总结
2016/04/06 职场文书