ztree弹出下拉选择框

ztree看得我晕呼呼，折腾了一小会，实现了简单调用的办法。

ztree官网

http://www.treejs.cn/v3/main.php

点击需要选择的按钮或文本框均可在其位置下拉

调用方法

<input type="input" id="pname" value="" onfocus="clickme(this);" />

<button onclick="clickme(this);">选择</button>

<script>
function clickme(eleObj){
	//参数依次为
	//参照位置的元素eleObj
	//加载json分类数据
	//预选择的初始值
	//回调callback,点击后赋值等逻辑
	showztree(eleObj,'./app/api_ztree_type.php','祖先',function(pname,pid){
	alert('你选择了我：'+pname+' 我是编号：'+pid);
	eleObj.value=pname;
	});
}
</script>

具体看代码

function showztree(showObj,url="./app/api_ztree_type.php",initSelectName='视频',tocallback=null){
	
  //可复用的弹出树
  var treeBoxId='menuContent';
  var treeObjId='treeDemo';
  var html='<div id="'+treeBoxId+'" style="display:none; position: absolute; z-index: 999999"><ul id="'+treeObjId+'" class="ztree" style="margin-top:0; width:200px;"></ul></div>';
  if($('#'+treeBoxId).length==0){
    $("body").append(html);
  }
  //var cityObj = $("#"+showObjId);
  var cityObj=$(showObj);
  //var cityOffset = cityObj.position();
  var cityOffset = cityObj.offset();
  $("#"+treeBoxId).css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
  
  $("body").on("mousedown", function(event){
      if (!(event.target.id == "menuBtn" || event.target.id == treeBoxId || $(event.target).parents("#"+treeBoxId).length>0)) {
        //hideMenu();
        $("#"+treeBoxId).fadeOut("fast");
      }
    });
  //var curAsyncCount=0;
  //var curStatus = "init";
  //var asyncForAll = false;
  //var goAsync = false;

  $.fn.zTree.init($("#"+treeObjId), {
      async: {
        enable: true,
        url:url,
        autoParam:["id", "name=n", "level=lv"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        //otherParam: ["id", "0", "name", "test"],
        dataFilter: function(treeId, parentNode, childNodes) {
          //过滤
          if (!childNodes) return null;
          for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
          }
          return childNodes;
        },
        type: "get"
      },
      view: {
        showLine: true,
        showIcon: true
      },
      callback: {
        beforeAsync: function(){
        },
        onAsyncSuccess: function (event, treeId, treeNode, msg) {
          var zTreeMenu = $.fn.zTree.getZTreeObj(treeObjId);
          var selnode=zTreeMenu.getNodeByParam('name',initSelectName);
          //var selnode=zTreeMenu.getNodeByParam('id',4);
          if (selnode){
            zTreeMenu.cancelSelectedNode();//先取消所有的选中状态
            zTreeMenu.selectNode(selnode,true);//将指定ID的节点选中
            zTreeMenu.expandNode(selnode, true, false);//将指定ID节点展开
          }
        },
        onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
        },
        beforeClick: function(treeId, treeNode){
          var check = (treeNode.name != initSelectName) || (treeNode.id==0);
          return check;
        },
        onClick: function(e, treeId, treeNode){
          var zTree = $.fn.zTree.getZTreeObj(treeObjId),
          nodes = zTree.getSelectedNodes(),
          vn ="";
          vid="";
          vpoint="";
          nodes.sort(function compare(a,b){return a.id-b.id;});
          for (var i=0, l=nodes.length; i<l; i++) {
            vn += nodes[i].name + ",";
            vid += nodes[i].id + ",";
          }
          if (vn.length > 0 ) vn = vn.substring(0, vn.length-1);
          if (vid.length > 0 ) vid = vid.substring(0, vid.length-1);
          console.log(vid);
          if(!treeNode.isParent){
            $("#"+treeBoxId).fadeOut("fast");
          }
          //执行回调
          if(tocallback!=null){
          	//选中的分类名称vn和值分类vid
		  	tocallback(vn,vid);
		  }
          
        }
      }
    });
}