ZTree的使用

ztree和input整合

需要导入相应的包：

    //主要控制ztree的点击事件等
       //主要控制ztree的样式显示

html标签写好

	          //在这是为了存储其他的信息，类似名字对应的id等等
		

				

				
		
		

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");
                
				$.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

点击事件

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('');
	}
}

看一下最后结果：

点击之后

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