开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

管理系统三级菜单动态实现

简介:
+关注继续查看

基础的html

<li class="sub-menu">
    <a href="javascript:;">
        <i class="fa fa-comments-o"></i>
        <span>Chat Room</span>
    </a>
    <ul class="sub">
        <li><a href="lobby.html">Lobby</a></li>
        <li><a href="chat_room.html"> Chat Room</a></li>
    </ul>
</li>

<!--multi level menu start-->
<li class="sub-menu">
    <a href="javascript:;">
        <i class="fa fa-sitemap"></i>
        <span>Multi level Menu</span>
    </a>
    <ul class="sub">
        <li><a href="javascript:;">Menu Item 1</a></li>
        <li class="sub-menu">
            <a href="boxed_page.html">Menu Item 2</a>
            <ul class="sub">
                <li><a href="javascript:;">Menu Item 2.1</a></li>
                <li class="sub-menu">
                    <a href="javascript:;">Menu Item 3</a>
                    <ul class="sub">
                        <li><a href="javascript:;">Menu Item 3.1</a></li>
                        <li><a href="javascript:;">Menu Item 3.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

<li>
    <a href="login.html">
        <i class="fa fa-user"></i>
        <span>Login Page</span>
    </a>
</li>

数据表结构

422101-20160430162028316-1863834580.png

数据结构

array(6) {
  [1] => array(7) {
    ["id"] => string(2) "43"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "用户"
    ["url"] => string(0) ""
    ["icon"] => string(10) "icon-group"
    ["sort"] => string(1) "0"
    ["children"] => array(3) {
      [0] => array(6) {
        ["id"] => string(2) "44"
        ["pid"] => string(2) "43"
        ["title"] => string(12) "前台用户"
        ["url"] => string(12) "member/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "1"
      }
      [1] => array(6) {
        ["id"] => string(2) "45"
        ["pid"] => string(2) "43"
        ["title"] => string(12) "用户行为"
        ["url"] => string(16) "UserAction/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [2] => array(6) {
        ["id"] => string(2) "47"
        ["pid"] => string(2) "43"
        ["title"] => string(12) "后台用户"
        ["url"] => string(15) "AdminUser/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "3"
      }
    }
  }
  [2] => array(7) {
    ["id"] => string(2) "28"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "商品"
    ["url"] => string(0) ""
    ["icon"] => string(9) "icon-gift"
    ["sort"] => string(1) "2"
    ["children"] => array(6) {
      [0] => array(6) {
        ["id"] => string(2) "29"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "商品管理"
        ["url"] => string(11) "Goods/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "1"
      }
      [1] => array(6) {
        ["id"] => string(2) "19"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "商品分类"
        ["url"] => string(19) "GoodsCategory/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [2] => array(6) {
        ["id"] => string(2) "30"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "重量单位"
        ["url"] => string(17) "WeightClass/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [3] => array(6) {
        ["id"] => string(2) "31"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "长度单位"
        ["url"] => string(17) "LengthClass/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "3"
      }
      [4] => array(6) {
        ["id"] => string(2) "32"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "库存状态"
        ["url"] => string(17) "StockStatus/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "4"
      }
      [5] => array(6) {
        ["id"] => string(2) "48"
        ["pid"] => string(2) "28"
        ["title"] => string(12) "商品选项"
        ["url"] => string(12) "Option/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "6"
      }
    }
  }
  [3] => array(7) {
    ["id"] => string(2) "35"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "订单"
    ["url"] => string(0) ""
    ["icon"] => string(16) "icon-credit-card"
    ["sort"] => string(1) "3"
    ["children"] => array(2) {
      [0] => array(6) {
        ["id"] => string(2) "36"
        ["pid"] => string(2) "35"
        ["title"] => string(12) "订单管理"
        ["url"] => string(11) "Order/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "1"
      }
      [1] => array(6) {
        ["id"] => string(2) "33"
        ["pid"] => string(2) "35"
        ["title"] => string(12) "订单状态"
        ["url"] => string(17) "OrderStatus/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "5"
      }
    }
  }
  [4] => array(7) {
    ["id"] => string(2) "12"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "博客"
    ["url"] => string(0) ""
    ["icon"] => string(9) "icon-book"
    ["sort"] => string(1) "5"
    ["children"] => array(3) {
      [0] => array(6) {
        ["id"] => string(2) "23"
        ["pid"] => string(2) "12"
        ["title"] => string(12) "博客列表"
        ["url"] => string(10) "Blog/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "1"
      }
      [1] => array(6) {
        ["id"] => string(2) "24"
        ["pid"] => string(2) "12"
        ["title"] => string(12) "博客分类"
        ["url"] => string(18) "BlogCategory/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [2] => array(6) {
        ["id"] => string(2) "26"
        ["pid"] => string(2) "12"
        ["title"] => string(12) "博客回复"
        ["url"] => string(15) "BlogReply/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "3"
      }
    }
  }
  [5] => array(7) {
    ["id"] => string(2) "13"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "插件"
    ["url"] => string(0) ""
    ["icon"] => string(8) "icon-key"
    ["sort"] => string(1) "6"
    ["children"] => array(1) {
      [0] => array(6) {
        ["id"] => string(2) "20"
        ["pid"] => string(2) "13"
        ["title"] => string(9) "轮播图"
        ["url"] => string(19) "PluginsSlider/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "1"
      }
    }
  }
  [6] => array(7) {
    ["id"] => string(1) "1"
    ["pid"] => string(1) "0"
    ["title"] => string(6) "系统"
    ["url"] => string(0) ""
    ["icon"] => string(14) "icon-dashboard"
    ["sort"] => string(1) "7"
    ["children"] => array(4) {
      [0] => array(7) {
        ["id"] => string(2) "37"
        ["pid"] => string(1) "1"
        ["title"] => string(12) "系统配置"
        ["url"] => string(0) ""
        ["icon"] => string(0) ""
        ["sort"] => string(1) "0"
        ["children"] => array(7) {
          [0] => array(6) {
            ["id"] => string(2) "38"
            ["pid"] => string(2) "37"
            ["title"] => string(12) "基本信息"
            ["url"] => string(16) "settings/general"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "1"
          }
          [1] => array(6) {
            ["id"] => string(2) "39"
            ["pid"] => string(2) "37"
            ["title"] => string(12) "图片尺寸"
            ["url"] => string(14) "settings/image"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "2"
          }
          [2] => array(6) {
            ["id"] => string(2) "40"
            ["pid"] => string(2) "37"
            ["title"] => string(12) "邮件配置"
            ["url"] => string(18) "settings/smtp_mail"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "3"
          }
          [3] => array(6) {
            ["id"] => string(2) "42"
            ["pid"] => string(2) "37"
            ["title"] => string(12) "其他选项"
            ["url"] => string(14) "settings/other"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "4"
          }
          [4] => array(6) {
            ["id"] => string(2) "46"
            ["pid"] => string(2) "37"
            ["title"] => string(12) "配置管理"
            ["url"] => string(12) "Config/index"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "5"
          }
          [5] => array(6) {
            ["id"] => string(2) "21"
            ["pid"] => string(2) "37"
            ["title"] => string(15) "违禁词管理"
            ["url"] => string(13) "BadWord/index"
            ["icon"] => string(0) ""
            ["sort"] => string(1) "5"
          }
          [6] => array(6) {
            ["id"] => string(1) "2"
            ["pid"] => string(2) "37"
            ["title"] => string(18) "后台导航配置"
            ["url"] => string(10) "Menu/index"
            ["icon"] => string(0) ""
            ["sort"] => string(2) "10"
          }
        }
      }
      [1] => array(6) {
        ["id"] => string(2) "25"
        ["pid"] => string(1) "1"
        ["title"] => string(12) "访客留言"
        ["url"] => string(13) "Comment/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [2] => array(6) {
        ["id"] => string(2) "41"
        ["pid"] => string(1) "1"
        ["title"] => string(12) "支付方式"
        ["url"] => string(13) "Payment/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "2"
      }
      [3] => array(6) {
        ["id"] => string(2) "34"
        ["pid"] => string(1) "1"
        ["title"] => string(12) "运费模板"
        ["url"] => string(15) "Transport/index"
        ["icon"] => string(0) ""
        ["sort"] => string(1) "6"
      }
    }
  }
}

