layui-左侧递归菜单-js实现

Tirzano

已于 2024-05-25 00:17:11 修改

阅读量421

点赞数 5

分类专栏：前端文章标签： javascript layui 前端

于 2024-05-25 00:12:49 首次发布

本文链接：https://blog.csdn.net/by2233/article/details/139187084

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

完整代码两种下拉风格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="lib/layui/css/layui.css" rel="stylesheet" />
    <!--    <link href="css/layout-admin.css" rel="stylesheet"/>-->
  </head>
  <body class="layui-bg-gray">
    <div class="layui-side">
      <div class="layui-side-scroll">
        <div id="test"></div>
      </div>
    </div>
    <!--<div id="test"></div>-->
    <script src="lib/layui/layui.js"></script>
    <script>
      layui.use(["element", "dropdown"], function () {
        var element = layui.element;
        var dropdown = layui.dropdown;
        var util = layui.util;

        // 假设我们有一个菜单数据
        var menuData = {
          code: 0,
          data: [
            {
              id: 1,
              parentId: 0,
              name: "test-1",
              weight: 1,
              url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",
              type: "link",
              children: [
                {
                  id: 2,
                  parentId: 1,
                  name: "test-2",
                  weight: 2,
                  url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",
                  type: "link",
                  children: [
                    {
                      id: 3,
                      parentId: 2,
                      name: "test-3",
                      weight: 3,
                      url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",
                      type: "link",
                      children: [
                        {
                          id: 4,
                          parentId: 3,
                          name: "test-4",
                          weight: 4,
                          url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",
                          type: "link",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
          count: 1,
        };

        function buildMenu(id, data) {
          let type = "group";

          function buildMenuTree(items) {
            function isArray(obj) {
              return typeof obj === "object" && Array.isArray(obj);
            }

            function isNotNullArray(obj) {
              if (isArray(obj)) {
                return obj.length > 0;
              }
              return false;
            }

            let html = [];
            for (let i = 0; i < items.length; i++) {
              let item = items[i];
              if (isNotNullArray(item.children)) {
                if (type === "group") {
                  html.push(
                    '<li class="layui-menu-item-group layui-menu-item-up"><div class="layui-menu-body-title"><span>' +
                      item.name +
                      "</span></div><ul>" +
                      buildMenuTree(item.children) +
                      "</ul></li>"
                  );
                } else if (type === "parent") {
                  html.push(
                    '<li class="layui-menu-item-parent layui-menu-item-up"><div class="layui-menu-body-title"><span>' +
                      item.name +
                      '</span> <i class="layui-icon layui-icon-right"></i></div> <div class="layui-panel layui-menu-body-panel" style="width: 200px;"><ul>' +
                      buildMenuTree(item.children) +
                      "</ul></div></li>"
                  );
                }
              } else {
                html.push(
                  '<li><div class="layui-menu-body-title"><span>' +
                    item.name +
                    "</span></div></li>"
                );
              }
            }
            return html.join();
          }

          let html = "";
          if (type === "group") {
            html =
              '<ul class="layui-menu" id="left-menu" lay-filter="left-menu" lay-accordion>' +
              buildMenuTree(data) +
              "</ul>";
          } else if (type === "parent") {
            html =
              '<div class="layui-panel" style="width: 200px;margin: 16px"><ul class="layui-menu" id="left-menu" lay-filter="left-menu" lay-accordion>' +
              buildMenuTree(data) +
              "</ul></div>";
          }
          document.getElementById(id).innerHTML = html;
        }

        buildMenu("test", menuData.data);
        //element.init();
      });
    </script>
  </body>
</html>

freemarker模板引擎实现对管理后台均可，因为并不需要seo

[#ftl encoding="utf-8"]
[#--递归下拉菜单--]
[#macro list items]
    [#list items]
        [#items as item]
            [#if item.children?? && item.children?size gt 0 ]
                <li class="layui-menu-item-group layui-menu-item-up"
                    lay-options="{id: '${item.id}', parentId: '${item.parentId}', isTab: false, url:'${item.url}', type:'${item.type}'}">
                    <div class="layui-menu-body-title">
                        <span>${item.name}</span>
                    </div>
                    <ul>
                        [@list items=item.children /]
                    </ul>
                </li>
            [#else]
                <li lay-options="{id: '${item.id}', parentId: '${item.parentId}', isTab: true, url:'${item.url}', type:'${item.type}'}">
                    <div class="layui-menu-body-title">
                        <span>${item.name}</span>
                    </div>
                </li>
            [/#if]
        [/#items]
    [/#list]
[/#macro]

<div class="side">
    <ul class="layui-menu layui-menu-lg" id="left-menu" lay-filter="left-menu">
        [@list items= leftMenu /]
    </ul>
</div>

<script>
    layui.use(function () {
        const dropdown = layui.dropdown;
        const element = layui.element;
        const layer = layui.layer;
        const $ = layui.jquery;

        function reportWindowSize(event) {
            const height = $('.layui-body').height() - $('.layui-tab-title').height() - $('.layui-footer').height();
            setTimeout(function () {
                $('.tab-page').css('height', height);
            }, 100);
        }

        window.addEventListener("resize", reportWindowSize);

        dropdown.on('click(left-menu)', function (options) {
            if (options.isTab === true) {
                let exist = false;
                let layId = options.id.toString();
                let $li = $('.layui-tab-title li');
                $li.each(function () {
                    if ($(this).attr('lay-id') === layId) {
                        exist = true;
                    }
                });
                if (!exist) {
                    if ($li.length >= 20) {
                        return;
                    }
                    element.tabAdd("tab-card", {
                        title: options.title,
                        content: '<div id="tab-page-' + layId + '" class="tab-page"></div>',
                        id: layId,
                        change: true
                    });
                    reportWindowSize(null);
                    console.log(options.type);
                    if (options.type === 'page') {
                        $('#page-' + layId).load(options.url,
                            {id: options.id},
                            function (responseTxt, statusTxt, xhr) {
                                if (statusTxt === "success") {

                                } else if (statusTxt === "error") {
                                    layer.alert(options.title + '，加载失败！');
                                    element.tabDelete('tab-card', layId);
                                }
                            });
                    } else if (options.type === 'link') {
                        $('#tab-page-' + layId).html('<iframe title="'+options.title+'" src="' + options.url + '" style="width: 100%;height: 100%;border: none;scrollbar-width=none" scrolling="no">')
                    }
                } else {
                    element.tabChange('tab-card', layId);
                }
            }
        });
    });
</script>