常用菜单开发设计思路

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("&","&");
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

  );

实现效果

点击编辑

点击完成