jquery 插件ztree的应用------动态加载树节点数据

对于树的节点加载有两种方法，一是同步全部加载，二是异步分批加载。

那么我们什么时候该用同步全部加载，什么时候该用异步分批加载呢？。当我们要显示的树节点不是很多的时候，应首选同步全部加载。如果我们有很多的节点要加载，并且加载时间非常的慢，这时候我们要选择异步分批加载。如果这时还用同步全部加载的话，页面加载的速度会很慢，如果数据足够多会造成页面假死现象。凡事不能说的太死，也要根据自己的实际情况来判定到底用那种方法合适。

下面介绍具体的应用，我先简述一下项目的架构，此test，用的是javaee开发的,主要是jsp和Servlet，这里没有数据库，都是一些假数据。

首先同步全部加载，因为要在js里面去后台获取节点数据，所有我用了ajax，但是是同步的不是异步的，json数据的格式[{id:’1’,pid:’0’,name:’1’},…………]。主页面index.jsp. 我只说js代码，剩下的我相信大家能领会的看代码

var zTreeObj;
var zNodes;
var setting = {
check: {
enable: true,
chkStyle:"checkbox"
},
data: {
simpleData: {
enable: true
}
}
};

这是设置树的属性值，在上一篇文章已经结束，在这不多废话了，代码中zTreeObj是定义的一个树的全局变量。zNodes是保存树节点的json对象。继续看

$(document).ready(function(){
$.ajax({
type: "Get",
url: 'GetTree',
dataType: "text",
global: false,
async: false,
success: function (strReult) {
zNodes=eval(strReult);
},
error: function () {
alert("Ajax请求数据失败!");
}
});
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#submit").bind('click',getNodeValue);
});

上面不难看出我是用ajax同步的方法去后台获取数据的，其中 9行是把获取的数据转换成json对象在赋值给zNodes， 此时zNodes已经有数据了，第15 行是初始化树，传进三个参数，分别是 html对象，setting树属性，zNodes json数据。这行执行完树就在id为treeDemo的地方显示出来了。

其实树就是拿来用的吗，那么当被选中的节点如何才能传到后台给java程序用呢，我的办法是这样的看代码。

第16行按钮绑定一个click

function getNodeValue (){
var nodes = zTreeObj.getCheckedNodes();
var s = '';//选中节点ids
//遍历选中的节点，为s赋值
for(var i=0; i<nodes.length; i++){
var isParent = nodes[i].isParent;
if(isParent!=true){
if (s != '')s += ',';
s += nodes[i].id;
}
}
$("#content").val(s);
}

但你选中复选框是按下按钮，通过这个方法就可以获取到叶子节点的信息，id pid name 等信息。把想获取的信息放到id为content的容器里，在用from传到后台，这样就后台就可以用到前台传来的信息了。

树全部加载节点就介绍到这，下面我们来介绍怎样异步加载节点，看代码

var zTreeObj;
var setting = {
check: {
enable: true,
chkStyle:"checkbox"
},
async: {
enable: true,
url:"ShowTree",
autoParam:["id", "name=n"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
}
};

function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function setContentValue(){
var nodes = zTreeObj.getCheckedNodes();
var s = '';//选中节点ids
//遍历选中的节点，为s赋值
for(var i=0; i<nodes.length; i++){
var isParent = nodes[i].isParent;

if (s != '')s += ',';
s += nodes[i].id;

}
$("#content").val(s);
}

$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
});

上面的代码作用就是当你点击某一父节点是他会从后台获取其子节点并加载到树里，这就是异步加载树节点的代码，同步加载数据看懂了，这个异步加载树节点自然就通了，我就不再多废话了。

下面是异步分批获取节点用到的java Servlet的dopost方法看代码

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String pId = "0";
String pName = "";
if(null!=request.getParameter("id"))
pId = request.getParameter("id");
if(null!=request.getParameter("n"))
pName =request.getParameter("n");
if (pId==null || pId=="") pId = "0";
if (pName==null) pName = "";
StringBuffer ss = new StringBuffer("[");
for (int i=1; i<5; i++) {
String nId = pId+i;
String nName = pName+"n"+i;
ss.append("{ id:'"+nId+"',    name:'"+nName+"',    isParent:true}");
if (i<4) {
ss.append(",");
}
}
ss.append("]");
response.getWriter().write(ss.toString());
}

从这个类里面可以看出我需要json的数据结构，其实我这个test写的漏洞很多，我只是想展示一下怎么用这个ztree。至于其他的大家在用的自己可以完善。