效果图:
html代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/icon.css">
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/style/js/common.js"></script>
<style type="text/css">
.top{
padding:50px 0 20px 50px;
}
#fm table tr{
height:25px;
font-size:14px;
}
#dlg-buttons{
padding:0 50px;
}
</style>
<script type="text/javascript">
var subSystemcode="";
//初始化页面组件
$(function () {
//加载combo数据
var subSystemCombx=$("#subSystem").combobox({
url:'getDictSubSystem',
valueField: 'code',
textField: 'name',
panelHeight:'auto',
editable:false,
onSelect:function(record){
//记录下选择的是哪个子系统
subSystemcode=record.code;
//选中值,加载树
var url = "getChildren?code=" + record.code + "&type=ALL";
$('#tree_menu').tree({
animate: false,
checkbox: false,
lines: true,
url:url,
onLoadSuccess: function (row, data) {
//$(this).tree("collapseAll");//树节点全部闭合
},
onClick:function(node){
//把当前树的信息填到右侧
$('#fm').form('load',node);
}
});
}
});
});
</script>
<script type="text/javascript">
var url = "update.json";
//添加子菜单
function addSubMenu(){
//清空form的信息
$('#fm').form('clear');
//获取左侧选中的树节点
var node = $('#tree_menu').tree('getSelected');
// if (!node) {
// $.messager.show({
// title: 'Error',
// msg: "未选择父节点"
// });
// return;
// }
if (!subSystemcode) {
$.messager.show({
title: 'Error',
msg: "未选择系统"
});
return;
}
//记录左侧的树节点的id
var id=null;
if(node!=null){
id=node.id;
}
//初始化赋值:父ID,父节点名称,编码,所属系统,当前编码,state,
$.post('getChildInit/'+id+'/'+subSystemcode+'.json',function(result){
$('#fm').form('load',result);
},'json');
//点保存按钮,执行新增操作
url="save.json";
}
//添加同级菜单
function addBrotherMenu() {
//获取左侧选中的树节点
var node = $('#tree_menu').tree('getSelected');
if (!node) {
$.messager.show({
title: 'Error',
msg: "未选择同级节点"
});
return;
}
//初始化赋值:父ID,父节点名称,编码,所属系统,当前编码,state,
$.post('getBrotherInit/'+node.id+'.json',function(result){
$('#fm').form('load',result);
},'json');
//点保存按钮,执行新增操作
url="save.json";
}
//保存菜单
function saveMenu(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
var result = JSON.parse(data);
if (result.error){
$.messager.show({
title: 'Error',
msg: result.error
});
} else {
$.messager.show({
title: 'Info',
msg: result.info
});
//处理保存完毕,添加节点
if(url.substring(0,4) =="save") {
//$('#tree_menu').tree('reload');
//当前选中的节点
var nodeNow = $("#tree_menu").tree('getSelected');
//添加子节点
if(nodeNow.level<result.auth.level){
$("#tree_menu").tree("append",{
parent: nodeNow.target,
data: [{
"id":result.auth.id,
"text":result.auth.text
}]
});
$('#tree_menu').tree('reload', nodeNow.target);
}
//添加同级节点
if(nodeNow.level==result.auth.level){
var pnode=$("#tree_menu").tree('getParent',nodeNow.target);
$("#tree_menu").tree("append",{
parent: pnode.target,
data: [{
"id":result.auth.id,
"text":result.auth.text
}]
});
$('#tree_menu').tree('reload', pnode.target);
}
} else {
//修改完也刷新树
var node = $('#tree_menu').tree('getSelected');
if(node) {
node.text = result.auth.text;
$("#tree_menu").tree("update", node);
var pnode=$("#tree_menu").tree('getParent',node.target);
$('#tree_menu').tree('reload', pnode.target);
}
}
}
//点保存按钮,默认执行修改操作
url="update.json";
}
});
}
//删除菜单
function destroyMenu(){
var node = $('#tree_menu').tree('getSelected');
if (node){
$.messager.confirm('Confirm','确定删除该菜单?',function(r){
if (r){
$.post('<%= request.getContextPath() %>/manage/auth/delete/'+node.id+'.json',function(result){
if (result.info){
$.messager.show({
title: 'Success',
msg: result.info
});
//刷新节点
//$('#tree_menu').tree('reload');
var node = $("#tree_menu").tree("getSelected");
$('#tree_menu').tree('remove', node.target);
//清空右侧表单数据
$('#fm').form('clear');
} else {
$.messager.show({
title: 'Error',
msg: result.error
});
}
},'json');
}
});
}else{
$.messager.show({
title: 'Error',
msg: "未选择要删除的菜单"
});
}
}
//查询指定菜单,并转向指定菜单
var keyword = null;
function searchMenu() {
keyword = $('#keyword').val();
//tree 转向指定菜单
//展开第一层节点
$("#tree_menu").tree('collapseAll');
var root = $("#tree_menu").tree("find", "1");
$("#tree_menu").tree("expand", root.target);
// var Node = $("#tree_menu").tree("find", 4); //获取当前节点
// $("#tree_menu").tree("expand", Node.target);
// $("#tree_menu").tree("select", Node.target); //定位当前节点
$.post('<%= request.getContextPath() %>/manage/auth/getNodeByName/'+keyword+'/'+subSystemcode,function(result){
if(result[0].level==2){
var Node = $("#tree_menu").tree("find", result[0].id); //获取当前节点
//$("#tree_menu").tree("expand", Node.target);
$("#tree_menu").tree("select", Node.target); //定位当前节点
}else if(result[0].level==3){
var pNode = $("#tree_menu").tree("find", result[0].pid); //获取当前节点的父节点
$("#tree_menu").tree("expand", pNode.target);
//应该当事件结束之后,在find
var childeNode = $("#tree_menu").tree("find", result[0].id); //获取当前节点
$("#tree_menu").tree("select", childeNode.target); //定位当前节点
}
},'json');
}
</script>
<title>Menu管理</title>
</head>
<body class="easyui-layout">
<div data-options="region:'west',split:true" style="width: 18%;" >
<div class="easyui-panel" data-options="border:false" style="padding:5px;">
<div id="tb" style="padding:3px">
<span>菜单:</span>
<input id="keyword" class="easyui-textbox" />
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" οnclick="searchMenu()"></a>
</div>
<div id="comboTree" style="padding:3px">
<span>系统:</span>
<input id="subSystem" class="easyui-combobox" />
<ul id="tree_menu" class="easyui-tree" ></ul>
</div>
</div>
</div>
<div data-options="region:'center', border:false">
<div id="tt" class="easyui-panel" data-options="fit:true,border:false,plain:true">
<div class="top">
<form id="fm" method="post">
<input type="hidden" name="id">
<input type="hidden" name="state">
<input type="hidden" name="subSystemCode">
<input type="hidden" name="level">
<table>
<tr>
<td><label>父级菜单ID:</label></td>
<td><input name="pid" class="easyui-textbox" id="pid" readonly="readonly"></td>
</tr>
<tr>
<td><label>父级菜单名称:</label></td>
<td><input name="pname" class="easyui-textbox" id="pname" readonly="readonly"></td>
</tr>
<tr>
<td><label>编码:</label></td>
<td><input name="code" class="easyui-textbox" readonly="readonly"></td>
</tr>
<tr>
<td><label>菜单名称:</label></td>
<td><input name="text" class="easyui-textbox" data-options="required:true"></td>
</tr>
<tr>
<td><label>菜单URL:</label></td>
<td><input name="menuUrl" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>权限控制URL:</label></td>
<td><input name="authUrl" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>权限编码:</label></td>
<td><input name="authCode" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>权限描述:</label></td>
<td><input name="authDesc" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>菜单序号:</label></td>
<td><input name="menuOrder" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>权限序号:</label></td>
<td><input name="authOrder" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>所属系统:</label></td>
<td><input name="subSystemName" class="easyui-textbox"></td>
</tr>
<tr>
<td><label>是否启用:</label></td>
<td>
<select class="easyui-combobox" data-options="editable:false,panelHeight:'auto'" name="enable">
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</td>
</tr>
<tr>
<td><label>备注:</label></td>
<td><input name="note" class="easyui-textbox" data-options="multiline:true" style="height:60px"></td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" οnclick="addSubMenu()">添加子节点</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" οnclick="addBrotherMenu()">添加同级节点</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" οnclick="saveMenu()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-no" οnclick="destroyMenu()">删除</a>
</div>
</div>
</div>
</body>
</html>