EasyUI之生成动态异步菜单栏

  在项目开发中,对于整体的页面布局中对于菜单导航栏我们一般设计为根据不同的用户权限展示不同的菜单选项,同时菜单显示也会做异步加载处理。本文就来介绍下基于EasyUI的tree插件来实现导航栏的异步加载实现。

EasyUI中tree的异步加载

1.实现效果

  首先我们来看下最终的实现效果,具体如下。

2.表结构设计

  因为在tree插件显示数据的时候对应查询的json数据的字段有要求,具体参考官网:http://www.jeasyui.net/plugins/185.html ,所以为了避免查询的数据和需要显示的数据不一致而造成的数据的转换,所以在设计表结构的时候可以注意下。菜单的结构如下:

测试数据

3.服务端处理

  通过mybatis的逆向工程生成相关的接口,映射文件和pojo文件等。然后在controller中定义处理请求的方法,接收查询菜单的id。返回JSON数据,如下:

/**
 *  异步查询菜单【node】信息
 * @param  id
 * @return
 */
@RequestMapping("/getNode")
@ResponseBody
public List<Menu> getNode(Integer id){
    Menu menu = new Menu();
    if(id !=null && id > 0){
        menu.setParentId(id);
    }else{
        menu.setParentId(0);
    }
    return menuService.query(menu);
}

然后在控制器中具体处理请求

public List<Menu> query(Menu menu) {
    MenuExample example = new MenuExample();
    MenuExample.Criteria criteria = example.createCriteria();
    if(menu!=null){
        if(menu.getParentId()!=null ){
            // 根据父菜单编号查询
            criteria.andParentIdEqualTo(menu.getParentId());
        }else{
            criteria.andParentIdEqualTo(0);
        }
    }
    return menuMapper.selectByExample(example);
}

4.页面js代码实现

  home界面的主要代码如下:

<body class="easyui-layout">
		<!-- 顶部  Logo -->
		<div data-options="region:'north',border:true,split:true"
			style="height: 100px;background: url(img/logo.png) no-repeat 0% 50%;  ">
			
			<div class="topNav" style="border: 0px red solid; width: 230px; height: 80px; line-height:80px; float: right;">
				<a href="https://www.itbaizhan.com/" target="_blank" style="color:red">百战程序员</a>  | 
				 <a href="#"><shiro:principal property="username"></shiro:principal></a> |
				<a href="logout.do"> 安全退出 </a>
			</div>
			
		</div>
		<!-- 右侧  菜单栏 -->
		<div data-options="region:'west',title:'导航栏',split:true"
			style="width: 180px;">
			    <ul id="tt" class="easyui-tree">
				    	<!-- 动态加载数据 -->
			    </ul>
		</div>
		<!-- 中间  内容主体 -->
		<div data-options="region:'center',border:false"
			style="padding: 0px; background: #eee;">
			    <div id="tabs" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
			        <div title="首页" style="padding:20px;display:none;">
			    		欢迎光临
			        </div>
			    </div>
		</div>
		
		<script type="text/javascript">
			function goTabs(path,title){
				// 动态添加一个标签页
				var isSelect = $("#tabs").tabs('exists', title);
			    // 添加一个新的标签页面板(tab panel)
				if(isSelect){
					$("#tabs").tabs('select', title);
					return;
				}else{
					$('#tabs').tabs('add',{
						title:title,
						content:'<iframe src="'+path+'" width="100%" height="100%" style="border: 0px;"></iframe>',
						closable:true,
						//刷新按钮
						tools: [{
							iconCls: 'icon-mini-refresh',
							handler: function(){
								var currentTab = $('#tabs').tabs('getSelected');
								RefreshTab(currentTab);
							}
						}]
					});
				}

			}

			//刷新当前标签Tabs
			function RefreshTab(currentTab) {
				var url = $(currentTab.panel('options')).attr('href');
				$('#tabs').tabs('update', {
					tab: currentTab,
					options: {
						href: url
					}
				});
				currentTab.panel('refresh');
			}

			$(function(){
				// 动态添加菜单
				$("#tt").tree({
					url: "/sys/menu/getNode",
					onClick: function(node){
						if(node.url != null && node.url != '' ){
							// 打开一个新的窗口
							goTabs(node.url+"/go",node.text);
						}
					}
				});
			});
			
		</script>
		
		
</body>
</html>

  加载导航菜单的核心代码:

// 加载菜单数据 state:closed是关键
$(function(){
	// 动态添加菜单
	$("#tt").tree({
		url: "/sys/menu/getNode",
		onClick: function(node){
			if(node.url != null && node.url != '' ){
				// 打开一个新的窗口
				goTabs(node.url+"/go",node.text);
			}
		}
	});
});

// 点击子菜单开的一个新窗口的代码
function goTabs(path,title){
	// 动态添加一个标签页
	var isSelect = $("#tabs").tabs('exists', title);
    // 添加一个新的标签页面板(tab panel)
	if(isSelect){
		$("#tabs").tabs('select', title);
		return;
	}else{
		$('#tabs').tabs('add',{
			title:title,
			content:'<iframe src="'+path+'" width="100%" height="100%" style="border: 0px;"></iframe>',
			closable:true,
			//刷新按钮
			tools: [{
				iconCls: 'icon-mini-refresh',
				handler: function(){
					var currentTab = $('#tabs').tabs('getSelected');
					RefreshTab(currentTab);
				}
			}]
		});
	}
}
//刷新当前标签Tabs
function RefreshTab(currentTab) {
	var url = $(currentTab.panel('options')).attr('href');
	$('#tabs').tabs('update', {
		tab: currentTab,
		options: {
			href: url
		}
	});
	currentTab.panel('refresh');
}

  因为我们的表结构设计的tree默认的字段是一致的所以省略掉了转换的过程,如果不一致还需要将查询的数据转换为满足tree展示的数据要求。至于根据账号的权限来查询不同的菜单仅仅只需要在业务逻辑层加上账号的条件即可了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏phodal

学好前端的 6 点建议

最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。

10530
来自专栏雪雁的专栏

CefSharp中c#和JavaScript交互读取电脑信息

CEF是由Marshall Greenblatt于2008年创建的基于Google Chromium的BSD许可开源项目。与主要关注谷歌Chrome应用程序开发...

96820
来自专栏爱明依

react 学习:react 生命周期

9410
来自专栏phodal

关于 Vue 3.0,前端开发者必须知道的不仅仅是Proxy...

前端早已经不是之前人们口中的 “抠图仔”、只是写写简单的 HTML,CSS 和脚本动画。如今的前端早已经系统化,工程化,前后端分离的开发模式带动前端工程师在开发...

12520
来自专栏Java大联盟

Ajax详解

作为资深球迷,提起Ajax,第一反应想到的是阿贾克斯,那个曾培养出伊布,范德法特,苏亚雷斯,亨特拉尔等一众球星的荷甲著名球队。

24640
来自专栏phodal

除了框架,前端面试还问什么

前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图。

9720
来自专栏爱明依

react学习:React状态

7820
来自专栏csdn

vue cli3 开发环境与生产环境配置(一)

2.8K30
来自专栏MongoDB中文社区

常见问题:MongoDB基础知识

是的。MongoDB Atlas是一种云托管的数据库即服务。有关更多信息,请访问MongoDB Atlas文档。

10110
来自专栏爱明依

react 学习:React属性 数组遍历、css引入

23420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励