From e25daa9371a7b1e5798fa037d0fde825ee8d535c Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Sat, 18 May 2019 21:51:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A0=E9=99=90=E6=9E=81=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/menu.json          | 106 ++++++++++++++++++++++++++++++++++++++++
 index.html              |  33 +++++++++++++
 js/okadmin.js           |  64 ++++++++++++++++++------
 lib/okPlugins/okMenu.js |  10 ++++
 4 files changed, 197 insertions(+), 16 deletions(-)
 create mode 100644 lib/okPlugins/okMenu.js

diff --git a/data/menu.json b/data/menu.json
index 7949099..ea6f379 100644
--- a/data/menu.json
+++ b/data/menu.json
@@ -280,6 +280,112 @@
           "spread": false
         }
       ]
+    },
+    {
+      "title": "多级菜单",
+      "path": "",
+      "font": "layui-icon",
+      "icon": "&#xe658;",
+      "spread": false,
+      "children": [
+        {
+          "title": "购物网站",
+          "path": "",
+          "font": "layui-icon",
+          "icon": "&#xe658;",
+          "spread": false,
+          "children": [
+            {
+              "title": "苏宁",
+              "path": "https://www.suning.com",
+              "font": "layui-icon",
+              "icon": "&#xe600;",
+              "spread": false
+            },
+            {
+              "title": "京东",
+              "path": "https://www.jd.com",
+              "font": "layui-icon",
+              "icon": "&#xe600;",
+              "spread": false
+            },
+            {
+              "title": "阿里",
+              "path": "",
+              "font": "layui-icon",
+              "icon": "&#xe658;",
+              "spread": false,
+              "children": [
+                {
+                  "title": "淘宝",
+                  "path": "https://www.taobao.com",
+                  "font": "layui-icon",
+                  "icon": "&#xe600;",
+                  "spread": false
+                },
+                {
+                  "title": "天猫",
+                  "path": "https://www.tmall.com",
+                  "font": "layui-icon",
+                  "icon": "&#xe600;",
+                  "spread": false
+                },
+                {
+                  "title": "聚划算",
+                  "path": "https://ju.taobao.com",
+                  "font": "layui-icon",
+                  "icon": "&#xe600;",
+                  "spread": false
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "title": "二级菜单",
+          "path": "pages/use/use-okTab.html",
+          "font": "layui-icon",
+          "icon": "&#xe600;",
+          "spread": false
+        },
+        {
+          "title": "二级菜单",
+          "path": "pages/use/use-okTab.html",
+          "font": "layui-icon",
+          "icon": "&#xe658;",
+          "spread": false,
+          "children": [
+            {
+              "title": "三级菜单",
+              "path": "pages/use/use-okTab.html",
+              "font": "layui-icon",
+              "icon": "&#xe600;",
+              "spread": false
+            },
+            {
+              "title": "三级菜单",
+              "path": "pages/use/use-okTab.html",
+              "font": "layui-icon",
+              "icon": "&#xe600;",
+              "spread": false
+            }
+          ]
+        },
+        {
+          "title": "二级菜单",
+          "path": "pages/use/use-okTab.html",
+          "font": "layui-icon",
+          "icon": "&#xe600;",
+          "spread": false
+        },
+        {
+          "title": "二级菜单",
+          "path": "pages/use/use-okTab.html",
+          "font": "layui-icon",
+          "icon": "&#xe600;",
+          "spread": false
+        }
+      ]
     }
   ]
 }
diff --git a/index.html b/index.html
index 2e50b5c..4c7936b 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,39 @@
     <div class="layui-side layui-bg-black">
         <div class="layui-side-scroll">
             <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="navFilter">
+                <!--多级导航示例
+                <li class="layui-nav-item layui-nav-itemed">
+                    <a href="javascript:;">
+                        <i class="iconfont icon-huiyuan"></i> 会员管理
+                    </a>
+                    <dl class="layui-nav-child">
+                        <dd>
+                            <a href="javascript:;" path="pages/user/user.html"><i class="iconfont icon-dianliyonghuzongshu"></i> 用户列表</a>
+                            <dl class="layui-nav-child">
+                                <dd><a href="javascript:;" path="pages/user/user.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
+                                <dd><a href="javascript:;" path="pages/role/role.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
+                                <dd>
+                                    <a href="javascript:;" path="pages/permission/permission.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseshouquan"></i> 333</a>
+                                    <dl class="layui-nav-child">
+                                        <dd><a href="javascript:;" path="pages/user/user.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
+                                        <dd><a href="javascript:;" path="pages/role/role.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
+                                        <dd><a href="javascript:;" path="pages/permission/permission.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseshouquan"></i> 333</a></dd>
+                                    </dl>
+                                </dd>
+                            </dl>
+                        </dd>
+                        <dd>
+                            <a href="javascript:;" path="pages/role/role.html"><i class="iconfont icon-jiaoseguanli"></i> 角色列表</a>
+                            <dl class="layui-nav-child">
+                                <dd><a href="javascript:;" path="pages/user/user.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-dianliyonghuzongshu"></i> 111</a></dd>
+                                <dd><a href="javascript:;" path="pages/role/role.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseguanli"></i> 222</a></dd>
+                                <dd><a href="javascript:;" path="pages/permission/permission.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-jiaoseshouquan"></i> 333</a></dd>
+                            </dl>
+                        <dd><a href="javascript:;" path="pages/permission/permission.html"><i class="iconfont icon-jiaoseshouquan"></i> 权限列表</a></dd>
+                    </dl>
+                </li>
+                -->
+
                 <!-- 停用
                 <li class="layui-nav-item layui-nav-itemed">
                     <a href="javascript:;">
diff --git a/js/okadmin.js b/js/okadmin.js
index 14ff3a9..7ccfdcd 100644
--- a/js/okadmin.js
+++ b/js/okadmin.js
@@ -43,14 +43,18 @@ layui.config({
             html += "<a href='javascript:;'>"
             html += iconHtml(d) + " " + response[i].title;
             html += "</a>"
-            var children = d.children;
-            if (children != undefined && children.length > 0) {
-                html += "<dl class='layui-nav-child'>"
-                for (var j = 0; j < children.length; j++) {
-                    html += "<dd><a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a></dd>";
-                }
-                html += "</dl>"
-            }
+            // var children = d.children;
+            // if (children != undefined && children.length > 0) {
+            //     html += "<dl class='layui-nav-child'>"
+            //     for (var j = 0; j < children.length; j++) {
+            //         html += "<dd>";
+            //         html += "<a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a>";
+            //         html += "</dd>";
+            //     }
+            //     html += "</dl>"
+            // }
+            var temp = createMenu(d.children);
+            html += temp;
             html += "</li>";
         }
         $(".layui-nav-tree").html(html);
@@ -59,6 +63,16 @@ layui.config({
         console.log(error)
     });
 
+    function liHtml(obj) {
+        var html = "";
+        if (obj.spread) {
+            html += "<li class='layui-nav-item layui-nav-itemed'>";
+        } else {
+            html += "<li class='layui-nav-item'>";
+        }
+        return html;
+    }
+
     function iconHtml(obj) {
         var html = "";
         if (obj.icon) {
@@ -75,12 +89,29 @@ layui.config({
         return html;
     }
 
-    function liHtml(obj) {
+    function createMenu(obj) {
         var html = "";
-        if (obj.spread) {
-            html += "<li class='layui-nav-item layui-nav-itemed'>";
-        } else {
-            html += "<li class='layui-nav-item'>";
+        if (obj != undefined && obj.length > 0) {
+            html += "<dl class='layui-nav-child'>"
+            for (var j = 0; j < obj.length; j++) {
+                html += "<dd>";
+                html += "<a href='javascript:;' path='" + obj[j].path + "'>" + iconHtml(obj[j]) + " " + obj[j].title + "</a>";
+                var children = obj[j].children;
+                if (children != undefined && children.length > 0) {
+                    html += createMenu(children);
+                }
+                html += "</dd>";
+            }
+            html += "</dl>"
+        }
+        return html;
+    }
+
+    // TODO
+    function createSpace(num) {
+        var html = "";
+        for (var i = 0; i < num; i++) {
+            html += "&nbsp;";
         }
         return html;
     }
@@ -89,12 +120,13 @@ layui.config({
      * 监听导航菜单的点击
      */
     element.on("nav(navFilter)", function (elem) {
-        var attrNum = elem.context.attributes.length;
-        if (attrNum == 2) {
+        var path = elem.context.attributes.path;
+        console.log(path);
+        if (path && path.textContent != "") {
             // var title = elem.context.innerHTML;
             var title = elem.context.innerText;
             title = title.substring(title.indexOf(" "), title.length);
-            var path = elem.context.attributes.path.textContent;
+            var path = path.textContent;
             okTab.add(title, path)
         }
     });
diff --git a/lib/okPlugins/okMenu.js b/lib/okPlugins/okMenu.js
new file mode 100644
index 0000000..9919096
--- /dev/null
+++ b/lib/okPlugins/okMenu.js
@@ -0,0 +1,10 @@
+"use strict";
+layui.define(["element", "okUtils"], function (exports) {
+    var element = layui.element;
+    var okUtils = layui.okUtils;
+    var $ = layui.jquery;
+
+    var okMenu = {}
+
+    exports("okMenu", okMenu);
+});