<!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/htmlcharset=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 = 0i <str.lengthi++) {
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 = 0i <list.lengthi++) {
var xlist = list[i].substring(0, list[i].indexOf("-"))
slist.push(xlist)
}
//判断slist里面的数据是否有重复,把不重复的值循环添加到slist2
for (i = 0i <slist.lengthi++) {
if (slist[i] != slist[i + 1]) {
slist2.push(slist[i])
}
}//get slist2 over /
//get slist4 start /
//分割listc 获取子节点 -设备nodes
var slist3 = []//保存设备节点
var slist4 = []//保存去掉重复的设备 的数组 第二级子节点
for (i = 0i <listc.lengthi++) {
var lastindex = listc[i].lastIndexOf("-")
var xlist2 = listc[i].substring(0, lastindex)
slist3.push(xlist2)
}
//判断slist里面的数据是否有重复,把不重复的值循环添加到slist4
for (i = 0i <= slist3.length - 1i++) {
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 = 0i <listp.lengthi++) {
var lastindex = listp[i].lastIndexOf("-")//截取最后一个'-'前的字符，并循环添加到slist5
var xlist3 = listp[i].substring(0, lastindex)
slist5.push(xlist3)
// console.log(slist5[i])
}
for (i = 0i <slist5.lengthi++) {
if (($.inArray(slist5[i], slist6)) == -1) {//去掉重复项 slist6的值为三级节点,从四级节点中提取出不重复的值作为树的三级节点
slist6.push(slist5[i])
}
}
//get slist6 over/
//把第三级子节点 slist6 添加到 二级子节点 二级节点有多少个节点就把slist6分成多少组
var rs = new Object()
//初始化
for ( var i = 0i <slist4.lengthi++) {
rs[slist4[i]] = []
}
//分组
for ( var i = 0i <slist6.lengthi++) {
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 = 0i <rs[key].lengthi++) {
nval.push({
name : rs[key][i]
})
console.log(rs[key][i])
}
console.log(rs[key].length)*/
/* for (i = 0i <slist4.lengthi++) {
//添加父节点
nodes2.push({
id : slist4[i],
name : slist4[i],
isParent : true
})
} */
/*----根节点-----*/
var zNodes = []//根节点 ROOT S0
for (i = 0i <slist2.lengthi++) {
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>
<!-- class name 必须为ztree -->
<ul id="tree" class="ztree"></ul>
</div>
</body>
</html>
树的效果像第一个图，但是第三级子节点应该是那一串数据分割后的数组
d出新窗口用window.open ('page.html')跳转到心页面用window.location.href="login.jsp“
就放在点击节点出发事件里就行了
原来的 $("#otherpage").attr("src","pages/configInfo.jsp").css("display","")是改变ifram的意思
目前暂行的解决方案是通过样式，改变最后一级叶子节点的图标（isParent=false），因为最后一级叶子节点本身没有折叠按钮，可以把图敞丁搬股植噶邦拴鲍茎标改成和父节点一样的文件夹样子。不过还是希望能有更好的解决方案
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）