常用菜单开发设计思路

来源：互联网发布：apple watch销售数据编辑：程序博客网时间：2024/06/01 10:13

1.常用菜单便于用户使用

遇到一系列的菜单，眼花缭乱！设计一张菜单用户表加上系统原有的角色菜单表即可解决

2.常用菜单弹窗

<!-- 常用菜单 弹窗 --><div class="addpop normal-addpop dis-none " id="addpop">   <div class="addpop_title">      常用菜单配置      <a href="javascript:void(0)" onclick="closeMenu()" class="btn_addpopClose"></a>   </div><!--ddpop_title end-->   <div class="addpop_cont pdlr-0">      <div class="normal-subtitle">常用菜单已选（<span class="num"></span>/10）</div>      <form:form id="saveUserMenuForm" modelAttribute="sysUserMenu" action="${ctx}/sys/menu/saveUserMenu" method="post">      <div class="normal-select">               <ul class="js_normal_selected">                     <c:forEach items="${fns:getUserMenuList()}" var="subMenu" >                                    <c:if test="${subMenu.isShow==1}">                                       <li data-tag="${subMenu.parent.id}"  id="${subMenu.id}">${subMenu.name}</li>                                    </c:if>                     </c:forEach>               </ul>            </div>         </form:form>      <div class="normal-subtitle mgt-10">点击添加菜单<a  href="#" onclick="saveAllMenu()" class="font-blue fr">完成</a></div>      <div class="normal-con">         <%--<c:if test="${secondMenu.parent.id != '1'}">--%>            <c:forEach items="${fns:getNoUserMenuList()}" var="menu"  varStatus="status">               <c:if test="${menu.parent.id eq '1'&&menu.isShow eq '1'}" >                  <div class="normal-bg" id="manager${menu.id}">                     <div class="normal-subtitle " id="${subMenu.id}">${menu.name}</div>                     <div class="normal-select">                        <ul class="normal-option-list js_normal_options">                        <c:forEach items="${fns:getNoUserMenuList()}" var="subMenu" >                           <c:if test="${subMenu.parent.id eq menu.id &&subMenu.isShow==1}">                                    <li data-tag="${ menu.id}" id="${subMenu.id}">${subMenu.name}</li>                           </c:if>                        </c:forEach>                        </ul>                     </div>                  </div>               </c:if>            </c:forEach></div></div></div><div id="backMask" class="dis-none "></div>

3.对常用菜单选择处理

