PHP+jquery 树状菜单

本项目开发过程中涉及树状菜单，于是做如下分享菜单实现不足之处请大牛指点并见谅（如图）

1：数据表涉及字段

`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '系统菜单ID',
`pid` int(10) DEFAULT NULL COMMENT '父级ID',
`name` varchar(200) DEFAULT NULL COMMENT '菜单名称',
`params` varchar(200) DEFAULT NULL COMMENT 'url参数',
`sort` tinyint(4) DEFAULT '1' COMMENT '排序',
`status` tinyint(1) DEFAULT '1' COMMENT '菜单状态（1：显示 2：隐藏 3：删除）',
`is_system` tinyint(1) DEFAULT '0' COMMENT '是否系统菜单（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')}"//是否已经加载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>

转载于:https://www.cnblogs.com/chenfeizhou/p/5596174.html

PHP+jquery 树状菜单相关推荐

java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...
纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
vue+element实现树状菜单并底层菜单横向排列
参考博文:https://blog.csdn.net/qq_33769914/article/details/81562278 效果如下: 首先用elemnetUI的树形控件,将获取到的数据进行基本展 ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
一.简单入门级树形菜单实现(纯后台逻辑) 1.简介 (1)开发环境 IDEA + JDK1.8 + mysql 1.8 SpringBoot 2.2.6 + mybatis-plus 此处仅后台开发( ...
elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下. 由于业务需要,要求实现树形菜单, ...
动态html树形菜单模板,JS+CSS简易树状菜单Tree
/p> "http://www.w3.org/TR/html4/loose.dtd"> 树形菜单实例-www.mb5u.com function showhide_ob ...
html树状图右侧_treeview-树形菜单js组件编写及应用
简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了 ...
Java Swing编程之仿js树状折叠菜单
最近要完成一个需求:用swing做个树状菜单,含二级菜单,点击一级菜单展开二级菜单,且二级菜单数目超过预览视图会出现滚动条.由于swing研究的少,花了不少精力! 先看下测试效果图: 收起图: 展开图 ...

PHP+jquery 树状菜单

PHP+jquery 树状菜单相关推荐

最新文章

热门文章