模板处理

<!--multi level menu end-->
<volist name="admin_menu" id="menu">
    <present name="menu.children">
        <li class="sub-menu">
            <a href="{:U($menu['url'])}">
                <i class="{$menu.icon}"></i>
                <span>{$menu.title}</span> <!-- 第一层 -->
            </a>
            <ul class="sub">
            <volist name="menu['children']" id="menuchild">
                
                    <present name="menuchild.children">
                            <li class="sub-menu">
                                <a href="{:U($menuchild['url'])}">{$menuchild.title}</a>
                                <ul class="sub"> <!-- 第二层 -->
                                <volist name="menuchild['children']" id="menugrandchild">
                                    <li><a href="{:U($menugrandchild['url'])}">{$menugrandchild.title}</a></li> <!-- 第三层 -->
                                </volist>
                                </ul>
                            </li>
                    <else />
                        <li><a href="{:U($menuchild['url'])}">{$menuchild.title}</a></li>   <!-- 第二层 -->
                    </present>
               
            </volist>
            </ul>
        </li>

    <else/>
        <li>
            <a href="{:U($menu['url'])}">
                <i class="{$menu.icon}"></i>
                <span>{$menu.title}</span>
            </a>
        </li>
    </present>
    
</volist>

422101-20160430163523925-1126735744.png



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5448926.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
快速开发后台管理系统vue-bag-admin
快速开发后台管理系统vue-bag-admin
57 0
绩效管理系统
本文研究全球及中国市场绩效管理系统现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美、欧洲、中国、日本、东南亚和印度等地区的现状及未来发展趋势
72 0
权限管理系统(三)
前面我们做的小项目都是一个表的,业务代码也相对简单。现在我们来做一个权限管理系统,体验一下多表的业务逻辑,顺便巩固一下过滤器的知识。!
43 0
二、《学生教务系统》之标签管理模块实现
《学生教务系统》之标签管理模块实现
50 0
后端管理系统开发(一):登录篇
作为后端程序员,想写一个数据展示的系统,主要用于数据查询、数据展示,当然也有登录功能了,有没有比较快的方式呢,于此,Vue-Admin-Pro便产生了,基于iView-Admin,进行简化,为后端程序员量身打造的极简后端管理系统。
775 0
(三):C++分布式实时应用框架——系统管理模块
C++分布式实时应用框架——系统管理模块     上篇:(二): 基于ZeroMQ的实时通讯平台   版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经同意转载等行为保留法律追究的权利!     一个分布式实时系统集群动辄上百台机器,集群的规模已经限定这将是一个”封闭“的系统。
1404 0
OA系统权限管理设计方案
(转)OA系统权限管理设计方案 OA系统权限管理设计方案     不同职责的人员,对于系统操作的权限应该是不同的。优秀的业务系统,这是最基本的功能。     可以对“组”进行权限分配。对于一个大企业的业务系统来说,如果要求管理员为其下员工逐一分配系统操作权限的话,是件耗时且不够方便的事情。
1333 0
4267
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载