工作记--ZTREE

Ztree入门

其实ztree官方网站（http://www.treejs.cn/v3/main.php#_zTreeInfo）对ztree介绍的很全面了，本文只是为了完成网上很多大神给我们这些菜鸡规划好的道路（1-2年的程序员该有自己的博客，用心写博客会对自己有很大的提升。）发自内心的说其实自己很早也就想写了，实在捉襟见肘，没什么拿得出手的。包括这篇文章，也是涨红脸在写，究竟还有谁能比你菜呢！权当记录吧。也不排除真有某个大兄弟会看，说下接下去会写什么，不要耽误了大兄弟的时间，如果不是大兄弟想要看的就右上角X了吧。这篇文章写的是A页面弹窗，弹窗中有树，对树进行多选反选，其中对节点有一些具体操作，比如禁止CHECKBOX选择等。保存后把值传到A页面，树节点是后台数据。好了，下面写具体怎么做的。

想使用ZTREE需要下载ZTREE的js和css支持包。可以在官方下载。

在代码中引用JS和CSS：<script type="text/javascript" src="${ctx}/static/zTree_v3-master/js/jquery.ztree.all.min.js"></script>
<link rel="stylesheet" href="${ctx}/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">

在你需要生成树的地方定义一个标签div，ul。。。。什么都可以不过需要注意的是必须定义class=“ztree”.

我自己是使用div来做的<div class="ztree" id="tree"></div>

好了，既然定义好了这棵树，那就需要初始化这颗树，初始化方法是在页面加载的时候加载的。ZTREE初始化方法就一句话：zTreeObj = $.fn.zTree.init($("#tree"), setting, data);第一个参数就是我之前定义的DIV，我可以理解用什么容器放这颗树，第二个参数就比较重要，是对树的一些初始化定义的，可以理解的就是你想生成一颗什么样的树，都是在这个参数中定义的。第三个参数就是树节点显示的具体内容。先说第二个参数，我直接把我的代码贴上。如果具体你想定义其他样子的树，你可以去官网看。我的树结构式这样的

具体的定义是这样 var setting = {data:{simpleData:{enable:true}},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "s", "N": "ps" }
},view: {
fontCss : {color:"black"}
}};

主要看第二个参数check，可能大家不理解的就是第三个属性，这个是为了父子节点联动选择，具体是什么样的大家一试就知。第一个参数就和初始化树定义的第三个参数有关系，我这里使用的simpleData，ZTREE给我们提供了了两种data格式，也就是JSON格式，我使用的是

	{id:1, pId:0, name: "nodename"},
	{id:11, pId:1, name: "nodename"},
	{id:12, pId:1, name: "nodename"}

另一种就是
{name: "父节点1", node: [
		{name: "nodename"},
		{name: "nodename"}
	]}
这里的数据是从后台获取的，大家也可以通过ajax获取。好了这样一颗树就定义完成了。下面写一些具体的方法。
	如果一开始就需要选中某些节点可以使用一下代码： var node = treeObj.getNodeByParam("id", nodeid); treeObj.checkNode(node, true, true);nodeid需要选中的节点的id，
treeObj则是如果你定义好一棵树后你需要对这个树在操作，就需要获得这颗树，这个就是树对象，具体获得的方法是var treeObj = $.fn.zTree.getZTreeObj("tree");参数是你定义
这颗树用的容器的id，也可能你的树有很多层结构，默认你是需要展开默写节点的，可以使用下面代码 var parent = node.getParentNode();
	            if(!parent.open){
	            	treeObj.expandNode(parent,true,true);
	            }
node是你需要展开的节点。如果你想得到所有的节点，ZTREE给了一个方法也是很坑，  var Nodes=treeObj.getNodes();这个方法只会得到最外层的节点，里面的是得不到的，
这个时候你需要再这句话下面加一句var allNodes = treeObj.transformToArray(Nodes);这样你就可以得到所有的节点。不啰嗦了，最后两个方法。node.isParent，这个是判断
一个节点有没有父节点。node.chkDisabled=true;这句话是让你把某个节点的checkbox禁用。
	这篇文章记得也比较散，都是自己在项目中使用到的一些东西，如果想更多的了解ZTREE还是需要去摸索官网文档的。