功能描述
为角色添加权限（权限内容包含：登录、市级操作、省级操作、管理用户）。
限制条件描述：
1、当权限中包含市级操作/省级操作/管理用户时，显示角色属性表单项
2、当权限内容为市级操作/省级操作时，角色属性需为操作
3、当权限内容为管理用户时，角色属性需为管理
4、市级操作/省级操作与管理用户不可同时选择
5、市级操作与省级操作不可同时选择
代码
1、pom.xml 引入bootstrapValidator组件
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>bootstrapValidator</artifactId>
<version>0.5.2</version>
</dependency>
1、html
<!DOCTYPE html>
<html lang="en" xmlns:overflow="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>新增权限</title>
<link rel="stylesheet"
href="${rc.contextPath}/webjars/bootstrapValidator/0.5.2/dist/css/bootstrapValidator.css">
<script type="text/javascript"
src="${rc.contextPath}/webjars/bootstrapValidator/0.5.2/dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div id="hiddenflow" overflow: hidden></div>
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" role="form" id="serviceForm">
<div class="form-group">
<label for="appaccessid" class="col-xs-2 control-label required">选择权限</label>
<div class="col-xs-9">
<select id="appaccessid" name="appaccessid" class="js-example-templating js-states form-control" multiple>
<option></option>
</select>
</div>
</div>
<div class="form-group" style="display: none" id="type">
<label for="role_type" class="col-xs-2 control-label required">角色属性</label>
<div class="col-xs-9">
<select id="role_type" name="role_type" class="js-example-templating js-states form-control">
<option></option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-green btn-sm">新增</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//标记最终是否保存角色属性
var flag = false;
$(document).ready(function () {
$("#appaccessid").select2({
placeholder: "请选择权限",
allowClear: true,
data: [
{
"id":1,"text":"登录"},
{
"id":2,"text":"市级操作"},
{
"id":3,"text":"省级操作"},
{
"id":4,"text":"管理用户"},
]
});
$("#role_type").select2({
placeholder: "请选择角色属性",
allowClear: true,
data: [
{
"id":1,"text":"管理"},
{
"id":2,"text":"审批"},
]
});
});
//多选框选中事件
$("#appaccessid").on("select2:select", function(e) {
//当前选中值
var currentData = e.params.data;
flag = false;
var result = [];
var login = "";
var city = "";
var pro = "";
var audit = "";
var data = $("#appaccessid").select2("data");
data.forEach((item)=>{
if (item.id == "4"){
login = item.text;
flag = true;
}
if (item.id == "2"){
audit = item.text;
city = item.text;
flag = true;
}
if (item.id == "3"){
audit = item.text;
pro = item.text;
flag = true;
}
})
if ((manage != "" && audit != "") || (city != "" && pro != "")){
if (city != "" && pro != ""){
layer.alert('权限【'+city+'】与【'+pro+'】不可同时选择！', {
icon: 3,
title: "提示"
});
}else{
layer.alert('权限【'+manage+'】与【'+audit+'】不可同时选择！', {
icon: 3,
title: "提示"
});
}
data.forEach((item)=>{
if (item.id != currentData.id){
result.push(item.id);
}
})
//为多选框赋值
$("#appaccessid").val(result).trigger("change");
}
//控制角色类型表单项是否展示
if (flag){
$('#type').css("display","block");
}else{
$('#role_type').val('').trigger('change');
$('#type').css("display","none");
}
});
//多选框取消选中事件
$("#appaccessid").on("select2:unselect", function(e) {
flag = false;
var data = $("#appaccessid").select2("data");
data.forEach((item)=>{
if (item.id == "4" || item.id == "3" || item.id == "2") {
flag = true;
}
})
if (flag){
$('#type').css("display","block");
}else{
$('#role_type').val('').trigger('change');
$('#type').css("display","none");
}
});
var fields = {
appaccessid: {
validators: {
notEmpty: {
message: '权限不能为空'}}},
role_type:{
validators: {
remote: {
//ajax验证,server result:{"valid",true or false}
url: '/manage/setting/isMatchType',//验证地址
contentType: "application/json;charset=UTF-8",
message: '角色属性选择错误',//提示消息
delay : 1500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
//传入后台的参数
//说明后台接收参数方式：
//public String isMatchType(@RequestParam Map<String, String> param, HttpServletRequest res)
//data中数据在后台的param中获取,使用param.get(key)
//表单项本身数据从res中获取，使用res.getParameter(key)
//返回结果需为"{"valid":true}"/"{"valid":false}"
data:{
appaccessid:function () {
var appaccessid = $('#appaccessid').val()
return JSON.stringify(appaccessid);
},
flag:function (){
return flag;
}
}
}}},
}
$('#serviceForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: fields
}).on("success.form.bv",function(e){
e.preventDefault();
// var serviceForm = $('#serviceForm').serialize();
//提交的代码...
});
</script>
</body>
</html>