ztree读取xml文件,生成栏目树

时间:2022-01-06 22:27:14

ztree不直接读取xml加载栏目树,可以使用jquery将xml读取为json格式字符串,然后有ztree加载栏目树。

具体实现代码js部分如下:

 用到的文件:

ztree官方提供的js文件及其样式;jquery-1.7.2.min.js

// JavaScript Document
var zNodes;//栏目树json格式字符串
var setting = {
view: {
dblClickExpand: false,//双击节点名称展开(收起)节点
showLine: true,//显示连接线
selectedMulti: false//是否支持多选(按ctrl键)
},
data: {
simpleData: {
enable:true,
idKey: "nodeID",//json串中节点ID的KEY
pIdKey: "parentID",//json串中父节点ID的KEY
}
},
callback: {
/*
点击节点触发的事件
*/
onClick: function(event, treeId,treeNode) {
$("#nodeIframe").attr("src",treeNode.nodeUrl);
}
}
};

$(document).ready(function(){
$.post(
"xml.xml",
function(data){
zNodes="[";
//遍历xml中所有的node节点,读取其属性及子节点为json格式字符串
$(data).find('node').each(function(){
zNodes +=
"{" +
"\"name\":\"" + $(this).find("nodeName").text() + "\"," + //获取子节点数据
"\"nodeID\":\"" + $(this).attr("nodeID") + "\"," + //获取节点属性信息
"\"parentID\":\"" + $(this).attr("parentID") + "\"," +
"\"nodeUrl\":\"" + $(this).attr("nodeUrl") + "\"," +
"\"articleNum\":\"" + $(this).attr("articleNum") + "\"" +
"},";
});
zNodes = zNodes.substring(0,zNodes.length-1);
zNodes += "]";
$.fn.zTree.init($("#tree"), setting, jQuery.parseJSON(zNodes));//加载栏目树,jQuery.parseJSON(zNodes)将json格式字符串转换为json对象
$("#nodeIframe").attr("src","http://www.2345.com/?kang0533");
},"xml"
);
});

 

 

html页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>栏目树</title>
<link rel="stylesheet" href="style/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/nodeTree.js"></script>
</head>

<body>
<table align="left" >
<tr valign="top">
<td style="width:260px;">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</td>
<td style="width:780px;">
<iframe id="nodeIframe" name="nodeIframe" width="100%" height="600" scrolling="auto" src=""></iframe>
</td>
</tr>
</table>
</body>
</html>



源码下载