构造左侧菜单和对应的右侧Tab

iamlihongwei 2013-07-18

效果：
构造左侧菜单和对应的右侧Tab
 

Layout.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>

  <definition name="admin" template="/WEB-INF/layouts/admin.jsp">
    <put-attribute name="header" value="/WEB-INF/views/header.jsp" />
    <put-attribute name="menu" value="/WEB-INF/views/menu.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/footer.jsp" />
  </definition>
  <definition name="content" template="/WEB-INF/layouts/content.jsp">
  </definition>
</tiles-definitions>

 views.xml:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
	<!-- 服务实施 -->
	<definition extends="content" name="esbService/define">
		<put-attribute name="body" value="/WEB-INF/views/service/serviceImplement/serviceDefine.jsp"/>
	</definition>
	<definition extends="content" name="esbService/test">
		<put-attribute name="body" value="/WEB-INF/views/service/serviceImplement/serviceTest.jsp"/>
	</definition>
...

 admin.jsp:

<body class="easyui-layout">
        <!-- north -->
		<div id="header" class="top_body" data-options="region:'north',border:false">
		    <tiles:insertAttribute name="header"/>
		</div>

		<!-- west -->
		<div id="menu" data-options="region:'west',split:true"
			style="width: 180px; padding: 1px; overflow: hidden;">
			<div id="firstMenu" class="easyui-accordion" animate="false"
							data-options="fit:true,border:false"></div>
		</div>
		<!-- center -->
		<div id="content" data-options="region:'center'" style="overflow: hidden;">
			<div id="centerTabs" class="easyui-tabs"
				data-options="fit:true,border:false">
				<div title="<spring:message code="index.welcomeAccess" text="欢迎界面"/>"
					style="padding: 20px; overflow: hidden;">
					<div id="container">
						<tiles:insertAttribute name="body"/>
					</div>
				</div>
			</div>
			<!-- centerMenu -->
			<div id="tabsMenu" style="width: 100px; display: none;">
				<div type="close">
					<spring:message code="index.close" text="关闭"/>
				</div>
				<div type="closeOther">
					<spring:message code="index.closeOther" text="关闭其他" />
				</div>
				<div type="closeAll">
					<spring:message code="index.closeAll" text="关闭所有"/>
				</div>
			</div>
		</div>
		<!-- south -->
		<div id="footer" data-options="region:'south',border:false"
			style="height: 20px; padding: 3px; background: #cee0e7; overflow: hidden;">
			<tiles:insertAttribute name="footer"/>
		</div>
		
	</body>

 index.js:

$(function () {
	// west
	var firstMenu = $('#firstMenu');
	var fistMenuUrl = root + 'js/app/home/menuMain.json';
	
	// ================================================================================
	$.ajax({
		url : fistMenuUrl,
		dataType : 'json',
		success : function(data) {
			addAccordions(data)
		}
	});
	
	addAccordions = function(data) {
		var firstViewTitle;
		if (data.length > 0) {
			firstViewTitle = data[0].title;
			for ( var i = 0; i < data.length; i++) {
				firstMenu.accordion('add', {
					title : data[i].title,
					iconCls : data[i].iconCls,
					content : secondMenu(data[i].id)
				});
			}
			firstMenu.accordion('select', firstViewTitle);
		}
	}
	secondMenu = function(pid) {
		var url = root + 'js/app/home/tree_data' + pid + '.json';
		return '<ul data-options="onClick:menuOnClick,onDblClick:menuonDblClick" class="easyui-tree" url="'
				+ url + '"></ul>';
	}
	menuOnClick = function(node) {
		addTab(node);
	}
	menuonDblClick = function(node) {
		if (node.state == 'closed') {
			$(this).tree('expand', node.target);
		} else {
			$(this).tree('collapse', node.target);
		}
	}
	
	// center
	var centerTabs = $('#centerTabs');
	var tabsMenu = $('#tabsMenu');
	centerTabs.tabs({
		fit : true,
		border : false,
		onContextMenu : function(e, title) {
			e.preventDefault();
			tabsMenu.menu('show', {
				left : e.pageX,
				top : e.pageY
			}).data('tabTitle', title);
		}
	});

	tabsMenu.menu({
		onClick : function(item) {
			var curTabTitle = $(this).data('tabTitle');
			var type = $(item.target).attr('type');
			if (type === 'refresh') {
				refreshTab(curTabTitle);
				return;
			}
			if (type === 'close') {
				var t = centerTabs.tabs('getTab', curTabTitle);
				if (t.panel('options').closable) {
					centerTabs.tabs('close', curTabTitle);
				}
				return;
			}
			var allTabs = centerTabs.tabs('tabs');
			var closeTabsTitle = [];
			$.each(allTabs, function() {
				var opt = $(this).panel('options');
				if (opt.closable && opt.title != curTabTitle
						&& type === 'closeOther') {
					closeTabsTitle.push(opt.title);
				} else if (opt.closable && type === 'closeAll') {
					closeTabsTitle.push(opt.title);
				}
			});
			for ( var i = 0; i < closeTabsTitle.length; i++) {
				centerTabs.tabs('close', closeTabsTitle[i]);
			}
		}
	});

	addTab = function(node) {
		if (centerTabs.tabs('exists', node.text)) {
			centerTabs.tabs('select', node.text);
		} else {
			if (node.attributes && node.attributes.url
					&& node.attributes.url.length > 0) {
				var url = root + node.attributes.url;
				centerTabs.tabs(
								'add',
								{
									title : node.text,
									iconCls : node.iconCls,
									closable : true,
									content : '<iframe src="' 
											+ url
											+ '" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>'
								});
			}
		}
	}
});

 MenuMain.json:

