第一次接触权限功能,写的马马虎虎,简单的实现了一下功能,拿来跟大家分享下
效果图:
JSP页面代码:
<body>
<div class="container-fluid">
<div class="row clearfix">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">角色权限定义</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 column" id="right">
<table id="dg" style="height: 500px"></table>
</div>
<div class="col-md-6 column">
<!-- 权限分配模框-->
<ul id="jstree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 400px;"></ul>
<input type="button" value="保存" id="bc">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
JS代码:
<script type="text/javascript">
var zTree;
var setting = {
view: {
dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
selectedMulti: false //设置是否允许同时选中多个节点
},
check:{
//chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox",//复选框类型
enable: true //每个节点上是否显示 CheckBox
},
data: {
simpleData: {//简单数据模式
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
zTree = $.fn.zTree.getZTreeObj("jstree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);//如果是父节点,则展开该节点
}else{
zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选,再次单击取消勾选
}
}
}
};
$(function () {
$("#dg").datagrid({
url:"selectRole",
fitColumns : false,
autoRowHeight : false,
singleSelect : true,//是否可以多选,true否,false是
nowrap : true,//数据是否换行
rownumbers:false,//可自动在表格前面添加序号
columns : [[ //表头
{field: 'role_id', title: '角色ID', width:60,editor:{type:'text'}},
{field: 'role_sn', title: '角色编号', width:90,editor:{type:'text'}},
{field: 'role_name', title: '角色名称', width:90,editor:{type:'text'}},
{field: 'bz', title: '备注', width:200,editor:{type:'text'}}
]],
onClickRow : function (rowIndex,rowData) {
var data = rowData;
var role_id = data.role_id;
//权限分配
onLoadZTree(role_id);
}
});
function onLoadZTree(role_id){
var treeNodes;
$.ajax({
async:false,//是否异步
cache:false,//是否使用缓存
type:'POST',//请求方式:post
dataType:'json',//数据传输格式:json
url:"rolePerMissSion?role_id="+role_id,//请求的action路径
error:function(){
//请求失败处理函数
alert('亲,请求失败!');
},
success:function(data){
console.log(data);
//请求成功后处理函数
treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
}
});
var t = $("#jstree");
t = $.fn.zTree.init(t, setting, treeNodes);
}
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("jstree"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert("节点id:"+nodes[i].id+"节点名称"+v);
console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值
}
}
$("#bc").click(function(){
//获取选中的节点
var role_id = $('#dg').datagrid('getSelected').role_id;
var treeObj=$.fn.zTree.getZTreeObj("jstree"),
nodes=treeObj.getCheckedNodes(true);
var list = [];
v="";
for (var i = 0; i < nodes.length; i++) {
list[i] = nodes[i].id;
v+=nodes[i].name + ",";
console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值
}
$.ajax({
dataType:"json",
type:"POST",
url:"addRolePer",
traditional: true,//传数组进后台需要设置该属性
data:{
role_id:role_id,
list:list,
},
success: function(data){
layer.msg(data, {icon: 6});
}
})
});
});
</script>
根据角色查询权限显示权限树代码:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
String role_id = request.getParameter("role_id");
permisssionService per = new permisssionService();
List<permisssionBean> list = null;
try {
list = per.rolePerMissSion(role_id);
} catch (SQLException e) {
e.printStackTrace();
}
List<TreeVO> vo = new ArrayList<TreeVO>();
//输出一级目录
for (int i = 0; i < list.size(); i++) {
if (list.get(i).getFu_mulu().equals(list.get(i).getMulu()) && list.get(i).getUrl() == null) {
TreeVO tr = new TreeVO();
tr.setId(list.get(i).getMulu());
tr.setpId(list.get(i).getFu_mulu());
tr.setName(list.get(i).getRht_name());
if (list.get(i).getRole_id() != null) {
tr.setChecked("true");
}
vo.add(tr);
//输出二级目录
for (int j = 0; j < list.size(); j++) {
if ((list.get(j).getFu_mulu().equals(list.get(i).getMulu()) && !list.get(j).getRht_name().equals(list.get(i).getRht_name())) && list.get(j).getUrl() != null) {
TreeVO tr1 = new TreeVO();
tr1.setId(list.get(j).getMulu());
tr1.setpId(list.get(j).getFu_mulu());
tr1.setName(list.get(j).getRht_name());
if (list.get(j).getRole_id() != null) {
tr1.setChecked("true");
}
vo.add(tr1);
}
if ((list.get(j).getFu_mulu().equals(list.get(i).getMulu()) && !list.get(j).getRht_name().equals(list.get(i).getRht_name())) && list.get(j).getUrl() == null) {
TreeVO tr2 = new TreeVO();
tr2.setId(list.get(j).getMulu());
tr2.setpId(list.get(j).getFu_mulu());
tr2.setName(list.get(j).getRht_name());
if (list.get(j).getRole_id() != null) {
tr2.setChecked("true");
}
vo.add(tr2);
//输出三级目录
for (int k = 0; k < list.size(); k++) {
if (list.get(k).getFu_mulu().equals(list.get(j).getMulu())) {
TreeVO tr3 = new TreeVO();
tr3.setId(list.get(k).getMulu());
tr3.setpId(list.get(k).getFu_mulu());
tr3.setName(list.get(k).getRht_name());
if (list.get(k).getRole_id() != null) {
tr3.setChecked("true");
}
vo.add(tr3);
}
}
}
}
}
}
String treeNodesJson = JSONArray.fromObject(vo).toString();
PrintWriter out = response.getWriter();
//利用Json插件将Array转换成Json格式
out.print(treeNodesJson);
//释放资源
out.close();
}
后台添加权限操作代码:
public class addRolePer extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
String role_id = request.getParameter("role_id");
String[] s = request.getParameterValues("list");//获取数组使用该函数
List<String> list = null;
if (s == null || (s != null && s.length == 0)) {
System.out.println("1111");
list = null;
}else {
System.out.println(s[0]);
list = Arrays.asList(s);
}
permisssionService per = new permisssionService();
try {
per.addRolePer(role_id, list);
} catch (SQLException e) {
e.printStackTrace();
}
response.getWriter().write(JSON.toJSONString("保存成功"));
}
}