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>

大功告成。