使用layui+ajax實現(xiàn)簡單的菜單權限管理及排序的方法-創(chuàng)新互聯(lián)

**簡單的例子使用的layui框架，并沒有使用他的ztree插件，只用ajax配合sql完成最簡單的一二級菜單權限控制及其排序功能。

公司主營業(yè)務：做網站、網站設計、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出匯川免費做網站回饋大家。

先看數(shù)據(jù)庫設計：**

user表：

role表：

menu表：

user_role表：

role_menu表：

在這里 menu的id依然是主鍵，多了mid也就是菜單id，pare_menu_id也就是這個菜單對應的父級菜單的菜單id（mid）；沒有的話，就是0，也就是一級菜單，在這里，一級菜單的mid必須滿足為整千數(shù)，或者萬也行，其子菜單在mid+999范圍內；

sql查詢結果：

前臺數(shù)據(jù)處理方法：

//菜單循環(huán)遍歷打印拼接操作
  $(function () {
  $.ajax( {
   url : projectName+'/sys/menu/findMenuByRole',
   type : 'post',
   dataType : 'json',
   success : function(data) {
   var menu = ""; //定義變量存儲
   for(var i = 0;i<data.length;i++){
    menu += "<li class='layui-nav-item '>"
    if(data[i].pareMenuId == 0){ //取出父元素的菜單，拼進頁面
    menu += "<a href='javascript:;'>"+data[i].menuName+"</a>"
    for(var j = 0;j<data.length;j++){ //繼續(xù)遍歷這幾條數(shù)據(jù)
     if(data[j].mid > data[i].mid && data[j].mid < (data[i].mid)+1000){ //取出這個父元素所對應的子元素
     menu += "<dl class='layui-nav-child'>"
     menu += "<dd>"
     menu +=  "<a href='"+data[j].menuPath+"' target='option'>"+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+data[j].menuName+"</a>"
     menu += "</dd>"
     menu += "</dl>"
     }
    }
    }
    menu += "</li>";
   }
   $("#nav").html(menu);
   var element = layui.element;
   element.init()//初始化element事件，使菜單展開
   }
  });
  })

標題名稱：使用layui+ajax實現(xiàn)簡單的菜單權限管理及排序的方法-創(chuàng)新互聯(lián)
轉載源于：http://www.muchs.cn/article28/diepjp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、App開發(fā)、云服務器、搜索引擎優(yōu)化、商城網站、建站公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網站建設公司