0.引用包

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

1.HTML

<input id="citySel"  value="" onkeyup="AutoMatch(this)" placeholder="搜尋模板" class="form-control">
 

<ul id="yyTree" class="ztree mobTree"></ul>

2.ajax獲取資料

  var zTreeNodes;

var setting = {
		view: {
			selectedMulti: true  //支援多選
		},
		data: {
			simpleData: {
				enable: true  //簡單資料格式
			}
		},
		callback: {
			beforeClick: getCurrentNode,
         	        onClick: zTreeOnClick
		}
};

$.ajax({
	type:"POST",
        url:urlData+'nm_imagereport/sxTempList',
	dataType:'json',
	cache:false,
	success:function(data){
		console.log(data);
		var zn=data.zTreeNodes;//資料賦值
		zTreeNodes=eval(zn);
		$.fn.zTree.init($("#yyTree"), setting, zTreeNodes);
 

                //預設展開層
		var treeObj = $.fn.zTree.getZTreeObj("yyTree");  //得到該tree
                var node = treeObj.getNodeByTId("yyTree");  //選中第一個節點
                treeObj.expandNode(node, true, false, true);  //開啟節點 ，第一個引數表示哪個節點，第二個引數表示展開還是關閉，第三個引數表示 是否開啟全部子孫節點
		}
	});

3.jQuery ztree 給每個節點繫結事件

function getCurrentNode(treeId, treeNode) {
	var parentNodes=treeNode.getPath();
	if(parentNodes.length==5){
		return true;
	}else{
		return false;
	}
}

4.單擊時獲取zTree節點的Id,和value的值

function zTreeOnClick(event, treeId, treeNode) {
    var id = treeNode.id;
    $.ajax({
     	type:"POST",
      	url:urlData+'nm_imagereport/findByTreeId',
       	data:{TREEID:id},
       	dataType:'json',
       	cache:false,
       	success:function(data){
       		var pd=data.pd;
       		console.log(data);
       		if(pd!=null && pd!=''){
       			if($("input[name='moshi']:checked").attr("value")=="替換"){
       				$("#CHECK_METHOD").html(pd.DIAGNOSISMEHOD);
       				$("#IMAGE_EVIDENCES").html(pd.HREPORTEVIDENCES);
       				$("#IMAGE_DIAGNOSIS").html(pd.HREPORTCONCLUSION);
       			}else{
       				$("#CHECK_METHOD").append(pd.DIAGNOSISMEHOD);
       				$("#IMAGE_EVIDENCES").append(pd.HREPORTEVIDENCES);
       				$("#IMAGE_DIAGNOSIS").append(pd.HREPORTCONCLUSION);
       			}
       		}
       	}
    });
}