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

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>

源码下载

秒客网

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

相关文章