Jquery.zTree動态加載資料

0.引用包

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" target="_blank" rel="external nofollow"  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="" οnkeyup="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);  //打開節點 ，第一個參數表示哪個節點，第二個參數表示展開還是關閉，第三個參數表示 是否打開全部子孫節點
		}
	});
           

json資料格式：

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