欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-08 15:42:10
废话不多说了,具体代码如下所示:

废话不多说了,具体代码如下所示:

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