<script type="text/javascript">   $(function(){      var num = $('.js_normal_selected li').length;      $('.normal-subtitle').find('.num').text(num);      //隐藏遮罩      $("#backMask").hide();      $("#addpop").hide();      $(document).on('click','.dropdown-toggle', function () {         $('.dropdown-menu').toggle();      });      $(document).on('click','.dropdown-menu li', function () {         $('.dropdown-menu').hide();      });      $(".right-icon-lift .right-icon-lift-a").click(function(){         $(".right-icon-lift a").removeClass("click");         $(this).addClass("click");      });      //背景变黄色      $(".js_ewm_icon").click(function(){         $(".js_ewm_con").removeClass("dis-none");         $(".mode-bg").show();      });      $(".js_hh_ewm_close").click(function(){         $(".js_ewm_con").addClass("dis-none");         $(".mode-bg").hide();      });      //增加删除      $(document).on('click','.js_normal_selected li', function () {         var indexTag=$(this).attr("data-tag");         $("#manager"+indexTag).find(".js_normal_options").append($(this).clone());         $(this).detach();         var num = $('.js_normal_selected li').length;         $('.normal-subtitle').find('.num').text(num);      });      $(document).on('click','.js_normal_options li', function () {         var num = $('.js_normal_selected li').length;              if (num>=10){              alertx("最多只能添加10个常用菜单！");              return;           }         $(".js_normal_selected").append($(this).clone());         $(this).detach();          num = $('.js_normal_selected li').length;         $('.normal-subtitle').find('.num').text(num);      });   })function showSubMenu(id){     var menuHtml="";     var i=1;        <c:forEach items="${fns:getMenuList()}" var="threeMenu">       if(id=='${threeMenu.parent.id}'&&'1'=='${threeMenu.isShow}'){         if(i==1){            var threeHref='${threeMenu.href}';            threeHref=threeHref.replace("&amp;","&");             window.location.href='${ctx}'+threeHref;         }         i++;      }     </c:forEach>}   /**    * 常用菜单 点击编辑的方法    * 展示弹框    * caoww    */   function  editAllMenu(){        //展示遮罩      $("#backMask").removeClass("dis-none")      $("#addpop").removeClass("dis-none");      $("#backMask").show();      $("#addpop").show();   }   /**    * 常用菜单 点击关闭的方法    * 展示弹框    * caoww    */   function  closeMenu(){      //隐藏遮罩      $("#backMask").hide();      $("#addpop").hide();      $("#addpop").addClass("dis-none");      $("#backMask").addClass("dis-none");   }   /**    * 常用菜单 点击完成的的方法    * 将页面的值保存到用户数据中    *    * caoww    */   function  saveAllMenu(){      loading('正在处理，请稍等...');      //拼接常用menuID的逻辑       var num = $('.js_normal_selected li').length;      var menuIds="";      var menuStatus="";      if(num>0){         for ( var i=0; i<num; i++){            var menuId = $('.js_normal_selected li').eq(i).attr("id");            var status = $('.js_normal_selected li').eq(i).attr("data-tag");            menuIds+=menuId+",";            menuStatus+=status+",";         }      }      console.log("menuIds====="+menuIds);      $.ajax({         type : "POST",         url : ctx + "/sys/menu/saveUserMenu",         data :{menuIds:menuIds,menuStatus:menuStatus},         dataType : "json",         success : function(data){            if (data.code=="1"){               window.location.reload();            }else{               closeTip();               alertx(data.message);            }         }      });   }   function alertx(b, a) {      top.$.jBox.info(b, "提示", {         closed: function() {            if (typeof a == "function") {               a()            }         }      });      top.$(".jbox-body .jbox-icon").css("top", "55px")   }</script>

4。难点在于取消选择的常用菜单需要回到原来的节点上

所以设计表的时候需要保存常用菜单的父节点ID

建表语句

-- Create table
create table SYS_USER_MENU
(
MENU_ID VARCHAR2(64) not null,
USER_ID VARCHAR2(64) not null,
MENU_STATUS VARCHAR2(64),
CREATED_BY VARCHAR2(64),
CREATED TIMESTAMP(6)
)
tablespace YZ_BUSI07
pctfree 10
pctused 40
initrans 1
maxtrans 255
storage
(
initial 10M
next 10M
minextents 1
maxextents unlimited
pctincrease 0
);
-- Add comments to the table
comment on table SYS_USER_MENU
is '用户常用菜单权限管理';
-- Add comments to the columns
comment on column SYS_USER_MENU.MENU_ID
is '菜单ID:SEQ_MENU_ID自动生成';
comment on column SYS_USER_MENU.USER_ID
is '用户ID';
comment on column SYS_USER_MENU.MENU_STATUS
is '菜单状态 0 有效 1：删除';
comment on column SYS_USER_MENU.CREATED_BY
is '菜单创建人';
comment on column SYS_USER_MENU.CREATED
is '菜单创建时间';
-- Create/Recreate primary, unique and foreign key constraints
alter table SYS_USER_MENU
add constraint PK_SYS_USER_MENU primary key (MENU_ID, USER_ID)
using index
tablespace YZ_BUSI07
pctfree 10
initrans 2
maxtrans 255
storage
(
initial 10M
next 10M
minextents 1
maxextents unlimited
pctincrease 0
);

实现效果

点击编辑

点击完成

0 0