异步&同步加载树节点----zTree(一)

  前       记：

            最近写项目用到了zTree，以前也没有接触过，正好学习一下，做个笔记。

   官方网站：

           http://www.ztree.me

               个人感觉zTree的官方说明还是比较详细的，有兴趣的可以去看看。

   描述：

             ztree的节点加载方式总共有两种：同步加载和异步加载。初始化的过程中，同步加载就已经将所有的节点信息加载到树节点中，我们可以随机获取任意节点。数据量比较小时，可以采用同步加载，并不会影响用户体验。但是数据量比较大的时候，就可以采用异步加载方式，异步加载时需要自动提交父节点属性的参数，获取当前节点的下级节点信息。也就是说，在初始化的时候，全部的树节点只有展示出来的节点，当你直接去获取子集节点的时候就会获取失败。问题来了：如果我正好是一个数据量比较大的树，初始化的时候我要选中树的某个级别的某一个节点，应该怎么办？（如果有哪位朋友对zTree的同步或者异步加载树节点有问题，可以参考官方网站）

  分析：

       我们可以设置树节点的加载方式为异步，然后在初始化树数据之前同步加载需要初始化展示的所有节点。即：在后台获取节点的路径，并获取展开该节点时要获取的所有相关子节点。这样在初始化树节点的时候就可以以同步的方式加载该节点，而其他的节点的数据依然是以异步的方式请求。

    解决：

       实体类(Entity.java)

       该类对应树节点的没项信息

private Long id; //node id
private String name;//node name
private Boolean isParent;//is parent node
private Long pid;//parent node id
......Getting......
......Setting......

      初始化同步Servlet(MyServlet_Init.java)

      初始化的同步加载树节点信息，并以JSON格式返回前台。这里省略框架、数据库访问步骤，以最简单的Servlet请求为例。节点路径的获取、所有相关子节点的获取过程。以初始化的时候展开“0”节点，并选中“1”节点为例：我们需要找到“1”节点的父级节点，并获取所有“1”节点的子集节点，如果有多个父级节点，迭代获取所有即可，这里不再赘述。

List<Entity> list = new ArrayList<Entity>();
list.add(new Entity((long) 0, "root", true, (long) -1));
list.add(new Entity((long) 1, "node1", true, (long) 0));
list.add(new Entity((long) 2, "node2", true, (long) 0));
//list to JSONStr
JSONArray jsonObject = JSONArray.fromObject(list);
response.getWriter().print(jsonObject.toString());

       异步加载Servlet(MyServlet.java)

       异步加载节点的所有子节点，并以JSON格式返回前台。这里省略框架、数据库访问步骤，以最简单的Servlet请求为例。

try {
String id = request.getParameter("id");
List<Entity> list = new ArrayList<Entity>();
// if first time request
if (id == null) {
list.add(new Entity((long) 0, "root", true, (long) -1));
} else {// if not first time request
if ("0".equals(id)) {
list.add(new Entity((long) 1, "node1", true, (long) 0));
list.add(new Entity((long) 2, "node2", true, (long) 0));
} else if ("1".equals(id)) {
list.add(new Entity((long) 3, "node11", false, (long) 1));
list.add(new Entity((long) 4, "node12", false, (long) 1));
list.add(new Entity((long) 5, "node13", false, (long) 2));
} else if ("2".equals(id)) {
list.add(new Entity((long) 6, "node21", true, (long) 2));
list.add(new Entity((long) 7, "node22", false, (long) 2));
list.add(new Entity((long) 8, "node23", false, (long) 2));
} else if ("6".equals(id)) {
list.add(new Entity((long) 9, "node211", false, (long) 6));
list.add(new Entity((long) 10, "node212", false, (long) 6));
list.add(new Entity((long) 11, "node213", false, (long) 6));
}
}
//list to JSONStr
JSONArray jsonObject = JSONArray.fromObject(list);
response.getWriter().print(jsonObject);
} catch (IOException e) {
e.printStackTrace();
}

     前台界面（sync.jsp）

     在初始化树节点之前，获取与要展示节点的所有相关节点信息，并以简单数据的方式初始化zTree树。由于默认的树节点加载方式为异步加载，所以在初始化后的展开树节点操作将以异步加载的方式获取所有子节点。

var setting = {
async : {
enable : true,//设置 zTree 是否开启异步加载模式
url : "/test/servlet",//Ajax 获取数据的 URL 地址
autoParam : [ "id" ],//异步加载时需要自动提交父节点属性的参数
},
data : {
simpleData : {
enable : true,//是否采用简单数据模式
idKey : "id",//树节点ID名称
pIdKey : "pid",//父节点ID名称
rootPId : -1,//根节点ID
}
},
};

$(function() {
$.ajax({
url : "/test/initServlet",
type : "post",
dataType : "json",
success : function(data) {
$.fn.zTree.init($("#tree"), setting, data);//初始化树节点时，添加同步获取的数据
var zTree = $.fn.zTree.getZTreeObj("tree");//获取zTree对象
var node = zTree.getNodeByParam("id", 1, null);//获取要展开的节点，这里以节点“1”为例
zTree.selectNode(node);//选中节点
}
});
});

  

    附      注

       刚开始写博客，可能有很多不专业的地方，还请大家海涵，笔者会尽快赶上大家的脚步。另外：该文档对应的全部代码见资源异步&同步加载树节点----zTree(一)。