一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-03-15 编辑:简简单单 来源:一聚教程网

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

 代码如下 复制代码

varsetting = {

  view: {

    dblClickExpand:false

  },

  data: {

    simpleData: {

      enable:true

    }

  },

  callback: {

    onClick: onClick

  }

}; 

functiononClick(e, treeId, treeNode) {

  varzTree = $.fn.zTree.getZTreeObj("treeDemo"),

  nodes = zTree.getSelectedNodes();

  menuName ="";

  menuId ="";

  nodes.sort(functioncompare(a,b){returna.id-b.id;});  

  varisParent = nodes[0].getParentNode();

  varisChildren = nodes[0].children;   

  if((!isParent && !isChildren) || (isParent)){

    for(vari=0, l=nodes.length; 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);

  }

functionshowMenu() {

  varcityObj = $("#menuName");

  varcityOffset = $("#menuName").offset();

  $("#menuContent").css({left:cityOffset.left +"px", top:cityOffset.top + cityObj.outerHeight() +"px"}).slideDown("fast")

 $("body").bind("mousedown", onBodyDown); 

  varwidth = cityObj.css("width");

  $("#treeDemo").css("width",parseInt(width)-5);

}

functionhideMenu() {

  $("#menuContent").fadeOut("fast");

  $("body").unbind("mousedown", onBodyDown);

}

functiononBodyDown(event) {

 if(!(event.target.id =="menuContent"|| $(event.target).parents("#menuContent").length>0)) {

    hideMenu();

  }

  } 

$(document).ready(function(){

  $.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

 

热门栏目