Ztree实现异步加载-并在input标签弹窗--类似select的DIV窗口实现即选即显。

本Tree，是基于在一个弹框的div中以easyui为框架+Ztree的技术，做的一个异步加载，即选即现的一个例子。

实现的功能：

1、点击某DIV以外的区域，隐藏/关闭本DIV。

2、点击一个input标签，在本标签的相对位置，弹出DIV 模仿select形式。（忽视分辨率等问题。）

3、Ztree显示，各种功能的实现，详细可以参考api

4、对于check的内容能够即时的显示与input标签中。

5、隐藏域传值。

希望能对于此有学习的人有些帮助。

依赖的jar包，js文件，不再多说。

本人用的 Ztree V3
private int id;
private int pid;
private String name;
private boolean isParent;

get set 方法，不再一一添加。

action--以下的层不再一一累述。就是在在数据库中一个菜单级联类似的一个数据表，可自行设计。

页面：

<div  id="divtree"  class="easyui-dialog"     data-options="
	
	closed:true,
	closable:false,
	noheader : true,
	border : true,
	",
	 closed="true"  style="height:222px;top:91px;"  >
	
	 <div class="zTreeDemoBackground left" " >  
          <ul id="tree" class="ztree"></ul>  
     </div>  

<td></td>
	<td id="memch"> 
	<input id="mem" class="easyui-combobox" type="text" style="width:196px;" 
				data-options="panelHeight : 0,
				onShowPanel : function (rec){
				createTree();
				}">
<input id="mc" name="member_choose" type="text" style="width:190px;display:none;" ></td>

PS：div dialog，嵌套一个div-tree。class ztree为必设置。

mc为隐藏属性，select 也就是mem的combobox样式为下拉框，显示名字属性，而往后台传入为ID。所以做隐藏域。

data-options="panelHeight : 0,

下拉框的下拉面板高度为，直接不显示，不用掩盖覆盖。

js如下。

var ss=1;//为点击本DIV以外的区域可以关闭本div做的一个初始化值。供选择。

var zTreeNodes = [ {
		"id" : "1",
		"pId" : "0",
		"name" : "rose",
		isParent : true
	} ];//数据 

	var setting = {
		view: {
				selectedMulti: false
			},
			check: {    //光裕选项的处理。是否显示复选框，什么样式的，以及父子关系是否级联。
		enable: true,
		chkStyle: "checkbox",
		chkboxType: { "Y": "s", "N": "s" },
		autoCheckTrigger: true
	},
		async : {      //关于异步加载的一些属性值。
			enable : true,
			url : "member_tree_list.action",
			autoParam : ["id"],
			dataType : "text",
			type : "post",
			dataFilter:filter		//调用处理方法，进行数据的预处理
		},
		expandSpeed : "slow",
		data : {<span>			</span>//必须填写项目。
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "p_id",
			    rootPId : 0
			}
		},
		callback : {<span>			</span>//关于一些事件的处理，后边为函数名称，函数在下方。
			beforeClick : beforeClick,
			beforeAsync : beforeAsync,
			onAsyncError : onAsyncError,
			onAsyncSuccess : onAsyncSuccess,
			onCheck: zTreeOnCheck,
			
	
			
		}
	};
	/*
		对数据进行预处理，可以修改节点的属性
	*/
	function filter(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, '.');
			childNodes[i].target = "_self";//修改target的属性
		}
		return childNodes;
	}
	function beforeClick(treeId, treeNode) {
		if (!treeNode.isParent) {
			
			return false;
		} else {
			return true;
		}
	}
	var log, className = "dark";
	function beforeAsync(treeId, treeNode) {
		className = (className === "dark" ? "" : "dark");
		showLog("[ " + getTime() + " beforeAsync ]    "
				+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
		return true;
	}
	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus,
			errorThrown) {
		showLog("[ " + getTime() + " onAsyncError ]    "
				+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
	}
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		showLog("[ " + getTime() + " onAsyncSuccess ]    "
				+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
	}

	function showLog(str) {
		if (!log)
			log = $("#log");
		log.append("<li class='"+className+"'>" + str + "</li>");
		if (log.children("li").length > 8) {
			log.get(0).removeChild(log.children("li")[0]);
		}
	}
	function getTime() {
		var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now
				.getSeconds(), ms = now.getMilliseconds();
		return (h + ":" + m + ":" + s + " " + ms);
	}

	function refreshNode(e) {
		var zTree = $.fn.zTree.getZTreeObj("tree"), type = e.data.type, silent = e.data.silent, nodes = zTree
				.getSelectedNodes();
		if (nodes.length == 0) {
			alert("请先选择一个父节点");
		}
		for ( var i = 0, l = nodes.length; i < l; i++) {
			zTree.reAsyncChildNodes(nodes[i], type, silent);
			if (!silent)
				zTree.selectNode(nodes[i]);
		}
		
		
	}
	

//点击之后加载的函数，此时显示出DIV，并加载成功树状结构。
	function createTree() {
		ss=3;// 创建树成功后，将SS设置为3 点击不再关闭窗口。
		var y = $('#memch').offset().top;
		var x = $('#memch').offset().left;
		var z = $('#memch').height();
		y=y+z-1;


//var s=attr.setAttribute("style", "left:"+x+"px;");
//attr.setAttribute("style", "width:820px;");


//$('#divtree').css("width","800px");
	
		
		$('#divtree').dialog('move',{    
		  left:x,    
		  top:y   
		});  

		
	 //document.getElementById( "divtree").style.display = "block"; 
		$('#divtree').dialog('open').dialog('setTitle',null);
		$.fn.zTree.init($("#tree"), setting, zTreeNodes);
		$("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
		$("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
		$("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
		$("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
	};
	
	///操作被选中的节点
		var memname='';
	function zTreeOnCheck(event, treeId, treeNode) {
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getCheckedNodes(true);
		var str="";
		var mid="";
		for(var i=0;i<nodes.length;i++){
		str =str+nodes[i].name+",";
		mid =mid+nodes[i].id+",";
		}
		str=str.substr(0,str.length-1);
		mid=mid.substr(0,mid.length-1);

		$('#member_choose').combobox('setValue', str);
		

		document.getElementById("mc").value=mid;
		
		
    
	};
	
	///操作被点击的节点


	//此方法暂时未用，为点击之后选择提交选项。
	function getck(){
		
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getCheckedNodes(true);
		var str="";
		var mid="";
		for(var i=0;i<nodes.length;i++){
		str =str+nodes[i].name+",";
		mid =mid+nodes[i].id+",";
		}
		str=str.substr(0,str.length-1);
		mid=mid.substr(0,mid.length-1);

		$('#member_choose').combobox('setValue', str);
		

		document.getElementById("mc").value=mid;
			$('#dtree').dialog('close');
		
	}
   function closetree(){
	   	$('#dtree').dialog('close');
	   
   }
   //此方法为启用，未鼠标移动过div之后，关闭div。
  function aa(){
	  
	  $("#dtree").mouseleave(function(){
      closetree();
});
  }
  
  //此方法为点击其他区域，关闭div。
  
  $(document).click(function (e) {
	  
    var drag = $("#dtree"),
        dragel = $("#dtree")[0],
        target = e.target;
    if (dragel !== target && !$.contains(dragel, target)&&ss==2) {
       closetree();
        
    }
    ss=2;
   
});
  
   

主要是js的一些控制。ztree的api介绍的也比较详细。