一、无复选框 & 弹出框内容为本页面中的内容
1、引入zTree的css、js文件
<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
<%-- 引入layer --%>
<script type="text/javascript" src="${basePath }public/layer-v2.3/layer/layer.js"></script>
2、HTML部分代码
<input type="hidden" name="supervision.userids" id="userIds" value="${supervision.userids }"/>
<textarea name="userNames" id="userNames" rows="4" class="required" onclick="doLoadZTreeNodes();">
${supervision.userNames}
</textarea>
<!-- Ztree -->
<div id="layer-zTree" style="display: none;">
<div style="padding: 10px; height:90%;">
<ul id="typeTree" class="ztree"></ul>
</div>
</div>
3、弹出弹框并初始化树
<script type="text/javascript">
var zTree;
var setting = {
data : {
simpleData : {
enable : true, // 设置启用简单数据格式[{id, pId, name}, {id, pId, name}]
idKey : "id", // 节点数据中保存唯一标识的属性名称
pIdKey : "pId", // 节点数据中保存其父节点唯一标识的属性名称
rootPId : null // 根节点id
}
}
};
$(document).ready(function(){
//发送异步请求加载分类信息,更新Ztree节点内容
var url = "supervision/getZtreeData";
$.getJSON(url,function(result){
if(result.state=='1'){
//访问zTree方法通过数据初始化节点信息
zTree=$.fn.zTree.init($("#typeTree"),setting,result.data);
}else{
alert("初始化失败!");
}
});
});
/** 显示Ztree以及树上的节点信息 */
function doLoadZTreeNodes(){
//页面层
layer.open({
type: 1,
area:['320px', '410px'],
title: ['请人员', 'background-color:#dae7f5'],
skin: 'layui-layer-demo', //加上边框
shadeClose: true,
btn: ['确定', '取消'],
content: $('#layer-zTree'),
yes: function(index, layero){
doSetSelectedNode(index);
},
btn2: function(index){
layer.close(index);
}
});
}
/*设置选中的节点*/
function doSetSelectedNode(index){
var userIds = "";
var userNames = "";
// 1.获得选中的的节点对象
// getSelectedNodes是zTree中的一个函数,返回值是一个数组
var selectedNodes = zTree.getSelectedNodes();
// 2.获得具体的节点(node)对象
var node=selectedNodes[0];
// 3.通过node节点数据更新页面内容
$("#userNames").val(node.name));
$("#userIds").val(node.id);
// 4.关闭弹框
layer.close(index);
}
</script>
4、Java代码
/**
* 获取部门+人员数据
* JFinal框架下
*/
public void getZtreeData(){
JSONArray Ztree = new JSONArray();
JSONObject node = null;
// 0.构造根节点
node = new JSONObject();
node.put("id", "0");
node.put("pId", null);
node.put("name", "所有用户");
node.put("type", "root");
Ztree.add(node);
// 1.遍历部门
List<Dept> list4Dept = Dept.dao.getAll();
for (Dept dept : list4Dept) {
node = new JSONObject();
node.put("id", dept.getStr("id"));
node.put("pId", dept.getStr("parent_id"));
node.put("name", dept.getStr("shortname"));
Ztree.add(node);
}
// 2.遍历用户
List<User> list4User = User.dao.getAll();
for (User user : list4User) {
node = new JSONObject();
node.put("id", user.getStr("id"));
node.put("pId", user.getStr("deptid"));
node.put("name", user.getStr("name"));
Ztree.add(node);
}
JSONObject result = new JSONObject();
result.put("state", "1");
result.put("data", Ztree);
renderJson(result);
}
一、复选框 & 弹出框内容为iframe层
1、引入zTree的css、js文件
<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
<%-- 引入layer --%>
<script type="text/javascript" src="${basePath }public/layer-v2.3/layer/layer.js"></script>
2、HTML部分代码
<input name="userIds" type="hidden" id="userIds" value="${users.ids }"/>
<textarea name="userNames" id="userNames" cols="" rows="6" style="height:170px;" onclick="openTree();">
${users.names }
</textarea>
3、弹出弹框并初始化树
<script>
function openTree(){
// 顶层
parent.layer.open({
type: 2, // 1-在content中写html代码, 2-在content中写src路径
area: ['330px;', '70%'],
title: "选择用户",
content: "${basePath}dept/openTree", // iframe访问路径
btn:['确定', '取消'],
yes: function(index, layero){
var formWin = $(layero).find("iframe")[0].contentWindow; // 可用来调用弹出层的函数
formWin.doSetSelectedNode(index);
},
btn2: function(index){
layer.close(index);
}
});
// layer.close(index);//关闭弹框
}
</script>
4、iframe层
<html>
<head>
<title>用户部门树</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<%@include file="/base.jsp"%>
<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
</head>
<body>
<div id="tree">
<div style="padding: 10px;" class="layui-layer-wrap">
<ul id="typeTree" class="ztree"></ul>
</div>
</div>
</body>
<script type="text/javascript">
var zTree;
var setting = {
data : {
simpleData : {
enable : true, //设置启用简单数据格式[{id, pId, name}, {id, pId, name}]
idKey : "id", //节点数据中保存唯一标识的属性名称
pIdKey : "pId", //节点数据中保存其父节点唯一标识的属性名称
rootPId : null, //根节点id
type: "type"
}
},
check: {
enable: true, //true / false 分别表示 显示 / 不显示 复选框或单选框
autoCheckTrigger: true, //true / false 分别表示 触发 / 不触发 事件回调函数
chkStyle: "checkbox", //勾选框类型(checkbox 或 radio)
chkboxType: { "Y": "s", "N": "s" } //勾选 checkbox 对于父子节点的关联关系
/*
Y: 选择复选框时
N: 取消复选框选中
p: 父级
s: 子级
*/
}
};
$(document).ready(function(){
var url = "${basePath}dept/getTreeData?type=2";
$.getJSON(url,function(result){
// 访问zTree方法通过数据初始化节点信息
zTree=$.fn.zTree.init($("#typeTree"),setting,result);
});
});
/*设置选中的节点*/
function doSetSelectedNode(index){
var userIds = "";
var userNames = "";
// 1.获得选中的的节点对象
var nodes = zTree.getCheckedNodes(true); // 与无复选框函数名有区别
for ( var i in nodes) {
// 2.只获取用户数据
if (!nodes[i].isParent && nodes[i].type == "user") {
userIds += nodes[i].id + ",";
userNames += nodes[i].name + "; ";
}
}
// 3.通过node节点数据更新页面内容(若此iframe的parent页面只有一个则不需要[0])
parent[0].$("#userNames").val(userNames.substring(0, userNames.length -1));
parent[0].$("#userIds").val(userIds.substring(0, userIds.length -1));
// 4.关闭弹框
parent.layer.close(index);
</script>
</html>
5、Java代码
/**
* 获取树形数据
* type = 2 查询到用户级, 其他则查询到部门级
* JFinal框架中
*/
public void getTreeData(){
String type = getPara("type");
JSONArray array = new JSONArray();
// 构造根节点
JSONObject base = new JSONObject();
base.put("id", "0");
base.put("pId", null);
if (StringUtil.isNotBlank(type) && "2".equals(type)) {
base.put("name", "所有用户");
}else{
base.put("name", "所有部门");
}
base.put("type", "root");
array.add(base);
// 获取部门数据
List<Dept> list = Dept.dao.getAllDeptBy12();
for (Dept dept : list) {
JSONObject obj = new JSONObject();
obj.put("id", dept.get("id"));
obj.put("pId", dept.get("parent_Id"));
obj.put("name", dept.get("shortName"));
obj.put("type", "dept");
array.add(obj);
// 获取用户数据
if (StringUtil.isNotBlank(type) && "2".equals(type)) {
List<User> list2User = User.dao.getListByOffice(obj.getString("id"));
for (User user : list2User) {
JSONObject obj2User = new JSONObject();
obj2User.put("id", user.get("id"));
obj2User.put("pId", user.get("deptId"));
obj2User.put("name", user.get("name"));
obj2User.put("type", "user");
array.add(obj2User);
}
}
}
renderJson(array);
}