权限分配—角色分配功能
1) 分配功能，打开弹出层时
除了要展示功能列表
还要默认选中上一次分配的功能
这就需要知道上一次都分配了哪些功能
按照用户分配角色时的处理
方式一： 可以使用2个查询语句，分别查出所有的功能(以供选择)，查出上一次已分配的功能
方式二： 使用1个联合查询语句，查询出所有的功能额外还配有选中和未选中的状态
此次操作到底用哪种方式取决于前端的处理
treetable组件复选框默认选中有2种方式
方式一： 正常加载所有的功能信息
加载完毕，利用treetable的一个函数，选中指定的复选框
insTb.setChecked([‘1’,’2’]);
扩展： jquery.ajax 增加dataType:’json’ 将响应的json格式字符串自动json反序列化
注意： 关于模板网页引用问题
编码是在2个文件中编写
但执行的时候2个文件内容会合并在一起
方式二： 加载功能信息时就自动勾选了
要求查询结果中，每条记录都增加一个新的字段 LAY_CHECKED:true/false
select
r.,
if(ur.fid is null,false,true) LAY_CHECKED
from
t_fun r
left join ( select fid from t_role_fun where rid = #{rid}) ur
on r.fid = ur.fid
建议使用Map装载查询结果
2) 保存，将角色id和选中的一堆fid 存入关系表
扩展： treetable提供了一个方法 insTb.checkStatus();
权限控制(分析)
1) 不同的用户登录，因为权限不同，左侧展示不同的菜单
2) 不同的用户访问相同的网页，因为权限不同，可见的操作按钮不同
3) 无论如何发送的请求(菜单，按钮，url偷偷)，都需要在服务端处理请求之前，先做一个权限验证(权限范围)
* 实现：
1) 在登录成功时，还需要将登录用户的权限信息查询出来。<-- setFuns.jsp --><%@ page pageEncoding="utf-8" %><div class="layui-card"><div class="layui-card-header" style="padding: 10px;text-align: center">角色编号：<input class="layui-input layui-input-inline" value="${param.rid}" id="set_rid" name="set_rid" style="width:150px;" />角色名称：<input class="layui-input layui-input-inline" value="${param.rname}" id="set_rname" name="set_rname" style="width:150px;" /></div><div class="layui-card-body"><!-- layui-treetable组件装载数据 --><div id="funGrid"></div><!-- 功能类型 处理后 显示的文本 --><script type="text/html" id="typeText">{{# if(d.ftype == 1){ }}<span class="layui-badge layui-bg-green">菜单</span>{{# }else{ }}<span class="layui-badge">按钮</span>{{# } }}</script></div></div><script>var insTb ;layui.config({base: '/treetable-lay/' //指定treetable组件所在的文件夹目录}).use(['treeTable'], function () { //use() 使用指定的layui组件var treeTable = layui.treeTable;var $ = layui.jquery ;insTb = treeTable.render({elem:'#funGrid', //指定渲染的位置url:'funAll', //使用ajax技术，请求表格中要展示的数据cols:[[ // 告诉组件按照什么样的表格格式取展示数据(第1个展示什么，第2个展示什么。。。){type:'numbers'}, // <td>{type:'checkbox'}, // <td>{title:'功能名称',field:'fname'}, // <td>]],tree:{ // 设置查询数据之间的子父关系iconIndex: 2, //指定展开合并图标出现在哪一列idName:'fid',pidName:'pid',isPidData:true, //表示按照id和pid的关系，实现子父级别},done:function(){//当treetable表格数据加载完毕时调用的函数//数据库查询当前角色上一次分配的功能编号//需要js代码发请求 location.href , window.open() , ajax$.ajax({type:'get',url:'findFidsByRole',data:{ rid:$("#set_rid").val() },synch:true,success:function(result){// 可以默认勾选// [1,2,3,4,5,6,7] -- 字符串insTb.setChecked(result);//json反序列化 字符串-->数组// "[1,2,3,4,5,6,7]" -> [1,2,3,4,5,6,7]//JSON.parse(result) ;},//告诉jquery，将响应回来的字符串json反序列化dataType:'json' //加一个属性});}});});</script>
```java <— role.jsp —> <%@ page pageEncoding=”utf-8” %>
<%@include file="comm.html"%>
<!-- 角色列表 --> <table id="roleGrid"></table> <!-- 表格单元的按钮模板 --> <script type="text/html" id="rowBtns"> <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="toEdit('{{d.rid}}','{{d.rname}}','{{d.rdescription}}')"> <i class="layui-icon"></i> 编辑 </button> <button class="layui-btn layui-btn-sm layui-btn-danger"> <i class="layui-icon"></i> 删除 </button> <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="toSetFun('{{d.rid}}','{{d.rname}}')"> <i class="layui-icon"></i> 分配功能 </button> </script>
<!-- 弹出层中的表单模板 -->
<form id="roleEditForm" class="layui-form" action="roleUpdate" style="display:none;padding-top:10px;">
<div class="layui-form-item">
<label class="layui-form-label">角色编号</label>
<div class="layui-input-inline">
<input type="text" name="rid" id="rid" readonly lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input layui-input-inline">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色名称</label>
<div class="layui-input-inline">
<input type="text" name="rname" id="rname" required placeholder="请输入名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色描述</label>
<div class="layui-input-inline">
<input type="text" name="rdescription" id="rdescription" required lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="button" class="layui-btn layui-btn-primary" onclick="closeEditWin()">取消</button>
</div>
</div>
</form>
<script>
//使用layui-table组件加载数据
layui.use(['table'],function(){
var table = layui.table ;
table.render({
elem:'#roleGrid', //绑定渲染的位置
url:'roleFindAll', //底层使用ajax请求表格数据
cols:[[ //指定查询结果与表格单元之间的展示关系，哪个属性展示在哪个位置
{title:'角色编号',field:'rid'},
{title:'角色名称',field:'rname'},
{title:'角色描述',field:'rdescription'},
{title:'操作',templet:'#rowBtns'}
]],
page:true
});
})
//编辑处理
function toEdit(rid,rname,rdescription){
//显示一个弹出层，弹出对话框，使用layui-layer
layui.use(['layer'],function(){
var layer = layui.layer ;
var $ = layui.jquery;
$('#rid').val(rid) ;
document.getElementById('rname').value = rname ;
$('#rdescription').val(rdescription);
layer.open({
type:1,
title:'编辑角色',
area:[400],
content:$('#roleEditForm')
});
});
}
//关闭编辑窗口
function closeEditWin(){
layui.use('layer',function(){
var layer = layui.layer ;
layer.closeAll();
});
}
//分配功能
function toSetFun(rid,rname){
//弹出一个窗口， layui-layer弹出层
layui.use('layer',function(){
var layer = layui.layer ;
var $ = layui.jquery ; //layui.$;
$.ajax({
type:'get',
url:'setFuns.jsp',
data:{rid:rid,rname:rname},
synch:true,
success:function(viewStr){
//此处要理解，模板代码时独立编写
//模板代码执行时，是在当前role.jsp中执行的
layer.open({
title:'分配功能',
area:['600','500'],
type:1,
content:viewStr, //ajax请求要展示的模板内容，同时原内容依然存在
btn:['保存','取消'],
yes:function(){
//将rid和选择的fids传到服务器保存
var cs = insTb.checkStatus();
var fids = '' ;
for(var i=0;i<cs.length;i++){
var c = cs[i] ;
fids += c.fid+',' ;
}
//发送请求，保存关系 用什么方式?
$.ajax({
method:'post',
url:'setFuns',
data:{rid:rid,fids:fids},
synch:true,
success:function(){
layer.alert('分配成功',function(){
layer.closeAll();
});
}
});
}
});
}
});
});
}
</script>
</body>
```
若有收获，就点个赞吧
0 人点赞
