ZTree的使用

ztree和input整合

需要导入相应的包：

<script src="../../../js/ztree/jquery.ztree.min.js" type="text/javascript"></script>    //主要控制ztree的点击事件等
<link href="../../../js/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />       //主要控制ztree的样式显示

html标签写好

<input type="text" class="form-control" id="reportOrganname" onchange="clearOrgan()" placeholder name="reportOrganname">
	<input type="hidden" name="reportOrganId" id="reportOrganId"  />          //在这是为了存储其他的信息，类似名字对应的id等等
		<div class="menuContent">
				<ul id="tree" class="ztree form-control">
				</ul>
		</div>		

javascript的控制内容

 initZTree:function(){
	        		var data;
	        		//在这是为了让他隐藏不占用位置
					 $("#tree").attr("style", "width:95%;min-height:200px;display:none;overflow-y:auto;overflow-x:auto;position:absolute;z-index:1000");
                <!--这里使用的是自己封装的ajax-->
				$.myAjax({
					url: "http://192.168.12.127:8088//unit/findUnitsTreeBySystemId.action",    //拿取需要的数据
					type: "post",
					data:{'unitId':JSON.parse(sessionStorage.getItem("systemAccount")).unitId,'typeId':0,'systemId':1},   
					dataType: "json",
					async: false,
					success: function(res) {
						if(res.resultCode=200){
							var treeArr = [];
							var tempArr = {};
							for(var i = 0;i<res.resultData.length;i++){     这里就是加入对应的判断
								tempArr = res.resultData[i];
								tempArr['pId']=res.resultData[i].pid;    //设置树节点的pid
								if(res.resultData[i].count==0){ 
									tempArr['icon']='../../../image/addressbook/root.png';       //设置图标
								}else if(res.resultData[i].count==1){
									tempArr['icon']='../../../image/addressbook/type.png';
								}else if(res.resultData[i].count==2){
									tempArr['icon']='../../../image/addressbook/unit.png';
								}else if(res.resultData[i].count==3){
									tempArr['icon']='../../../image/addressbook/department.png';
								}else{
									tempArr['icon']='../../../image/addressbook/department.png';
								}
								treeArr.push(tempArr);
							}
							data = treeArr;
						}
					},
				});
				$.fn.zTree.init($("#tree"), this.zTreeSetting, data);    //开始渲染ztree并将数据传递过去
				var zTreeSelect = $.fn.zTree.getZTreeObj("tree");    //根据html的id获取ztee对象
				zTreeSelect.expandAll(true);        //表示展开全部节点
				// $("#tree").attr("style", "min-height:500px;");
				
				/*$(".search-name").attr("style", "padding:5px;border:1px solid #e5e5e5;background-color:#fff;");*/
			},
			//渲染等设置一些参数
				zTreeSetting: {
				/*check: {
					enable: true
				},*/ // 复选框
				view : {
					selectedMulti : false
				},
				edit : {
					enable : false,
					showRemoveBtn : true,
					showRenameBtn : true
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					beforeDrag : function() {return false;}, // 取消拖拽
					onClick : zTreeOnClick     //这里是点击的方法
				}
			},
			
			
			
			
			

点击事件

function zTreeOnClick (event, treeId, treeNode) {// 点击 树的事件  这里写入自己要写的操作
    if(treeNode.level == 2 || treeNode.level == 1 || treeNode.level == 3 || treeNode.level ==4 || treeNode.level == 0){
        //alert("点击");
        $('#reportOrganname').val(treeNode.name);
        $('#reportOrganId').val(treeNode.id);
        $("#tree").toggle();
    }

    /*  if(treeId == 'add-modal-select-tree') {
     _iframe.$("#add-modal-department").val(treeNode.name);
     _iframe.$("#sourceOrganId").val(treeNode.id);
     _iframe.$("#add-modal-select-tree").toggle()
     }*/
}

这是设置ztree的隐藏和显示的方法 我们把他设置为reportOrganname框的触发事件

$('#reportOrganname').focus(function(){
    $("#tree").toggle();return false;
})

这里为了判断当选中的是空的时候我们也将隐藏的input内容清空以免影响数据

function clearOrgan(){
	if($("#reportOrganname").val()==''||$("#reportOrganname").val()==undefined){
		$("#reportOrganId").val('');
	}
}

看一下最后结果：

点击之后

数据回显且展示对应设置项