使用Easyui后台管理框架搭建
参考Easyui Layout控件，绘制主工作页面
https://blog.****.net/qixiang_chen/article/details/83145145
页面原型
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String menu = (String)request.getAttribute("menu");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/easyui/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" href="/easyui/themes/icon.css"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>财务报销系统</title>
<script>
//当点击导航树的节点时，在办公区域显示页面
//此方法检查是否存在打开页面
var h = $(window).height() - 125;
function addTabCheckExist(title, url,icon){
if ($('#tabui').tabs('exists', title)){
$('#tabui').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:'+h+'px;"></iframe>';
$('#tabui').tabs('add',{
title:title,
content:content,
closable:true,
iconCls:icon
});
}
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:82px;">
<!-- 定义面板 -->
<div class="easyui-panel" style="height:50px;padding-bottom:0px;background:#B3DFDA;" data-options="border:false">
<!-- 显示Logo Div -->
<div style="width:38%;float:left;margin-left:2%">
<img height="50px" src="/static/images/logo.png"/>
</div>
<!-- 显示系统名称 Div -->
<div style="width:60%;float:right;margin:0;padding:0">
<p style="font-size:18pt;font-weight:bold;color:black;margin:0;padding:0">古方红糖创客平台</font></p>
</div>
<!-- 显示登录用户 Div -->
<div id="userdiv" style="position:absolute;bottom:30px;right:20px;">
<font color="black"><b>当前用户:${user.name}</b></font>
</div>
</div>
<!-- 菜单 -->
<%=menu %>
</div>
<div data-options="region:'west',title:'自定义导航'" style="width:150px;">
<div class="easyui-panel" style="padding:5px;width:100%;heigth:100%;">
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="tabui" class="easyui-tabs" style="width:100%;height:100%;margin:0px;margin-right:0px;">
</div>
</div>
</body>
</html>
后台Controller
@RequestMapping("/main")
public String main(HttpServletRequest req)
{
String userId = "";
String menu = serv.generateMenuBar(userId);
req.setAttribute("menu", menu);
return "main";
}
服务类的方法generateMenuBar负责生成动态菜单控件，菜单是树状数据结构，需要使用递归遍历生成，如下分析Easyui菜单控件代码生成规则。
递归生成菜单方法
数据准备：
create table gf_function(id varchar(40),name varchar(100),
url varchar(100),priority int,icon varchar(50),parentid varchar(40));
insert into gf_function(id,name,url,priority,icon,parentid)
values('root','功能树','',0,'',null);
insert into gf_function(id,name,url,priority,icon,parentid)
values('sysadmin','系统管理','',1,'','root');
insert into gf_function(id,name,url,priority,icon,parentid)
values('corp','协同办公','',2,'','root');
insert into gf_function(id,name,url,priority,icon,parentid)
values('org','组织管理','',1,'','sysadmin');
insert into gf_function(id,name,url,priority,icon,parentid)
values('dept','部门管理','/org',0,'','org');
insert into gf_function(id,name,url,priority,icon,parentid)
values('user','用户管理','/user',1,'','org');
insert into gf_function(id,name,url,priority,icon,parentid)
values('changepwd','修改密码','',1,'','user');
insert into gf_function(id,name,url,priority,icon,parentid)
values('adduser','添加用户','/user',2,'','user');
insert into gf_function(id,name,url,priority,icon,parentid)
values('permission','权限分配','',2,'','sysadmin');
Easyui菜单控件代码模板
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
</div>
<div id="mm1" style="width:150px;">
<div data-options="iconCls:'icon-undo'">
<span>菜单1</span>
<div>
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>
<span>菜单11</span>
<div>
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>
</div>
</div>
</div>
</div>
</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Toolbar</span>
<div>
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
<div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
<p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
</div>
第一级菜单无规律，必须使用单独方法生成
/**
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
</div>
*/
@Override
public String generateMenuBar(String userId) {
FunctionInfo root = getRoot();
if(root != null)
{
List<FunctionInfo> child = getMenu(root.getId());
StringBuffer sb = new StringBuffer();
sb.append("<div class=\"easyui-panel\" style=\"height:30px;padding-bottom:0px;background:#B3DFDA;\">\r\n");
StringBuffer sb2 = new StringBuffer();
for(FunctionInfo fi:child)
{
String id = fi.getId();
String icon = fi.getIcon();
String name = fi.getName();
sb.append("<a class=\"easyui-menubutton\" data-options=\"menu:'#"+id+"',iconCls:'"+icon+"'\">"+name+"</a>\r\n");
sb2.append("<div id=\""+id+"\" style=\"width:150px;\">\r\n");
recurseFunction(userId,id,sb2);
sb2.append("</div>\r\n");
}
sb.append("</div>\r\n");
String menu = sb.toString()+sb2.toString();
return menu;
}
return "";
}
从第二级菜单存在规律，可以使用递归生成
/**
<div id="sysadmin" style="width:150px;">
<div>
<span>组织管理</span>
<div>
<div>
<span>用户管理</span>
<div>
<div>修改密码</div>
</div>
</div>
</div>
</div>
</div>
<div id="corp" style="width:150px;">
</div>
*/
@Override
public void recurseFunction(String userId,String id, StringBuffer sb) {
List<FunctionInfo> child = getMenu(id);
for(FunctionInfo fi:child)
{
sb.append("<div onclick='javascript:addTabCheckExist(\""+fi.getName()+"\",\""+fi.getUrl()+"\",\""+fi.getIcon()+"\");'>\r\n");
List<FunctionInfo> child2 = getMenu(fi.getId());
if(child2 != null && child2.size()>0)
{
sb.append("<span>"+fi.getName()+"</span>\r\n");
sb.append("<div>\r\n");
recurseFunction(userId,fi.getId(),sb);
sb.append("</div>\r\n");
}
else
{
sb.append(fi.getName()+"\r\n");
}
sb.append("</div>\r\n");
}
}
菜单的功能授权后续章节完成，所以在菜单生成方法里传入了用户ID。