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，这时相对路径就不对了。

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

<scriptsrc="${pageContext.request.contextPath}/manage/js/ztree/jquery-1.4.4.min.js"></script><scriptsrc="${pageContext.request.contextPath}/manage/js/ztree/jquery.ztree.core.min.js"></script><scriptsrc="${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" />