首页 > 代码库 > 左侧动态加载树，右侧显示树节点的信息
左侧动态加载树，右侧显示树节点的信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<%@include file="../includes/head.jsp" %>
<title>${menu.menuName}</title>
<link rel="stylesheet" type="text/css"
href="http://www.mamicode.com/
href="http://www.mamicode.com/
#organSelectList1{ width: 80%; height: 80%; float: right;}
#organSelectList1 option{ width: 100%; line-height: 20px; font-size: 14px; padding-left: 10%;}
</style>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
<%@include file="../includes/top.jsp"%>
<div class="page-container">
<%@include file="../includes/sidebar.jsp"%>
<div class="page-content-wrapper">
<div class="page-content">
<%@include file="../includes/current.jsp" %>
<div class="row" >
<div class="col-md-12">
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="${menu.icon}"></i>${menu.menuName}
</div>
<div class="actions">
<a href="javascript:;" class="btn default yellow-stripe" id="treeReload"><i
class="fa fa-refresh"></i><span class="hidden-480"> 重新载入</span></a>
</div>
</div>
<!-- 树形菜单开始 -->
<div class="portlet-body">
<!-- 左侧按钮 -->
<div class="ztree col-md-2 col-sm-4 col-xs-12" style="background:#f7f7f7;padding-top:10px;" >
<!-- 搜索按钮 -->
<div class="row">
<div class="input-group col-md-12 ">
<input type="text" id="search" class="form-control " id="newName" name="newName">
<span class="input-group-addon btn btn-primary" style="background:#eaeaea;"><i class="fa fa-search"></i></span>
</div>
</div>
<ul id="organTree" class="ztree" style="overflow:auto; height:400px;"></ul>
<!--测试按钮 -->
<div class="row" style="display:none; " id="newaddChildOrgan" >
<a href="javascript:;" id="addChildOrgan" class="btn " style="display:block;height:35px; line-height:35px;background:#ffffff;border:1px solid #f1efef;">新建部门</a>
</div>
<div class="row" style="display:none;" id="newtoUpdateBtn" >
<a href="javascript:;" id="toUpdateBtn" class="btn " style="display:block;height:35px; line-height:35px;background:#ffffff;border:1px solid #f1efef;" >新建员工</a>
</div>
<div class="row" id="newadd" >
<a href="javascript:;" class="btn " style="display:block;height:35px;line-height:35px;background:#ffffff;border:1px solid #f1efef; "><img src="http://www.intmote.com/wp-content/uploads/2017/07/adddd.png"></a>
</div>
</div>
<!--右侧的信息 -->
<div class="col-md-9 col-sm-8 col-xs-12" style="padding-top:50px;">
<div class="white_content col-md-12">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name" id="Department"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" placeholder="教学办公室" ></input>
</div>
</div>
<input type="text" id="organId" hidden="true" />
<div class="form-group">
<label class="col-sm-2 control-label" for="profession">上级部门</label>
<div class="col-sm-8">
<select id="parentOrgan" class="form-control">
<c:forEach var="organ" items="${organList}">
<option value="http://www.mamicode.com/${organ.organId}">${organ.organName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tel">部门地址</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="diz" placeholder="中山院校园北路" ></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tel">部门负责人</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="manage" placeholder="王小二" ></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tel">联系电话</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="tel" placeholder="15210441886" ></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<a href="javascript:;" id="keep" class="btn blue" >保存</a>
</div>
</div>
</form>
</div>
</div>
<!--右侧的信息结束 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 点击右键，弹出新建部门 -->
<div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute">
<ul class="dropdown-menu">
<!-- <li><a href="javascript:;" id="addChildOrgan">新建部门</a></li>-->
<!-- <li><a href="javascript:;" id="toUpdateBtn">修改</a></li> -->
<li><a href="http://www.mamicode.com/#" id="deleteBtn" data-target="#confirmDialog" data-toggle="modal">删除</a></li>
</ul>
</div>
<!--弹出对话框 -->
<div class="modal fade bs-modal-lg" id="modalDialog" tabindex="-1" data-keyboard="false" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog modal-lg" >
<div class="modal-content" id="modalContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="modalTitle"></h4>
</div>
<form id="dialogForm" class="form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="white_content col-md-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="name" id="care"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="organName" placeholder="" ></input>
</div>
</div>
<div class="form-group" id="sex">
<label class="col-sm-4 control-label" for="profession">性别：</label>
<div class="col-sm-8">
<select id="profession" class="form-control">
<option>男</option>
<option>女</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="profession" id="partment"></label>
<div class="col-sm-8">
<select id="parentId" class="form-control">
<c:forEach var="organ" items="${organList}">
<option value="http://www.mamicode.com/${organ.organId}">${organ.organName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="adress"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address" placeholder="" ></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="mangent"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="manager" placeholder="" ></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="phonetel"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone" placeholder="" ></input>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">关闭</button>
<button type="button" class="btn blue" id="addBtn">保存</button>
<button type="button" class="btn blue" id="updateBtn">保存</button>
</div>
</div>
</div>
</div>
<%@include file="../includes/footer.jsp"%>
<jsp:include page="../includes/confirmdiv.jsp">
<jsp:param name="dialogContent" value="http://www.mamicode.com/确认删除当前部门？（若当前部门包含子部门，其下所有部门将被删除！）"/>
</jsp:include>
<%@include file="../includes/bottomscript.jsp" %>
<script type="text/javascript"
src="http://www.mamicode.com/
src="http://www.mamicode.com/
src="http://www.mamicode.com/
src="http://www.mamicode.com/
<script type="text/javascript">
$(function () {
organTree.init();
});
</script>
</body>
</html>
js文件：
var organTree = function () {
var setting = {
check: {
enable: false
},
view:{
selectedMulti:false
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
edit: {
drag: {
isCopy: false
},
enable: true,
showRenameBtn: false,
showRemoveBtn: false
},
callback: {
onRightClick: onRightClick,
// 单击事件
onClick: zTreeOnClick,
onNodeCreated: zTreeOnNodeCreated
}
};
//给生成的节点添加class属性
function zTreeOnNodeCreated(event, treeId, treeNode) {
var str=treeNode.tId+"_span";
$("#"+str).addClass(treeNode.type);
};
var zTreeObj;
function initTree() {
$.get("system/organ/getOrganTreeList", function (data) {
zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree);
zTreeObj.expandAll(false);
});
}
//右击事件
function onRightClick(event, treeId, treeNode) {
if (treeNode) {
zTreeObj.selectNode(treeNode);
showContextMenu(treeNode.organId,treeNode.leaf, event.clientX + 5, event.clientY + 10);
}
}
//单击事件，向后台发起请求
function zTreeOnClick(event, treeId, treeNode) {
if(treeNode.type == "organ"){
$("#Department").html("部门名称");
$.ajax({
url: "system/organ/" + zTreeObj.getSelectedNodes()[0].organId,
type: "get",
success: function (data) {
var organ = data.returnData.organ;
$("#organId").val(organ.organId);
$("#name").val(organ.organName);
$("#diz").val(organ.address);
$("#tel").val(organ.phone);
$("#manage").val(organ.manager);
$("#parentOrgan").val(organ.parentId);
}
});
}else{
$("#Department").html("姓名");
$.ajax({
url: "system/organ/getStaff/" + zTreeObj.getSelectedNodes()[0].organId,
type: "get",
success: function (data) {
var staff = data.returnData.staff;
$("#organId").val(staff.id);
$("#name").val(staff.name);
$("#diz").val(staff.position);
$("#tel").val(staff.tel);
$("#manage").val(staff.email);
$("#parentOrgan").val(staff.organId);
}
});
}
};
/*判断在哪一级部门*/
function showContextMenu(type,leaf, x, y) {
if (type == -1) {
$(".dropdown-menu").find("li:not(:first)").hide();
} else if(leaf){
$(".dropdown-menu").find("li:first").hide();
}else{
$(".dropdown-menu").find("li").show();
}
$("#treeContextMenu").css({"top": y + "px", "left": x + "px"}).show();
$("body").on("mousedown", onBodyMouseDown);
}
function hideContextMenu() {
$("#treeContextMenu").hide();
$("body").off("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event) {
if (!(event.target.id == "treeContextMenu" || $(event.target).parents("#treeContextMenu").length > 0)) {
hideContextMenu();
}
}
//点击重新载入，初始化树
var handleEvent = function () {
$("#treeReload").on("click", initTree);
function initUser() {
$.get("system/organ/getUserListToOrgan", function (data) {
var userList = data.returnData.userList;
console.log(data.returnData.userList);
$("#organSelectList1").empty();
for(var i=0;i<userList.length;i++){
$("#organSelectList1").append(‘<option value=http://www.mamicode.com/‘+userList[i].userId+‘>‘+userList[i].username+‘‘);
}
});
}
//search的keyUp事件
$("#search").keyup(function(){
var str=$("#search").val();
$.ajax({
url: "system/organ/search",
data: ‘key=‘+str,
contentType: "application/json; charset=utf-8",
type: "get",
success: function (data) {
alert(data);
}
});
});
//添加部门
$("#addChildOrgan").on("click", function () {
$("#modalTitle").html("添加部门");
$("#care").html("部门名称");
$("#sex").hide();
$("#partment").html("上级部门");
$("#adress").html("部门地址");
$("#mangent").html("部门负责人");
$("#phonetel").html("联系电话");
customGlobal.clearFormAndShowDialog("modalDialog");
$("#addBtn").show();
$("#updateBtn").hide();
// 获取光标选中的(selected)
var selectedNode = zTreeObj.getSelectedNodes()[0];
initUser();
});
function getUserList() {
var userList = [];
var $organSelectList = $("#organSelectList2");
$organSelectList.find("option").each(function () {
var $this = $(this);
userList.push({
userId: $this.val()
})
});
return userList;
}
//请求后台添加部门
$("#addBtn").on("click", function () {
$.ajax({
url: "system/organ",
dataType: "json",
data: JSON.stringify({
organName: $("#organName").val(),
parentId: $("#parentId").val(),
address: $("#address").val(),
manager:$("#manager").val(),
phone:$("#phone").val()
}),
contentType: "application/json; charset=utf-8",
type: "post",
success: function (data) {
if (customGlobal.ajaxCallback(data)) {
$("#modalDialog").modal("hide");
initTree();
}
}
});
});
//添加员工
$("#toUpdateBtn").on("click", function () {
$("#modalTitle").html("新建员工");
$("#care").html("姓名");
$("#sex").show();
$("#partment").html("所属部门");
$("#adress").html("职位");
$("#mangent").html("邮箱");
$("#phonetel").html("联系电话");
customGlobal.clearFormAndShowDialog("modalDialog");
$("#addBtn").hide();
$("#updateBtn").show();
var organ = data.returnData.organ;
});
//请求后台添加员工
$("#updateBtn").on("click", function () {
$.ajax({
url: "system/organ/addStaff",
dataType: "json",
data: JSON.stringify({
name: $("#organName").val(),
sex: $("#profession").val(),
organId: $("#parentId").val(),
position: $("#parentId").val(),
address: $("#address").val(),
manager:$("#manager").val(),
phone:$("#phone").val()
}),
contentType: "application/json; charset=utf-8",
type: "post",
success: function (data) {
if (customGlobal.ajaxCallback(data)) {
$("#modalDialog").modal("hide");
initTree();
}
}
})
});
//confirm中确认按钮事件，此处需要unbind，否则点击取消时下次再点击删除按钮会重复绑定click。
$("#confirmBtn").on("click.deleteRow", function () {
$.ajax({
//zTree.getSelectedNodes()[0]是获取选中的第一个节点
url: "system/organ/" + zTreeObj.getSelectedNodes()[0].organId,
type: "DELETE",
success: function (data) {
$("#confirmDialog").modal("hide"); //点击删除按钮，隐藏弹框
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
})
});
};
//左右移动
var organSelectList = function () {
$(".fa-arrow-right").on("click", function () {
$("#organSelectList1 option:selected").appendTo($("#organSelectList2"));
});
$(".fa-arrow-left").on("click", function () {
$("#organSelectList2 option:selected").appendTo("#organSelectList1")
})
};
// 修改后保存
$("#keep").on("click", function () {
$.ajax({
url: "system/organ",
dataType: "json",
data: JSON.stringify({
organId: $("#organId").val(),
organName: $("#name").val(),
parentId: $("#parentOrgan").val(),
address: $("#diz").val(),
manager:$("#manage").val(),
phone:$("#tel").val()
}),
contentType: "application/json; charset=utf-8",
type: "put",
success: function (data) {
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
})
});
//点击效果
$("#newadd").on("click", function () {
$("#newaddChildOrgan").toggle();
$("#newtoUpdateBtn").toggle();
});
return {
init: function () {
initTree();
handleEvent();
organSelectList();
}
};
}();
左侧动态加载树，右侧显示树节点的信息