# 9_24 Layui选项卡的实现

9_24 Layui选项卡的实现

1. addTab（）方法

<script async="" src="/back/layui/layui.js"></script>
<script async="" src="/back/layui/layui.all.js"></script>
<script>
    //添加选项卡
    function addTab(name, url) {
        if (layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
            //选项卡已经存在
            layui.element.tabChange('tabDemo', name);
            layer.msg('切换-' + name)
        } else {
            //动态控制iframe高度
            var tabheight = layui.jquery(window).height() - 200;
            contentTxt = '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="' + (tabheight) + 'PX"></iframe>';
            //新增一个Tab项
            layui.element.tabAdd('tabDemo', {
                title: name,
                content: contentTxt,
                id: name
            })
            //切换刷新
            layui.element.tabChange('tabDemo', name)
            layer.msg('新增-' + name)
        }
    }
</script>

2. Freemarke目录树的加载

 <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree site-demo-nav">
                <#macro bpTree children>
                    <#if children?? && children?size gt 0>
                        <#list children as child>
                            <#if child.children?? && child.children?size gt 0>
                                <li class="layui-nav-item layui-nav-itemed">

                                    <a class="javascript:;" href="javascript:;">
                                        <i class="${(child.icon=='')?string('fa fa-share',child.icon) }"
                                           aria-hidden="true"></i>
                                        ${child.menu} <span class="layui-nav-more"></span>
                                        <i class="fa fa-angle-left pull-right" aria-hidden="true"></i>
                                    </a>
                                    <ul class="treeview-menu layui-nav-child"><@bpTree children=child.children /></ul>
                                </li>
                            <#else>
                            <li class="layui-nav-item layui-nav-itemed">
                                <dl class="layui-nav-child">
                                    <dd class="">
                                    <#--οnclick="loadContent('${child.url}')"-->
                                        <i class="${ (child.icon=='')?string('fa fa-circle-o',child.icon) }"
                                           aria-hidden="true"></i>
                                        <a onclick="addTab('${child.menu}','${child.url}')">
                                        <#--href="${child.url}-->
                                            ${child.menu}
                                        </a>
                                    </dd>
                                </dl>
                            </li>
                            </#if>
                        </#list>
                    </#if>
                </#macro>
                <!-- 调用宏 生成递归树 -->
                <@bpTree children=treeMenu />
            </ul>
        </div>
    </div>

3. 菜单树后台数据

   @Controller
   @RequestMapping("/home")
   public class HomeController {
       @Autowired
       private HomeService homeService;
       /**
        * 获取菜单树
        */
       @RequestMapping("/menulist")
       public String menu(Model model){
           List<Menu> menus = homeService.listmenu();
           JSONArray objects = treeMenuList(menus, 0);
           model.addAttribute("treeMenu",objects);
           return "/back/sucess";
       }
       // 菜单树形结构
       public JSONArray treeMenuList(List<Menu> menuList, int parentId) {
           JSONArray childMenu = new JSONArray();
           for (Menu menu : menuList) {
               if (parentId == menu.getParentid()) {
                   JSONObject jo = (JSONObject) JSONObject.toJSON(menu);
                   JSONArray c_node = treeMenuList(menuList, menu.getId());
                   jo.put("children", c_node);
                   childMenu.add(jo);
               }
           }
           return childMenu;
       }
   }
   ``
   

4. 见码云项目

https://gitee.com/Marlon_Brando/book.git