当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery中ztree 点击文本框弹出下拉框的实例代码

jQuery中ztree 点击文本框弹出下拉框的实例代码

2019年03月27日  | 移动技术网IT编程  | 我要评论

废话不多说了，具体代码如下所示：

<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 点击文本框弹出下拉框的实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网