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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 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
德生9700DX电路分析
2021/03/02 无线电
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php判断是否为json格式的方法
2014/03/04 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
独特的python循环语句
2016/11/20 Python
用python爬取租房网站信息的代码
2018/12/14 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
关于责任的演讲稿
2014/05/20 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python