[
    {
        "id":"01",
        "title":"服务实施"
    },
    {
        "id":"02",
        "title":"服务目录"
    },
    {
        "id":"03",
        "title":"服务监控"
    },
    {
        "id":"04",
        "title":"服务控制"
    },
    {
        "id":"05",
        "title":"系统管理"
    }
]

 tree_data01.json:

[{
						"attributes" : {
							"url" : "esbService/define.do"
						},
						"id" : "010101",
						"state" : "open",
						"text" : "服务定义"
					}, {
						"attributes" : {
							"url" : "esbService/proxy.do"
						},
						"id" : "010102",
						"state" : "open",
						"text" : "服务封装"
					}, {
						"attributes" : {
							"url" : "esbService/route.do"
						},
						"id" : "010103",
						"state" : "open",
						"text" : "服务路由"
					}]

================================================================================

新JS：（从数据库中获取菜单）

含菜单图标

$(function () {
	// west
	var firstMenu = $('#firstMenu');
	//var fistMenuUrl = root + 'js/app/home/menuMain.json';
	
	// ================================================================================
	$.ajax({
		url : root + "login/initRootMenu.do",
		type : 'POST',
		dataType : 'json',
		success : function(data) {
			addAccordions(data);
			addHome();
		}
	});
	
	addAccordions = function(data) {
		var firstViewTitle;
		if (data.length > 0) {
			firstViewTitle = data[0].menuName;
			for ( var i = 0; i < data.length; i++) {				
				firstMenu.accordion('add', {
					title : data[i].menuName,
					iconCls : 'icon'+(i+1),
					left: 50,
					content : secondMenu(data[i].id)
				});
			}
			firstMenu.accordion('select', firstViewTitle);
		}
	}
	secondMenu = function(pid) {
		var url = root + "login/initLeafMenu.do?pid="+pid;
		return '<ul data-options="onClick:menuOnClick,onDblClick:menuonDblClick" class="easyui-tree" url="'
				+ url + '"></ul>';
	}
	
	menuOnClick = function(node) {
		if($(this).tree("isLeaf",node.target)){
			addTab(node);
		}else{
			if (node.state == 'closed') {
				$(this).tree('expand', node.target);
			} else {
				$(this).tree('collapse', node.target);
			}
		}
		
	}
	menuonDblClick = function(node) {
		if (node.state == 'closed') {
			$(this).tree('expand', node.target);
		} else {
			$(this).tree('collapse', node.target);
		}
	}
	
	// center
	var centerTabs = $('#centerTabs');
	var tabsMenu = $('#tabsMenu');
	centerTabs.tabs({
		fit : true,
		border : false,
		onContextMenu : function(e, title) {
			e.preventDefault();
			tabsMenu.menu('show', {
				left : e.pageX,
				top : e.pageY
			}).data('tabTitle', title);
		},
		tools : [{
			iconCls : 'ope-add',
			text : '添加组件',
			plain:false,
			handler : function() {
				addAppDialog(1);
			}
		}]
	});

	tabsMenu.menu({
		onClick : function(item) {
			var curTabTitle = $(this).data('tabTitle');
			var type = $(item.target).attr('type');
			if (type === 'refresh') {
				refreshTab(curTabTitle);
				return;
			}
			if (type === 'close') {
				var t = centerTabs.tabs('getTab', curTabTitle);
				if (t.panel('options').closable) {
					centerTabs.tabs('close', curTabTitle);
				}
				return;
			}
			var allTabs = centerTabs.tabs('tabs');
			var closeTabsTitle = [];
			$.each(allTabs, function() {
				var opt = $(this).panel('options');
				if (opt.closable && opt.title != curTabTitle
						&& type === 'closeOther') {
					closeTabsTitle.push(opt.title);
				} else if (opt.closable && type === 'closeAll') {
					closeTabsTitle.push(opt.title);
				}
			});
			for ( var i = 0; i < closeTabsTitle.length; i++) {
				centerTabs.tabs('close', closeTabsTitle[i]);
			}
		}
	});
	
	addHome = function(){
		var title = '个人工作台';
		if(centerTabs.tabs('exists', title)){
			centerTabs.tabs('select', title);
		}else{
			var url =  "/ESBConsole/index.do";
			centerTabs.tabs(
					'add',
					{
						title : title,
						closable : false,
						content : '<iframe src="' 
								+ url
								+ '" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>'
					});
		}
	}

	addTab = function(node) {
		if (centerTabs.tabs('exists', node.text)) {
			centerTabs.tabs('select', node.text);
		} else {
			if (node.attributes && node.attributes.url
					&& node.attributes.url.length > 0) {
				var url = root + node.attributes.url;
				centerTabs.tabs(
								'add',
								{
									title : node.text,
									iconCls : node.iconCls,
									closable : true,
									selected: true,
									content : '<iframe src="' 
											+ url
											+ '" frameborder="0" style="border:0;width:98%;height:99.4%;overflow:hidden;"></iframe>'
								});
				
				
			}
		}
	}
});
/**
	 * 初始化根节点
	 * @param session
	 * @return
	 */
	@RequestMapping(value = "login/initRootMenu.do", method = RequestMethod.POST)
	@ResponseBody
	public List<SysMenu> initRootMenu(HttpSession session) {
		List<SysMenu> menuList = (List<SysMenu>) session.getAttribute(SessionKeys.SESSION_USER_MENU);
		List<SysMenu> rootList = new ArrayList<SysMenu>();  
		Map<Long,List<SysMenu>> leafMap = new HashMap<Long,List<SysMenu>>();
		if(menuList == null || menuList.size() == 0) return rootList;
		Map<Long,SysMenu> allMenu = new HashMap<Long,SysMenu>(); //所有Menu
		List<SysMenu> tmpList = new ArrayList<SysMenu>();
		tmpList.addAll(menuList);
		for(int i = tmpList.size() -1;i>=0;i--){
			SysMenu tmp = tmpList.get(i);
			if(!allMenu.containsKey(tmp.getId())){
				allMenu.put(tmp.getId(), tmp);
			}
			
			if(tmp.getSupId() == -1l){
				rootList.add(tmp);
				tmpList.remove(tmp);
			}
		}
		
		if(tmpList.size() > 0){
			for(int i = tmpList.size() -1;i>=0;i--){
				SysMenu m = tmpList.get(i);
				Long supId = m.getSupId();
				if(leafMap.containsKey(supId)){
					List<SysMenu> leafMenu = leafMap.get(supId);
					leafMenu.add(m);
				}else{
					List<SysMenu> leafMenu = new ArrayList<SysMenu>();
					leafMenu.add(m);
					leafMap.put(supId, leafMenu);
				}
			}
		}
		
		for(SysMenu m : rootList){
			List<SysMenu> leafMenu = leafMap.get(m.getId());
			m.setChildren(leafMenu);
		}
		session.setAttribute(SessionKeys.SESSION_USER_LEAF_MENU, leafMap);
		session.setAttribute(SessionKeys.SESSION_USER_ALL_MENU, allMenu);
		session.setAttribute(SessionKeys.SESSION_USER_ROOT_MENU, rootList);
		//菜单Order排序
		Collections.sort(rootList, new MenuComparator());
		return rootList;
	}
	
	/**
	 * 初始化叶子节点
	 * @param id
	 * @param session
	 * @return
	 */
	@RequestMapping(value = "login/initLeafMenu.do", method = RequestMethod.POST)
	@ResponseBody
	public List<MenuTemp> initLeafMenu(@RequestParam(required=false) Long id,@RequestParam Long pid,HttpSession session) {
		if(id==null){
			id=pid;
		}
		
		Map<Long,List<SysMenu>> leafMap = (Map<Long, List<SysMenu>>) session.getAttribute(SessionKeys.SESSION_USER_LEAF_MENU);
		List<MenuTemp> result = new ArrayList<MenuTemp>();
		if(leafMap == null) return result;
		List<SysMenu> leafList = leafMap.get(id);
		leafList =  leafList == null ? new ArrayList<SysMenu>() : leafList;
		//菜单Order排序
		Collections.sort(leafList, new MenuComparator());
		
		for(SysMenu m : leafList){
			MenuTemp tmp = new MenuTemp();
			tmp.setId(m.getId());
			tmp.setText(m.getMenuName());
			List<SysMenu> chilren = leafMap.get(m.getId());
			if(chilren!=null&&!chilren.isEmpty()){
				tmp.setState("closed");
			}else{
				tmp.setState("open");
			}
			
			Attributes a = new Attributes();
			a.setUrl(m.getMenuUrl());
			tmp.setAttributes(a);
			result.add(tmp);
		}
		return result;		
	}

