jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>后台管理</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../css/admin.css" />
<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/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/admin.js"></script>
</head>
<body class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',border:true,split:true" style="height: 80px; background: #666;">
<div class="logo">后台管理†</div>
<div class="logout">
您好, ### | <a href="#">退出</a>
</div>
</div>
<div data-options="region:'west',split:true,title:'系统菜单'" style="width: 15%">
<div id="menuAccordion"></div>
</div>
<div data-options="region:'center',title:'工作区'">
<div id="tabs" class="easyui-tabs" data-options="fit:true">
<div id="deskTop" title="我的桌面" style="padding: 10px;">
<p style="font-size: 14px">11111111111111</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div id="mm" class="easyui-menu" style="display: none;">
<div id="mm-tabclose" data-options="iconCls:'icon-application_delete'">关闭当前</div>
<div id="mm-tabcloseother" data-options="iconCls:'icon-server_delete'">关闭其他</div>
<div id="mm-tabcloseall" data-options="iconCls:'icon-folder_delete'">关闭全部</div>
</div>
</div>
</body>
</html>
js
$(function() {
initAccordion();
initTabsMenu();
});
function initTabsMenu() {
$('#tabs').tabs({
onContextMenu : function(e, title, index) {
//取消右键默认项
e.preventDefault();
$('#mm').menu('show', {
//菜单跟随
left : e.pageX,
top : e.pageY
}).data("index", index);
$("#mm").menu({
onClick : function(item) {
closeTab(this, item.id);
}
});
}
});
}
//选中相应按钮,关闭相应tab
function closeTab(menu, type) {
var allTabs = $("#tabs").tabs('tabs');
var len = allTabs.length;
var index = $(menu).data("index");
if ('mm-tabclose' == type) {
var closable = $('#tabs').tabs('getTab', index).panel('options').closable;
if (closable) {
$("#tabs").tabs("close", index);
}
} else if ('mm-tabcloseall' == type) {
var closableindex = 0;
for (var i = 0; i < len; i++) {
var closable = $('#tabs').tabs('getTab', closableindex).panel(
'options').closable;
if (closable) {
$('#tabs').tabs('close', closableindex);
} else {
closableindex++;
}
}
} else if ('mm-tabcloseother' == type) {
var closableindex = 0;
var focusIndex = index;
for (var i = 0; i < len; i++) {
var closable = $('#tabs').tabs('getTab', closableindex).panel(
'options').closable;
if (index != i && closable) {
$('#tabs').tabs('close', closableindex);
if (index > i) {
focusIndex--;
}
} else {
closableindex++;
}
}
// 使触发关闭其他的tab被选中
$('#tabs').tabs('select', focusIndex);
}
}
//添加tab
function addTab(title, href, icon) {
var tt = $('#tabs');
// 如果tab已经存在,则选中该tab,否则增加新tab
if (tt.tabs('exists', title)) {
tt.tabs('select', title);
} else {
//如果是子节点,添加tab
if (href) {
tt.tabs('add', {
title : title,
// href: href,
content : createFrame(title, href),
closable : true,
cache : true,
iconCls : icon || 'icon-application'
});
}
}
}
function createFrame(title, href) {
var content = '<div style="overflow:hidden;width:100%;height:100%"><iframe name="'
+ title
+ '" src="'
+ href
+ '" frameborder="0" scrolling="no" width="100%" height="100%"></iframe></div>';
return content;
}
//初始化accordion
function initAccordion() {
// 初始化accordion
$("#menuAccordion").accordion({
fit : true,
border : false,
animate : true
});
// 生成主菜单
$.ajax({
type : "GET",
url : "/menu/getMenus.do",
data : {"parentID" : "System"},
success : function(data) {
// 循环创建手风琴的项
var i = 0;
$.each(data,function(i, e) {
var id = e.id;
$('#menuAccordion').accordion('add',{
title : e.text,
content : "<ul id='tree"+ id + "' ></ul>",
selected : i++ == 0 ? true: false,
iconCls : e.iconCls
});
// i++;
// 创建树的项
$.ajax({
type : "GET",
url : "/menu/getMenus.do",
data : {"parentID" : id},
success : function(data) {
$("#tree" + id).tree(
{
data : data,
animate : true,
onClick : function(node) {
if (node.url) {
addTab( node.text,node.url,node.iconCls);
}},
onDblClick : function(node) {
if (!node.url) {
$(this).tree(node.state == 'closed' ? 'expand': 'collapse',node.target);
// 在修改完该节点是否展开之后,要修改node的state属性,不然下次就无法折叠上
node.state = node.state == 'closed' ? 'open': 'closed';
}
}
});
}
});
});
}
});
}
返回的数据json
[{"children":[{"children":[],"iconCls":"icon-save","id":"4","text":"菜单管理","url":"toMenuManager.do"},{"children":[],"iconCls":"icon-save","id":"5","text":"用户管理","url":"toUserManager.do"},{"children":[],"iconCls":"icon-save","id":"6","text":"角色管理","url":"toRoleManager.do"}],"iconCls":"icon-save","id":"1","text":"系统设置","url":"toUserManager.do"},{"children":[{"children":[],"iconCls":"icon-save","id":"7","text":"地区设置"},{"children":[],"iconCls":"icon-save","id":"8","text":"行业类别设置"},{"children":[],"iconCls":"icon-save","id":"9","text":"员工设置"},{"children":[],"iconCls":"icon-save","id":"10","text":"科目设置","url":"toAccount.do"},{"children":[],"iconCls":"icon-save","id":"11","text":"组织架构","url":"toDepartment.do"}],"iconCls":"icon-save","id":"2","text":"基础设置","url":"toUserManager.do"},{"children":[{"children":[{"children":[],"iconCls":"icon-save","id":"22","text":"财务经费设置","url":"toFinanceSet.do"},{"children":[],"iconCls":"icon-save","id":"23","text":"预算追加申请","url":"toAddBudgetApply.do"}],"iconCls":"icon-save","id":"21","text":"配置管理"},{"children":[{"children":[],"iconCls":"icon-save","id":"25","text":"所有部门经费查询","url":"toAllDepartmentFinanceQuery.do"},{"children":[],"iconCls":"icon-save","id":"26","text":"费用项目汇总","url":"toFinanceAccountSum.do"},{"children":[],"iconCls":"icon-save","id":"27","text":"部门经费查询","url":"toDepartmentFinanceQuery.do"}],"iconCls":"icon-save","id":"24","text":"费用预算"}],"iconCls":"icon-save","id":"20","text":"财务管理"}]
后台
public void getMenus(String parentID,ModelMap modelMap, HttpServletRequest request,HttpServletResponse response) {
//获取用户登录的UserID
int uid= (Integer) sessionProvider.getAttribute(request, "uid", response);
//权限id数组
Integer[] pids= (Integer[]) sessionProvider.getAttribute(request, "pids", response);
//获取菜单集合
if(parentID ==null){
parentID="System";
}
String tree = treeService.getTree(parentID, uid);
ResponseUtils.renderJson(response, tree);
}
public class TreeServiceImpl implements TreeService{
@Autowired
private TreeDao treeDao;
//生成tree的json字符串
public String getTree(Integer uid) {
//获取根节点
List<Tree> Trees = treeDao.getByPid("0",uid);
List<Tree> bulidTree =this.bulidTree(Trees,uid);
JSONObject jo=new JSONObject();
jo.put("bulidTree", bulidTree);
// StringUtil.StringToJson(jo.toString());
return StringUtil.StringToJson(jo.toString());
}
public String getTree(String parentID,Integer uid) {
//获取根节点
List<Tree> Trees = treeDao.getByid(parentID,uid);
List<Tree> bulidTree =this.bulidTree(Trees,uid);
JSONObject jo=new JSONObject();
jo.put("bulidTree", bulidTree);
// StringUtil.StringToJson(jo.toString());
return StringUtil.StringToJson(jo.toString());
}
//获取root节点的子节点
public List<Tree> bulidTree(List<Tree> root,Integer uid){
for (int i=0;i<root.size();i++) {
//如果该节点是父节点,将该节点当做root节点,递归bulidTree
try {
List<Tree> sonTrees = treeDao.getByPid(root.get(i).getId(),uid);
bulidTree(sonTrees,uid);
root.get(i).setChildren(sonTrees);
} catch (Exception e) {
// 没有获取到数据
e.printStackTrace();
continue;
}
}
return root;
}
}
public static String StringToJson(String str) {
String objectName="\"bulidTree\":";
str=str.replaceAll(objectName, "");
int index= str.lastIndexOf("}");
str=str.substring(1, index);
return str;
}