zTree根据ajax请求返回的数据动态生成所有节点

这是添加节点的代码,该用什么方法把rs[key]里面的值循环添加到对应节点名为key的节点 rs[key]里面保存的就是二级节点和三级节点的数据

这是ajax请求得到的数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>tree view</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/zTreeStyle.css">
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
/*------------------------------------------------ajax请求数据-----------------------*/
var str;
var strs = [];
var list = [];
var listc = [];
var listp = [];
$(function() {
$.ajax({
url : "http://192.168.10.110:8080/ajax.html",
type : "POST",
data : {
val : "1"
},
dataType : "jsonp",
success : function(data) { var json = $.parseJSON(data);
str = json.message.split(","); for (i = 0; i < str.length; i++) {
console.log(str[i]);
strs.push(str[i].split("-"));//把分割好的数组添加到strs
if (strs[i].length == 2) {//数组长度为2时,只有一个'-'符号
list.push(str[i]);//添加只有一个"-" 的设备 (即站点)
}
if (strs[i].length == 3) {//两个'-'的数组
listc.push(str[i]);
}
if (strs[i].length == 4) {//三个'-'的数组
listp.push(str[i]);
} } //get slist2 start /
//分割list 获取树的根节点
var slist = [];//截图'-'号前的字段
var slist2 = [];//存放树的根节点的数组
//截取'-'之前的所有字符，并且循环添加到slist
for (i = 0; i < list.length; i++) {
var xlist = list[i].substring(0, list[i].indexOf("-"));
slist.push(xlist);
}
//判断slist里面的数据是否有重复,把不重复的值循环添加到slist2
for (i = 0; i < slist.length; i++) {
if (slist[i] != slist[i + 1]) {
slist2.push(slist[i]);
}
}//get slist2 over / //get slist4 start /
//分割listc 获取子节点 -设备nodes
var slist3 = [];//保存设备节点
var slist4 = [];//保存去掉重复的设备的数组第二级子节点
for (i = 0; i < listc.length; i++) {
var lastindex = listc[i].lastIndexOf("-");
var xlist2 = listc[i].substring(0, lastindex);
slist3.push(xlist2); }
//判断slist里面的数据是否有重复,把不重复的值循环添加到slist4
for (i = 0; i <= slist3.length - 1; i++) {
if (($.inArray(slist3[i], slist4)) == -1) {//jquery。inArray(value,array);
slist4.push(slist3[i]);
}
}
//get slist4 over / //get slist6 start/
//分割listp  获取设备测点nodes S0-E1-S1
var slist5 = [];
var slist6 = [];//这是第三级子节点
for (i = 0; i < listp.length; i++) {
var lastindex = listp[i].lastIndexOf("-");//截取最后一个'-'前的字符，并循环添加到slist5
var xlist3 = listp[i].substring(0, lastindex);
slist5.push(xlist3);
// console.log(slist5[i]); }
for (i = 0; i < slist5.length; i++) {
if (($.inArray(slist5[i], slist6)) == -1) {//去掉重复项  slist6的值为三级节点,从四级节点中提取出不重复的值作为树的三级节点
slist6.push(slist5[i]);
} }
//get slist6 over/
//把第三级子节点 slist6 添加到二级子节点  二级节点有多少个节点就把slist6分成多少组 var rs = new Object();
//初始化
for ( var i = 0; i < slist4.length; i++) {
rs[slist4[i]] = [];
}
//分组
for ( var i = 0; i < slist6.length; i++) {
var key = slist6[i].substr(0, slist6[i].lastIndexOf('-'));
//console.log(key);
rs[key].push(slist6[i]);//根据key 把listp对应的值添加到rs[key]
} //结果输出
for ( var key in rs) {
//console.log(key + "-----" + rs[key]);//key 为分组名[二级节点]  rs[key]为每组数据[二级节点下对应的三级节点]
} /*-------------------------------------------------------tree start------------------------------------------*/
var zTreeObj;
// zTree 的参数配置
var setting = {
view : {
dblClickExpand : false,
},
data : {
simpleData : {
enable : true
}
},
callback : {
onClick : onClick
}
};
var treeOBJ = $.fn.zTree.getZTreeObj("tree");
var nodes2 = [];//设备节点  S0的子节点 S0-E
var nodes3 = []; //添加节点
for (key in rs) {
nodes3.push({
id : key,//节点id
name : key,//节点名
children : [ {
name : rs[key]
//子节点 rs[key] 是一个数组, 要怎样才能把它遍历出来,并且把一个个数据添加到对应的父节点
} ]
}); } /* for (i = 0; i < rs[key].length; i++) {
nval.push({
name : rs[key][i]
});
console.log(rs[key][i]);
}
console.log(rs[key].length); */
/* for (i = 0; i < slist4.length; i++) {
//添加父节点
nodes2.push({
id : slist4[i],
name : slist4[i],
isParent : true
});
} */ /*----根节点-----*/
var zNodes = [];//根节点 ROOT S0
for (i = 0; i < slist2.length; i++) {
zNodes.push({
name : slist2[i],
isParent : true,
open : true,
children : nodes3
});
}
function onClick(e, treeId, treeNode) {
//获取树对象容器的id
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.expandNode(treeNode);
}
$(function() {
//初始化树
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});
/* ------------------------------------------------tree over----------------------------------------------- */
}
});
/*------------------ajax over--------------------------------------------*/
});
</script>
</head><body>
<div>

<ul id="tree" class="ztree"></ul>
</div>
</body>
</html>
树的效果像第一个图，但是第三级子节点应该是那一串数据分割后的数组

rs[key] 把他的值打印出来贴图看看，他应该是一个json格式的吧？

rs[key] 就是第一个图的第三级节点显示的那串数据

很明显，你的数据格式不正确。正确的 zNodes格式应该是这样的：
zNodes =[
   { id:1, pId:0, name:"SO", open:true},
   { id:11, pId:1, name:"SO-E1", open:true},
   { id:111, pId:11, name:"SO-E1-S1"},
   { id:112, pId:11, name:"SO-E1-S2"},
   { id:12, pId:1, name:"SO-E11", open:true},
   { id:121, pId:12, name:"SO-E11-S11"},
   { id:122, pId:12, name:"SO-E11-S22"}
]

是的,这个我明白,因为rs[key]就是一个数组,然后我要把它里面数据循环显示在同一级的节点,就是这里遇到问题了。然我这个树的所有节点是要：从别人提供的接口所返回的数据来设置,并且把对应的子节点添加上去,那堆数据如上图要自己分组,解析。如：先从S0-VA,S0-ST这些只有一个“-”的数据提取出父节点S0, 然后再要提取出S0-E1,S0-11这些做下一级,再下一级又要从分组好的数据里面提取对应的数据做节点,如：S0-E1下面的子节点会有S0-E1-S1,S0-E1-S2,S0-E1-S3;S0-E11下面又会有S0-E11-S1,S0-E11-S2,S0-E11-S3这些节点、。[节点为动态的]

zNodes的格式我也知道的，就是json格式的，只是操作数据并添加到zNodes那里遇到问题了。或者你有其他方法更简便,请指教。[或许我描述得不清楚，这个树菜单每个节点都要从上面贴出的图来得到]

有一种比你简单的方法，就是当你从数据库把这些值全部查出来放在一个list<>里面，然后把list转换成json数据就行了。当然现在用你的这种写法就是在获取到slist6数组的时候，把他转换成json格式的一切ok。

都贴出来了，请指教！需求是这样的：根据发送请求得到的一堆数据，把这些数据分成有四级的树；每一级节点都是要从那堆数据里解析取到，并且每一级对应的子节点都是跟父节点有关系的。例如：根节点S0，那么它的子节点就是
S0-E1、S0-E11这些，而S0-E1对应的子节点就是S0-E1-S1、S0-E1-S2；S0-E11的子节点是S0-E11-S1，S0-E11-S2

关键是我想不一个可以在循环添加子节点的时候，可以在这些子节点下再添加对应的子节点的方法！每个节点下对应都会N个子节点。
那你可以这样当你在slist6.push(slist5[i])的时候，可以让slist5按逗号分隔，开头加入[{结尾加入]} 然后没个逗号前后加入},{

这样跟push()实现的效果是一样的吧？ var rs = new Object();
//初始化
for ( var i = 0; i < slist4.length; i++) {
rs[slist4[i]] = [];
}
//分组
for ( var i = 0; i < slist6.length; i++) {
var key = slist6[i].substr(0, slist6[i].lastIndexOf('-'));
//console.log(key);
rs[key].push(slist6[i]);//根据key 把slist6对应的值添加到rs[key]
}如果是这样的添加了slist6,要循环把rs[key]这个数组循环出来可以怎样实现？需求是要把key循环出来作为第二级节点，再把rs[key][]里面的数据循环出来分别作为每个key节点下对应的第三级节点，第三级节点是key的长度多长就有多少组，每一组对应的父节点为key。

是一样的？那你把rs[key]的值打印出来，我想看看它的格式。

调试易

zTree根据ajax请求返回的数据动态生成所有节点

解决方案 »