本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
我知道两种方式实现：
一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因)
二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存）
如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以考虑用websocket实现
首先是service层如何获取所有的菜单(主菜单和所有的子菜单)
/** *获取所有菜单 **/ @Override public List<MeunInfo> getParentMeun() { //获取所有的菜单(包括子菜单和父级菜单) List<MeunInfo> list = meunDao.getParentMeun(); //创建一个集合用于保存所有的主菜单 List<MeunInfo> rootMeun=new ArrayList<>(); //遍历所有菜单集合,如果是主菜单的话直接放入rootMeun集合 for (MeunInfo info:list){ //判断为0是因为我的主菜单标识是0 if (info.getMeunParent()==0){ rootMeun.add(info); } } //这个是遍历所有主菜单,分别获取所有主菜单的所有子菜单 for (MeunInfo info:rootMeun){ //获取所有子菜单 递归 List<MeunInfo> childrenList=getchildrenMeun(info.getId(),list); //这个是实体类中的子菜单集合 info.setChildrenList(childrenList); } return rootMeun; } /*** 递归获取子菜单(这个我也不太理解，copy过去就行)**/public List<MeunInfo> getchildrenMeun(int id,List<MeunInfo> allMeun){ //用于保存子菜单 List<MeunInfo> childrenList=new ArrayList<>(); for (MeunInfo info: allMeun){ //判断当前的菜单标识是否等于主菜单的id if(info.getMeunParent()==id){ //如果是的话 就放入主菜单对象的子菜单集合 childrenList.add(info); } } //这里就是递归了，遍历所有的子菜单 for (MeunInfo info:childrenList){ info.setChildrenList(getchildrenMeun(info.getId(),allMeun)); } //如果子菜单为空的话，那就说明某菜单下没有子菜单了，直接返回空,子菜单为空的话就不会继续 //迭代了 if(childrenList!=null && childrenList.size()==0){ return null; } return childrenList; } 接下来是实体类
//菜单id private int id; //菜单标题 private String meunTitle; //菜单地址 private String meunUrl; //菜单状态 private int meunStatus; //菜单标识 private int meunParent; //菜单排序 private int meunSort; //子菜单集合 private List<MeunInfo> childrenList; //get set 省略
之后你可以测试，可以拿到结果,这个自行测试
界面代码(注意这里我是用的是layui)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/layui.css" rel="external nofollow" > <style type="text/css"> #index-container,html,body{ margin:0px; padding:0px; } #index-container{ width:100%; height:auto; } #index-navigationbar{ width:100%; height:60px; } #index-navigationbar ul{ padding-left:77%; } #index-commonmenu{ width: 15%; height:519px; float: left; } #indixe-tab{ width:84.9%; height: 150px; float: right; } </style></head><body> <!--首页容器--> <div id="index-container"> <!--信息菜单--> <div id="index-navigationbar"> <ul class="layui-nav" style="text-algin:right;background-color: black;"> <li class="layui-nav-item"> <a href="">控制台<span class=" rel="external nofollow" layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">个人中心<span class=" rel="external nofollow" layui-badge-dot"></span></a> </li> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改信息</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >安全管理</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退了</a></dd> </dl> </li> </ul> </div> <!--操作菜单--> <div id="index-commonmenu"> <ul class="layui-nav layui-nav-tree" lay-filter="demo" style="margin-right:10px;height:538px;"> <!-- <li class="layui-nav-item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >笔记管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" meun_id=1>笔记列表</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分享列表</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >解决方案</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其他</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三级菜单</a></dd> </dl> </dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >云市场</a></li> <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社区</a></li>--> </ul> </div> <!--页面选项卡--> <div id="indixe-tab"> <div class="layui-tab" lay-allowClose="true" lay-filter="demo1" style="margin:0px;padding:0px;"> <ul class="layui-tab-title"> </ul> <div class="layui-tab-content" style="margin:0px;padding:0px;"> </div> </div> </div> <div style="clear: both"></div> </div></body></html><script type="text/javascript" src="/layui.js"></script><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; element.on('nav(demo)', function(elem){ //console.log(elem.getAttribute("meun_id")); //得到当前点击的DOM对象 var id=$(this).attr("meun_id"); if(typeof(id)!="undefined"){ console.log('进入方法'); element.tabAdd('demo1', { title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '<iframe src="test.html" style="width:100%;height:491px;" scrolling="auto" frameborder="0"></iframe>' ,id: id//实际使用一般是规定好的id，这里以时间戳模拟下z }) element.tabChange('demo1', id); } }); //获取所有的菜单 $.ajax({ type:"GET", url:"http://localhost:8080/test", dataType:"json", success:function(data){ //先添加所有的主材单 $.each(data,function(i,obj){ var content='<li class="layui-nav-item">'; content+='<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+obj.meunTitle+'</a>'; //这里是添加所有的子菜单 content+=loadchild(obj); content+='</li>'; $(".layui-nav-tree").append(content); }); element.init(); }, error:function(jqXHR){ aler("发生错误："+ jqXHR.status); } }); //组装子菜单的方法 function loadchild(obj){ if(obj==null){ return; } var content=''; if(obj.childrenList!=null && obj.childrenList.length>0){ content+='<dl class="layui-nav-child">'; }else{ content+='<dl>'; } if(obj.childrenList!=null && obj.childrenList.length>0){ $.each(obj.childrenList,function(i,note){ content+='<dd>'; content+='<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+note.meunTitle+'</a>'; if(note.childrenList==null){ return; } content+=loadchild(note); content+='</dd>'; }); content+='</dl>'; } console.log(content); return content; } });</script> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。
注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。
