Layui实现左侧点击菜单,右侧显示内容

功能简介:

layui实现点击左侧的菜单,在右侧显示内容。
其实并不是非要layui前端框架,这个左侧点击,右边显示内容的原理是iframe完成的,其它框架都可以实现。

附上完整demo:https://github.com/BraisedPanda/StudentSystem2.5
demo里面static下的sql文件夹里有完整的数据库表和测试数据
登录界面登录名:zhangsan 密码:123

1、核心代码

1.1 左侧菜单核心代码:也就三个普通的超链接,赋予了data-src属性,后面是对应的action地址


      <dd class="main_left"><a  data-src="/tostudentlist"  target="_top" >学生列表</a></dd>
 

  
       <dd class="main_left"><a data-src="/toclasslist" target="_top">班级列表</a></dd>


   
       <dd class="main_left"><a data-src="/userlist2" target="_top">用户列表</a></dd>


1.2 同页面中,添加iframe标签,来展示要显示的内容:

<div class="main_right">
    <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="aa">
    </iframe>
</div>

1.3 最后绑定js事件,获取超链接中的src值,传给后台,后台传过来数据进行展示。

 $(function(){	
 		//获取src值
        $(".main_left a").on("click",function(){
            var address =$(this).attr("data-src");
            $("iframe").attr("src",address);
        });
		//一下代码是根据窗口高度在设置iframe的高度
        var frame = $("#aa");
	
        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);


    });

2、后端代码

这里以tostudentlist这个controller为例子


    @RequestMapping("tostudentlist")
    public String tostudentlist(){
        return "student/allstudent";
    }

3、前端页面

在这里插入图片描述

4、效果演示

在这里插入图片描述

左侧点击,右边显示内容了。
以前我一直不会弄,就用了个笨方法,用thymeleaf提取出公共部分(提取了左侧菜单和头部),然后每个页面都复制粘贴一份QAQ,这样假装骗过自己(捂脸)…

前面的demo内容预览

预览

登录界面

在这里插入图片描述

学生列表




班级列表

在这里插入图片描述



添加学生

在这里插入图片描述



我的考试成绩




各班级考试成绩

在这里插入图片描述



所有角色一览

在这里插入图片描述


各角色对应的权限

在这里插入图片描述



新建权限角色(可定制可观看的菜单和对应的操作按钮)




授予某个用户权限




附上我参考的连接:使用网页嵌套iframe标签,点击左侧导航栏,在右侧动态显示页面的信息

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