zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    高级(线性)素数筛
    Dijkstra(迪杰斯特拉)算法
    简单素数筛
    【解题报告】 POJ1958 奇怪的汉诺塔(Strange Tower of Hanoi)
    4 jQuery Chatting Plugins | jQuery UI Chatbox Plugin Examples Like Facebook, Gmail
    Web User Control Collection data is not storing
    How to turn on IE9 Compatibility View programmatically in Javascript
    从Javascrip 脚本中执行.exe 文件
    HtmlEditorExtender Ajax
    GRIDVIEW模板中查找控件的方式JAVASCRIPT
  • 原文地址:https://www.cnblogs.com/chenfeizhou/p/5596174.html
Copyright © 2011-2022 走看看