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" />