CSS：

.icon1{
	background: url('../images/icon_01.png') no-repeat;
}
.icon2{
	background: url('../images/icon_02.png') no-repeat;
}
.icon3{
	background: url('../images/icon_03.png') no-repeat;
}
.icon4{
	background: url('../images/icon_04.png') no-repeat;
}
.icon5{
	background: url('../images/icon_05.png') no-repeat;
}
.icon6{
	background: url('../images/icon_06.png') no-repeat;
}
.icon7{
	background: url('../images/icon_07.png') no-repeat;
}
.icon8{
	background: url('../images/icon_08.png') no-repeat;
}

。。。

iamlihongwei

iamlihongwei

相关推荐

apache tiles的点滴

■tiles是标准的组合模式实现页面渲染的框架，sitemesh是标准的装饰模式的实现。tiles在应用的过程中，更像在面向对象的软件设计中使用继承的方式来重用页面。■另外，tiles在runtime时将不同的页面片段重新组合，配置生成一个新的页面，然后s

ErixHao / 0评论 2011-08-03

Struts2的 Tiles 配置步骤

<?xml version="1.0" encoding="UTF-8" ?>. <!DOCTYPE tiles-definitions PUBLIC. "-//Apache Softwa

ziyifengfei / 0评论 2011-01-09

