首先关于zTree树的生成将它分成了两部分,一部分为公共的JS初始化部分,另一部分为具体的JSP页面,在JSP页面中放入具体的业务参数。
当然要先对zTree的官方API有一定的了解
http://www.ztree.me/v3/api.php
一、介绍JSP页面。
关于引用zTree官方提供的JS文件就不说了。这里我在JSP页面上通过后台传递过来一些特定的参数。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<%@include file="/WEB-INF/views/commons/common.jsp"%>
<%@include file="/WEB-INF/views/commons/ztree.jsp"%>
<%@include file="/WEB-INF/views/themes/bootstrap_theme.jsp"%>
<script src="${JS_MODULES_PATH}/selectTree.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
function initPersonTree(){
//初始化人员
OsmApp.Tree.selectOsm({
multi : false,
selectType : "checkbox",
data : $("#data").val(),
filter : $("#filter").val(),
base : $("#base").val(),
group : $("#group").val()
});
}
</script>
<body onload = ' initPersonTree();'>
<input type="hidden" id='data' value="${data}"/>
<input type="hidden" id='base' value="${list}"/>
<input type="hidden" id='filter' value="${filter}"/>
<input type="hidden" id='group' value="${group}"/>
<div >
<div class="tabs-header">
<div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'">
<ul id="osmtree" class="ztree" style="display:block;"></ul> //这里是树的生成位置
</div>
<div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'">
<ul id="treeSelected" class="ztree" style="display:block;"></ul> //这里是选择好的候选人的生成位置
</div>
</div>
</body>
</html>