ztree 的相关使用

首先 导入相关的js，css文件


1.初始化树，异步获取数据
<script type="text/javascript">
	var zTreeObj;
	// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	  var setting = {
        data: {
            key: {
                title: "title",
               
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId"
            }
        },
    	check: {
       		enable: true,
       		chkStyle: "checkbox",
       		//nocheckInherit: true,
       		chkboxType: { "Y": "ps", "N": "ps" } 
       	},
        async: {
            enable: true,
            autoParam: ["id"],
            type: "post",
            dataType: "json",
            url: "<%=path%>/loginController/admin/getFunctionTree",
        },
        //事件
        callback: {
			beforeClick: beforeClick,
			onClick: onClick,
			onAsyncSuccess: function(){
				console.info("成功了")
				
				$("#function_size").text(${functionSize});
			}
		}
    };
	// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [];
//实例化
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

 

   

2.点击事件找到数据

	

	//ztree 点击
		function onClick(event, treeId, treeNode, clickFlag) {
			console.info(treeNode);
			alert("id=="+treeNode.id  + "名称"+treeNode.name);
		}






2.ztree方法展开所有节点，异步方法

// ztree点击展开所有节点
		var   curAsyncCount = 0 ,asyncForAll = false;
		function expandAll() {
			if (!check()) {
				return;
			}
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			if (asyncForAll) {
				$("#demoMsg").text(demoMsg.expandAll);
				zTree.expandAll(true);
			} else {
				expandNodes(zTree.getNodes());
				if (!goAsync) {
					$("#demoMsg").text(demoMsg.expandAll);
					curStatus = "";
				}
			}
		}
		
		function expandNodes(nodes) {
			if (!nodes) return;
			curStatus = "expand";
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			for (var i=0, l=nodes.length; i<l; i++) {
				zTree.expandNode(nodes[i], true, false, false);
				if (nodes[i].isParent && nodes[i].zAsync) {
					expandNodes(nodes[i].children);
				} else {
					goAsync = true;
				}
			}
		}
		//ztree关闭所有节点
		function reset() {
			if (!check()) {
				return;
			}
			asyncForAll = false;
			goAsync = false;
			$("#demoMsg").text("");
			$.fn.zTree.init($("#treeDemo"), setting);
		}
		
		function check() {
			if (curAsyncCount > 0) {
				$("#demoMsg").text(demoMsg.async);
				return false;
			}
			return true;
		}
		
//绑定关闭所有节点
        $("#admin_open_All").bind("click", expandAll);
        //绑定打开所有哦节点
        $("#admin_colse_All").bind("click", reset);



4.全选与全不选

		

		<!--ztree 全选与全不选-->
		function checkNode(e) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = e.data.type,
			nodes = zTree.getSelectedNodes();
			if (type.indexOf("All")<0 && nodes.length == 0) {
				alert("请先选择一个节点");
			}

			if (type == "checkAllTrue") {
				zTree.checkAllNodes(true);
			} else if (type == "checkAllFalse") {
				zTree.checkAllNodes(false);
			} else {
				var callbackFlag = $("#callbackTrigger").attr("checked");
				for (var i=0, l=nodes.length; i<l; i++) {
					if (type == "checkTrue") {
						zTree.checkNode(nodes[i], true, false, callbackFlag);
					} else if (type == "checkFalse") {
						zTree.checkNode(nodes[i], false, false, callbackFlag);
					} else if (type == "toggle") {
						zTree.checkNode(nodes[i], null, false, callbackFlag);
					}else if (type == "checkTruePS") {
						zTree.checkNode(nodes[i], true, true, callbackFlag);
					} else if (type == "checkFalsePS") {
						zTree.checkNode(nodes[i], false, true, callbackFlag);
					} else if (type == "togglePS") {
						zTree.checkNode(nodes[i], null, true, callbackFlag);
					}
				}
			}
		}


               //勾选所有节点
        $("#admin_check_all").bind("click", {type:"checkAllTrue"}, checkNode);
        //取消勾选所有节点
        $("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);





6。返回勾选的数据

// ztree 插件 点击返回选中的节点信息，为数组集合
		$("#admin_getId").click(function() {
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getCheckedNodes(true);
			console.info(nodes);
			for(var i in nodes){
			  console.info(nodes[i].name);
			}



7.获取check 改变的 数据，一般用于修改树结构
        //获取check 改变的 数据
        function editorFunction(){
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            //获得改变过后的数据
           var nodes = treeObj.getChangeCheckedNodes();
            //将要添加的数据
           var arrayAddNodes=new Array();
            //将要删除的数据
           var arrayDeleteNodes=new Array();
           for ( var n in nodes) {
               if(nodes[n].checked){
                   arrayAddNodes.push(nodes[n]);
               }else{
                   arrayDeleteNodes.push(nodes[n])
               }
            }
            console.info(arrayAddNodes);
            console.info(arrayDeleteNodes);
        }