管理系统三级菜单动态实现
基础的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>
数据表结构
数据结构
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>
