ztree + jQuery 动态加载树。

项目要加载树形结构，之前只见过，根本没有自己写过，所以在百度，google之后发现

这个ztree很不错，还有中文的API，果断选中这个。

下面是一些代码，经过了结构修改。

在一个js文件里写好树，在别的地方就能直接去加载了，下面是这个JS文件里的几块核心内容。

var setting = {
view: {dblClickExpand: false, showLine: false, showIcon: false},
data: {simpleData: {enable: true}},
callback: {onClick: onClick}
};

function loadTree() {
var str = "[";
jQuery.ajax({
async: false,
cache: false,
type: 'POST',
dataType: "json",
url: "getAllArea.do", //请求的action路径
error: function() {//请求失败处理函数
alert('显示失败！');
},
success: function(data) { //请求成功后处理函数。此处的data是JSON对象
jQuery.each(data, function(i, item) {
str = str + "{ id:" + item.areaID + ", pId:" + item.parentID + ", open: true , name:\"" + item.areaName + "\"},";
});
str = str.substring(0, str.length - 1);
str = str + "]";//此时str是JSON字符串//console.log(str);
oStr = eval("(" + str + ")");//这货到底是做神马啊?把JSON字符串转换成JSON对象
}
});
jQuery.fn.zTree.init(jQuery("#areaTree"), setting, oStr);//实例化areaTree
}

function onClick(e, treeId, treeNode) {

var zTree = jQuery.fn.zTree.getZTreeObj("areaTree");
zTree.expandNode(treeNode);//单击展开树
　　//treeNode.name//获取当前点击节点的名字
//treeNode.getParentNode().name//获取父节点的名字
//treeNode.getParentNode().pId;//得到父节点的父节点id。
　　//treeNode.level;//定义当前点击为几级节点？？？
}
}

这里就不在累述这些节点的作用了。

最后添加一个遍历某节点下所有子节点的方法

function getAllChildrenNodes(treeNode, result) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += "," + childrenNodes[i].id;
result = getAllChildrenNodes(childrenNodes[i], result);
}
}
return result;
}

如果你要删除一个节点下的所有节点和当前节点，至于要在这个方法调用之后

在前面加上本节点就行啦，再去删除就可以啦。

最后你在html或者jsp页面里面只要引用这个正确了就行

比如这样

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/ztree/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="js/这个treejs所在的文件.js" type="text/javascript"></script>

最后在页面加载时写上。

jQuery(document).ready(function() {
　　loadAreaTree();
});

想要加在树的位置上直接写上

<div ><!--这里面放树-->
<ul id="areaTree" class="ztree"></ul><!-- Ztree 动态加载树的地方 -->
</div>

大功告成。