PHP+jquery 树状菜单
2016-06-18 14:40
603 查看
本项目开发过程中涉及树状菜单,于是做如下分享菜单实现 不足之处请大牛指点并见谅(如图)
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代码
3:加载html
4:js代码
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 .=" "; } 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>
相关文章推荐
- 用jquery获取xml页面 以json字符串格式输出
- $.ajax方法
- jQueryUI 之控件们
- jQueryUI之交互
- jqPlot jQuery绘图插件的使用
- JQuery_Validation_plugin
- jquery-easyui中表格的行编辑功能
- jQuery获取radio选中项的值实例
- jQuery使用正则表达式限制文本框只能输入数字
- jQuery解决$符号命名冲突
- jQuery无刷新上传之uploadify3.1简单使用
- jQuery插件uploadify实现ajax效果的图片上传
- jQuery监听输入框的值变化
- jquery中对于为一组标签赋予点击事件
- JS文件中加载jquery.js
- jquery搜索,删除
- jQuery-ui插件datepicker的参数使用详解
- jQuery 插件autocomplete 应用
- jquery.validate.js的使用
- 《锋利的jQuery(第2版)》随记-长期更新