按钮权限

第一种

菜单表数据

在拦截器中获取登录用户所具备的权限集合(会传入二级菜单的id)，查询出该二级菜单下的按钮权限实体集合放入session

在页面上通过JSTL循环标签显示,大致如下

<c:forEach items="${thirdMenuList }" var="thirdMenu">
	<a href="#" class="easyui-linkbutton" iconCls="${thirdMenu.icon }" onclick="${thirdMenu.url}" plain="true">${thirdMenu.name }</a>
</c:forEach>

此种方法若按钮全部位于表格外部，则使用起来比较方便，权限按钮的url其实是一个方法名称，在页面中定义对应的方法即可

若部分按钮外部，部分按钮在表格里面，则可以采用字符串拼接的方式实现

第二种：采用字符串拼接的方式

permission是按钮的操作权限  在数据库中需要提前定制好，不要修改

可以先定义好外部的按钮，如下

<button class="layui-btn layui-btn-sm" onclick="location.href='addMenu.html'" permission="sys:menu:add">
  <i class="layui-icon">&#xe608;</i> 添加
</button>

其中有个属性permission与数据库中相对应，当页面加载完毕后类似如下处理

function checkPermission() {
	var pers = [];
	$.ajax({
		type : 'get',
		url : '/permissions/owns',
		contentType : "application/json; charset=utf-8",
		async : false,
		success : function(data) {
			pers = data;
			//遍历带有permission属性的标签  判断是否需要隐藏该标签
			$("[permission]").each(function() {
				var per = $(this).attr("permission");
				if ($.inArray(per, data) < 0) {
					$(this).hide();
				}
			});
		}
	});
	
	return pers;
}

public Set<String> ownsPermission() {
	List<Permission> permissions = UserUtil.getLoginUser().getPermissions();
	// permissions.isEmpty()  permissions = null时  可能会出现java.lang.NullPointerException
	if (CollectionUtils.isEmpty(permissions)) {//此处不会出现空指针异常
		/**
		 * 若permissions为空  则返回一个空集合
		 * 如果你想 new 一个空的 List ，而这个 List 以后也不会再添加元素，那么就用 Collections.emptyList() 
		 */
		return Collections.emptySet();
	}

	return permissions.parallelStream().filter(p -> !StringUtils.isEmpty(p.getPermission()))
			.map(Permission::getPermission).collect(Collectors.toSet());
}

拿到本人所具有的权限，及上表中permission的字符串集合(去重，非空)

在按钮 ‘’添加‘’中判断该属性是否在这个集合中，如不在就hide隐藏

table中的按钮则可以动态进行拼接，例如

var id = d['id'];
var href = "updateMenu.html?id=" + id;
var edit = buttonEdit(href, "sys:menu:add", pers);
var del = buttonDel(id, "sys:menu:del", pers);
tr += "<td>"+edit + del+"</td>";
tr += "</tr>"
$("#dt-table").append(tr);

function buttonEdit(href, permission, pers){
	if(permission != ""){
		if ($.inArray(permission, pers) < 0) {
			return "";
		}
	}
	
	var btn = $("<button class='layui-btn layui-btn-xs' title='编辑' onclick='window.location=\"" + href +"\"'><i class='layui-icon'>&#xe642;</i></button>");
	return btn.prop("outerHTML");
}

function buttonDel(data, permission, pers){
	if(permission != ""){
		if ($.inArray(permission, pers) < 0) {
			return "";
		}
	}
	
	var btn = $("<button class='layui-btn layui-btn-xs' title='删除' onclick='del(\"" + data +"\")'><i class='layui-icon'>&#xe640;</i></button>");
	return btn.prop("outerHTML");
}

将edit拼接到对应位置即可

在LAYUI中表格内部按钮代码大致如下

,{ title: '操作', width:178, align:'center', fixed: 'right', toolbar: '#baseInfo-table-operate'}

在script中定义按钮

<!-- 操作工具栏 -->
<script type="text/html" id="baseInfo-table-operate">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
{{#  var num = Math.floor(Math.random() * 10) + 1; }}
{{#      if(num > 5){        }}
   <a id="wq" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{#  		}                       }}

<!-- 
通过js判断按钮的显示与隐藏
{{#  if(false){ }}
<a id="wq" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{#  } }}
-->
</script>

此处也需要判断权限，但是语法需要结合以上案例，或者不使用toolbar直接拼接按钮，和上面方法类似，追加到table中