angularjs处理动态菜单的实现方法：
1、核心angularjs代码：
var testImg=angular.module("appTest",["ms.leafMenu"])
.controller('testCtr',['$scope',function($scope){
$scope.data=[{"id":"1","pid":"0","name":"第一行","children":[{"id":"3","pid":"1","name":"第一行1.1"},{"id":"4","pid":"1","name":"第一行1.2"}]},{"id":"2","pid":"0","name":"第二行","children":[{"id":"5","pid":"2","name":"第二行2.1"}]}]
}])
angular.module("ms.leafMenu",[])
.directive('msLeafMenu',['$compile',function($compile){
return {
restrict:'EA',
transclude: true,
replace: false,
//template:"<li></li>",
scope:{
data:'=?',
id:'@?',
pid:'@?',
pvalue:'@?',
showname:'@?',
isstandard:'@?'
},
link:function(scope,element,attrs,leafController){
创建节点数据的方法：
function createTreeData(id,pid,pvalue){
var newData=[]
angular.forEach(scope.data,function(item,index){
if(item[pid]==pvalue){
var children=createTreeData(id,pid,item[id])
if(children &&children.length>0){
item.children=children
}
newData.push(item)
}
})
return newData
}
if(!scope.isstandard){
scope.data=createTreeData(scope.id,scope.pid,scope.pvalue)
}
//向节点增加数据
element.append($compile('<ul class="ms_leaf_menu_group"><li ng-repeat="row in data" ng-class="{ms_parent_item:(row.children &&row.children.length>0),ms_child_item:(!row.children || row.children.length<=0)}"><div ng-click="toogle($index)"><a >{{row[showname]}}</a><span class="glyphicon" ng-class="{\'glyphicon-chevron-right\':(row.children &&row.children.length>0 &&!row.isopen),\'glyphicon-chevron-down\':(row.children &&row.children.length>0 && row.isopen)}" aria-hidden="true"></span></div><div ng-show="row.isopen"><ms-leaf-menu data="row.children" id="id" pid="pid" showname="{{showname}}" pvalue="{{row[id]}}"></ms-leaf-menu></div></li></ul>')(scope))
//此处是关键，调用入口处，需要找到index
scope.toogle=function(index){
scope.data[index]["isopen"]=!scope.data[index]["isopen"]
}
}
}
}])
</script>
2、html代码：
<body ng-app="appTest">
<div ng-controller="testCtr" style=" width:200pxmargin-left:automargin-right:auto">
<ms-leaf-menu data="data" id="id" pid="pid" showname="name" pvalue="0"></ms-leaf-menu>
</div>
</body>
3、效果图
页面既然得到从服务器传过来的json数据之后，还要转换为Object比如，服务器组装好的json数据：
{
id:'001',
nodeMsg:'节点1'
}
这个是ajax成功之后的回调
function(xhr){
var o = eval('(' + xhr.responseText + ')')
alert(o.id + ':' + o.nodeMsg)
}
权限管理是后台管理系统的核心功能，要给不同工作岗位的用户分配不同的 *** 作权限，就需要进行权限管理
权限管理内部划分为：
控制登录到后台的用户能够访问到哪些后台菜单页面，比如负责广告的人员只能看到广告管理，课程人员只能看到课程管理，就需要进行不同的菜单权限分配
资源对应的是接口，资源权限用于控制用户能够 *** 作哪些接口功能，比如分配资源权限的时候没有禁用用户权限，指的是没有 *** 作这个接口的权限。资源权限与菜单权限不冲突，如果有的用户能够看到用户管理页面，也可以添加用户（有权限 *** 作新增用户接口），但是没法进行禁用用户 *** 作（无禁用用户的接口权限）
代表了菜单权限和资源权限的一种组合方式，比如我设置了多个用户需要相同的菜单权限和资源权限， 就可以将这些权限组合起来，设置为角色，再将角色分配给用户简化 *** 作
在项目中，不会直接对某个用户进行菜单权限或者资源权限的分配，而是提前根据岗位清空设定不同的角色，再将角色分配给用户就可以了
用户需要分配角色，角色需要分配菜单权限和资源权限
由于功能之间存在依赖，我们先从菜单权限和资源权限功能开始制作，最后再依次完成角色和用户的功能
使用Element的 Card卡片
添加到views/menu/index.vue，将标题区域更改为添加菜单按钮，添加后跳转到菜单组件
在menu目录下创建menuCreate.vue，并且创建初始结构
在路由表中添加上去
下面通过Element的Card套Form的方式给menu-create布局
完成
上级菜单数据需要请求接口才能得到，并且要渲染到模板中
用于获取菜单的接口有两个
接下来是设置接口的请求方法
menuCreate.vue中请求数据
添加无上级菜单选项（如果你添加的是一级菜单的话就这么选）
首先要将用于添加菜单的请求功能封装到services/menu.js模块中，由于文件不存在，先进行创建
在createMenu.vue中引入并在在点击提交按钮时发送请求，顺便检验一下是否成功了，成功了要记得提示和跳转
展示数据相关列表，使用Element的 Table表格 组件进行处理，并且根据我们的项目功能，修改模板表格的内容
封装接口请求功能
引入并且请求数据，请求成功保存到data中
数据展示
*** 作部分的内容需要对Table进行自定义
注意：
点击删除的时候，提示用户确认，并且使用当前行数据信息进行删除请求
删除接口： 地址 ，使用Postman测试没问题之后投入使用
观察项目的时候发现，添加菜单和编辑菜单的组件结构几乎是一模一样的，可以封装为组件进行复用
去除menuCreate.vue中的多余内容
创建menuEdit.vue组件，设置内容
将菜单编辑添加到路由表中
给menu/index.vue中的编辑按钮设置点击后的路由跳转
开始之前补充一点，组件CreateOrEdit.vue中的重置按钮，应当设置一个全部清空重置的点击事件
编辑时，将要编辑的菜单项信息展示在表单中
由于添加和编辑时同一个接口，区别在于编辑时是否多了参数id，由于提交时传入为form数据，编辑提交时就会自动包含id，所以提交 *** 作就不需要处理了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）