JavaEE项目实战（OA系统）之十七_ztree之二

　　JavaEE项目实战（OA系统）之十七_ztree之二

　　在上一篇文章中，我们讲解了ztree的基本应用，本文将讲述如何从后台数据库载入节点数据。

　　从后台数据库载入节点数据有两种方式，一种是异步加载，使用AJAX发送异步请求，以载入节点数据，另一种是一次性地载入所有树节点。

　　本文为简便起见，使用后者，即一次性地载入所有树节点。

　　首先，我们来观察原来的代码：

	var treeNodes = [ {
		id : 0,
		pId : -1,
		name : "部门管理",
		open : true
	}, {
		id : 1,
		pId : 0,
		name : "总公司"
	}, {
		id : 2,
		pId : 0,
		name : "泉州分公司"
	}, {
		id : 3,
		pId : 0,
		name : "厦门分公司"
	}, {
		id : 4,
		pId : 1,
		name : "总经理办公室"
	}, {
		id : 5,
		pId : 1,
		name : "财务部"
	}, {
		id : 6,
		pId : 1,
		name : "人力资源部"
	}, {
		id : 7,
		pId : 1,
		name : "行政部"
	}, {
		id : 8,
		pId : 1,
		name : "业务部"
	}, {
		id : 9,
		pId : 1,
		name : "技术部"
	}, {
		id : 10,
		pId : 2,
		name : "业务部"
	}, {
		id : 11,
		pId : 3,
		name : "业务部"
	} ];

　　我们发现，这些节点数据都是有规律的，假如我们在后台查询出所有的部门列表，就可以通过jstl表达式，将数据展示出来：

	var treeNodes = [ {
		id : 0,
		pId : -1,
		name : "部门管理",
		open : true
	},
	<c:forEach items="${deptList}" var="dept">
	{
		id : ${dept.id},
		pId : ${dept.pId},
		name : "${dept.name}"
	},
	</c:forEach>
 ];

　　实际应用时存在一个问题，即页面显示不了树状视图，经调试，是由于javascript的路径问题。

　　我们原来的代码是：

<script src="../js/ztree/jquery-1.4.4.min.js"></script>
<script src="../js/ztree/jquery.ztree.core.min.js"></script>
<script src="../js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
	href="../css/ztree/zTreeStyle.css" />

　　这里用的是相对路径，但是从Action转过来的时候，访问的还是Action的路径，例如/toDeptTree，这时相对路径就不对了。

　　将路径修改为如下方式即可：

<script
	src="${pageContext.request.contextPath}/manage/js/ztree/jquery-1.4.4.min.js"></script>
<script
	src="${pageContext.request.contextPath}/manage/js/ztree/jquery.ztree.core.min.js"></script>
<script
	src="${pageContext.request.contextPath}/manage/js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/manage/css/ztree/zTreeStyle.css" />