spring 3 mvc中对title2的处理

这里的contact是继承了base的模版框架了，

LeeEmmmm / 0评论 2010-12-31

搭建Struts2 与 Tiles 框架整合示例

引入Struts 2 Core Libraries和Struts 2 Tiles Libraries两个类库包。

yixiaoqi00 / 0评论 2010-10-20

struts2.0 整合tiles 配置

3.在WEB-INF下添加和tiles.tld和tiles.xml文件，其中tiles.tld内容为tiles-core-2.0-20070207.130156-4.jar包中META_INF/tiles-core.tld的内容。红色部分根据自己项目定。

DGenerationX / 0评论 2010-05-11

struts2.*配置tiles框架(一)

Web.xml文件配置如下:. -- 全局变量,指定tiles.xml的路径 -->. -- tiles监听器(一) 有两种监听器 -->

一个0后IT之路 / 0评论 2010-04-28

Tiles傻瓜式入门

这便是我的第一个tiles例子了。由原来的一个文件变成了四个文件。就变成一句代码了，很简洁吧。怎么样，你知道Tiles是怎么回事了吧，就算入门了，赶紧看Tiles的API吧。

codingker / 0评论 2013-01-05

Tiles傻瓜式入门

这便是我的第一个tiles例子了。由原来的一个文件变成了四个文件。就变成一句代码了，很简洁吧。怎么样，你知道Tiles是怎么回事了吧，就算入门了，赶紧看Tiles的API吧。本文的目的只是让你建立Tiles的概念，而具体如何使用，请看相关文档。

wysjwh / 0评论 2012-10-15

struts2+tiles配置

</struts>红色部分根据自己项目定。

yixu0 / 0评论 2012-08-15

Apache Tiles

Apache的Tiles是一个用于建立简便的Web应用程序用户接口的模板框架。Tiles允许作者定义页片断，这些页片断能在运行时被整合进完整的页中。这些片断或者代码块，能被简单的包含，目的是为了减少页面间公共元素的复制，或者是用其它代码块嵌入来开发一系列可

apacheuk / 0评论 2012-07-04

Apache Tiles 2.x 应用指南

JakartaTiles是一个用于在模板中对页面进行布局的框架。Tiles产生之初是Struts架构的一部分，后来Tiles独立出来常与Spring架构配合，本文描述了独立于其它架构而在原始WEB应用中使用Tiles的方法。Tiles核心配置文件格式为xm

余额不足 / 0评论 2011-08-03

cesium编程入门（七）3D Tiles，模型旋转

cesium编程入门（七）3D Tiles，模型旋转上一节介绍了3D Tiles模型的位置移动，和贴地的操作，这一节来聊一聊模型的旋转，获取3D tiles 的旋转矩阵modelMatrix，然后与旋转矩阵运算，最后将计算结果再赋值给modelMatrix

BitTigerio / 0评论 2018-01-24