**简单的例子使用的layui框架,并没有使用他的ztree插件,只用ajax配合sql完成最简单的一二级菜单权限控制及其排序功能。
公司主营业务:做网站、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出汇川免费做网站回馈大家。先看数据库设计:**
user表:
role表:
menu表:
user_role表:
role_menu表:
在这里 menu的id依然是主键,多了mid也就是菜单id,pare_menu_id也就是这个菜单对应的父级菜单的菜单id(mid);没有的话,就是0,也就是一级菜单,在这里,一级菜单的mid必须满足为整千数,或者万也行,其子菜单在mid+999范围内;
sql查询结果:
前台数据处理方法:
//菜单循环遍历打印拼接操作 $(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++){ //继续遍历这几条数据 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'>"+' '+data[j].menuName+"</a>" menu += "</dd>" menu += "</dl>" } } } menu += "</li>"; } $("#nav").html(menu); var element = layui.element; element.init()//初始化element事件,使菜单展开 } }); })
标题名称:使用layui+ajax实现简单的菜单权限管理及排序的方法-创新互联
转载源于:https://www.cdcxhl.com/article28/diepjp.html
成都网站建设公司_创新互联,为您提供用户体验、App开发、云服务器、搜索引擎优化、商城网站、建站公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联