ZTree 使用

1.引入 ztree文件

 

<link rel="stylesheet" href="${ctx}/static/comp/zTree/css/demo.css" type="text/css">
<link href="${ctx}/static/comp/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
 <script src="${ctx}/static/comp/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
 <script src="${ctx}/static/comp/zTree/js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
 <script type="text/javascript" src="${ctx}/static/comp/zTree/js/jquery.ztree.exedit-3.5.js"></script>
  <link href="${ctx}/static/comp/zTree/tree.css"   rel="stylesheet" type="text/css">
  

 2.非异步

 

 

<script type="text/javascript">
       var treeJsonS=${treeJson};
       var setting = {
               check: {
                   enable: true,
                   chkboxType:{ "Y" : "ps", "N" : "ps" }
               },
               callback: {
                   onCheck: onCheck
               }
       };
       function filter(node) {
           return (node.level == 2 && node.checked == true);
       }
       var codeListStr ="";
       function onCheck(e, treeId, treeNode) {
    	    codeListStr ="";
      		var zTreeO=$.fn.zTree.getZTreeObj("tree").getNodesByFilter(filter);
      		for(var i=0;i<zTreeO.length;i++){
      			if (zTreeO[i].code != undefined) {
       	        	codeListStr+= (i == (zTreeO.length-1))?zTreeO[i].code:zTreeO[i].code+";";
       		    };
      		};
     	    $("#userIds").val(codeListStr);
       }
       $(document).ready(function () {
       	$.fn.zTree.init($("#tree"), setting,treeJsonS);
       });
    </script>
     <div class="zTreeDemoBackground left">
            <ul id="tree" class="ztree"></ul>
        </div>

 说明：标红第一处：后台的tree数据

 

            标红第二处：tree 节点单击回调函数

            标红第三处：过滤三级（一级是0三级是2）节点并且被选中的节点

            标红第四处：把节点的code属性 拼接成串

    标红第五处：初始化tree，$("#tree"）为下边ul

3.异步 获取数据

 

var setting = {
		view: {
			dblClickExpand: false,
			showTitle: false,
			nameIsHTML: true,
			showIcon: false
			
		},
		async: {
			enable: true,
			url: path+"/myDevice/deviceAreaTree"
		},
		callback: {
			onClick : checkTree
		}
		
};
$(function (){
	 $.fn.zTree.init($("#treeDemo"), setting);
});

 4.刷新 树

function refreshTreeGrid(){
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	treeObj.reAsyncChildNodes(null, "refresh");
}