本項(xiàng)目開發(fā)過程中涉及樹狀菜單，于是做如下分享菜單實(shí)現(xiàn) 不足之處請大牛指點(diǎn)并見諒（如圖）

1：數(shù)據(jù)表涉及字段

`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '系統(tǒng)菜單ID',
`pid` int(10) DEFAULT NULL COMMENT '父級ID',
`name` varchar(200) DEFAULT NULL COMMENT '菜單名稱',
`params` varchar(200) DEFAULT NULL COMMENT 'url參數(shù)',
`sort` tinyint(4) DEFAULT '1' COMMENT '排序',
`status` tinyint(1) DEFAULT '1' COMMENT '菜單狀態(tài)（1：顯示 2：隱藏 3：刪除）',
`is_system` tinyint(1) DEFAULT '0' COMMENT '是否系統(tǒng)菜單（1：是 0：否）',
`level` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '菜單級別',

2：html代碼

<volist name="list" id="item"><tr><td>{$item.id}</td><td class="font-bold text-left"><a class="menu_tree" is-load="0" menu-level="{$item.level}" onclick="menu_tree(this,'close')" href="javascript:void(0)" note-id="{$item.id}" ><i class="glyph-icon icon-plus"></i> {$item.name}</a> </td><td>{$item.controller}</td><td>{$item.action}</td><td>{$item.params}</td><td>{$item.level}</td><td>{$item.sort}</td><td><if condition="$item['status'] eq 1">顯示<elseif condition="$item['status'] eq 2" />隱藏<else />刪除</if></td><td><a title="" href="#" data-placement="top" class="btn medium ui-state-default" data-original-title="Edit"><span class="glyph-icon icon-edit button-content editMenuLayer" data-id="{$item.id}">編輯</span></a><a title="" data-id="{$item.id}" data-placement="top" class="btn small bg-white tooltip-button menuDelete" href="#" data-original-title="Remove"><span class="glyph-icon icon-remove " ></span>刪除</a></td></tr> </volist>

3：加載html

<volist name="list" id="item"> <tr class="sub_menu{$item['level']}"><td>{$item.id}</td><td class="font-bold text-left"> <php>//空格$space="";for($i=0;$i<($item['level']-1)*2;$i++){$space .="&nbsp;&nbsp;";} echo $space;</php><a class="menu_tree" menu-level="{$item.level}" onclick="menu_tree(this,'close')" href="javascript:void(0)" is-load="0" note-id="{$item.id}" ><i class="glyph-icon icon-plus"></i> {$item.name}</a> </td><td>{$item.controller}</td><td>{$item.action}</td><td>{$item.params}</td><td>{$item.level}</td><td>{$item.sort}</td><td><if condition="$item['status'] eq 1">顯示<elseif condition="$item['status'] eq 2" />隱藏<else />刪除</if></td><td><a title="" href="#" data-placement="top" class="btn medium ui-state-default" data-original-title="Edit"><span class="glyph-icon icon-edit button-content editMenuLayer" data-id="{$item.id}">編輯</span></a><a title="" data-id="{$item.id}" data-placement="top" class="btn small bg-white tooltip-button menuDelete" href="#" data-original-title="Remove"><span class="glyph-icon icon-remove " ></span>刪除</a></td></tr> </volist>

?

4：js代碼

<script>//樹狀菜單function menu_tree(a,type){var note_id = $(a).attr('note-id');var is_load = $(a).attr('is-load');var level = $(a).attr('menu-level');if(type=="close"){ var url="{:U('Menu/sub_menu')}"//是否已經(jīng)加載if(is_load!=1){$.post(url,{id:note_id},function(data){if(data.status==1){
$(a).attr('onclick',"menu_tree(this,'open')");
$(a).children('i').removeClass('icon-plus');
$(a).children('i').addClass("icon-minus");$(a).attr('is-load',1);$(a).parent('td').parent('tr').after(data.info);}},'json');}else{
$(a).attr('onclick',"menu_tree(this,'open')");
$(a).children('i').removeClass('icon-plus');
$(a).children('i').addClass("icon-minus");//顯示下級$(a).parent('td').parent('tr').nextUntil('.sub_menu'+level+'').show();}}else{//隱藏下級 $(a).parent('td').parent('tr').nextUntil('.sub_menu'+level+'').hide();$(a).children('i').removeClass('icon-minus');$(a).children('i').addClass("icon-plus");$(a).attr('onclick',"menu_tree(this,'close')");}}</script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/chenfeizhou/p/5596174.html

總結(jié)

以上是生活随笔為你收集整理的PHP+jquery 树状菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。