多平台统一管理软件接口,如何实现多平台统一管理软件接口
275
2023-07-01
Ztree新增角色和编辑角色回显问题的解决
最近在项目中使用到了ztree,在回显时候费了点时间,特记录下来供下次参考。
1、新增角色使用ztree加载权限,由于权限不多,所以使用直接全部加载。
效果图:
具体涉及ztree代码:
jsp中导入:/js/ztree/zTreeStyle.css和js/ztree/jquery.ztree.all-3.5.js
页面加入
js代码(此js中加入了layer弹框效果):
$(function() {
// 授权树初始化
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
check : {//使用ztree选中效果
enable : true,
}
ZPawvQ };
$.ajax({
url : '${pageContext.request.contextPath}/rest/sys/getAllFunction',//发送ajax请求加载权限数据
type : 'get',
dataType : 'json',
success : function(data) {//data就是服务端返回的权限数据
//var zNodes = eval("(" + data + ")");
//使用权限数据初始化ztree
$.fn.zTree.init($("#functionTree"), setting, data);
},
error : function(msg) {
alert('树加载异常!');
}
});
//确定添加按钮
$("#btn_submit").click(function() {
if(checkHousetype()){
//获得ztree对象
var treeObj = $.fn.zTree.getZTreeObj("functionTree");
//获得当前ztree对象选中的节点数组
var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
//循环数组,获得节点的ID,拼接成字符串使用逗号分隔
var array = new Array();
for(var i=0;i array.push(nodes[i].id); } var ids = array.join(","); $("input[name=funcitonIds]").val(ids); var formData = new FormData($("#formproject")[0]); $.ajax({ type : "POST", url : "${pageContext.request.contextPath }/rest/sys/addRole", // data : $("#formproject").serialize(), data:formData, contentType: false, processData: false, statusCode : { 201 : function() { layer.msg('新增角色成功!', {icon: 6,time:1500},function(){ location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist"; }) }, 400 : function() { layer.msg('提交的参数不合法', {time:1500}); }, 500 : function() { layer.msg('网络异常,请稍候再试!', {time:1500}); } } }); } }); }); //校验 function checkHousetype(){ var flag = true ; //关键字 if($("#code").val()==''){ flag = false ; layer.msg('请输入关键字', {time:1500}); return flag ; } //名称 if($("#name").val()==''){ flag = false ; layer.msg('请输入角色名称', {time:1500}); return flag ; } return flag ; } 权限中Ztree格式: private String id; private String name; private String code; private String description; // private String page; //private String generatemenu; //private String zindex; private String pid; private boolean isParent; //ztree组件需要格式 public String getpId() { return this.pid==null?"0":this.pid; } ...... 2、编辑角色回显Ztree js代码: var zNodes; var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; //当页面加载完毕,向后台发送ajax请求,获取用户id为1的用户所拥有的权限 //(这里要显示所有权限,该id用户的权限回显时,被自动选中),这里的用户id为1仅做测试使用,实际开发中会传值 function loadPower(roleId){ $.ajax({ type:"post", url:"${pageContext.request.contextPath }/rest/sys/queryFunByRoleId", data:{"roleId":roleId}, async:false, dataType:"json", success:function(data){ zNodes=data; } }) } $(function() { // 授权树初始化 var setting = { data : { key : { title : "t" }, simpleData : { enable : true } }, check : {//使用ztree选中效果 enable : true, } }; //页面加载完毕时加载此方法 $(document).ready(function(){ var id = $("#roleId").val(); loadPower(id); $.fn.zTree.init($("#functionTree"), setting, zNodes); }); //确定添加按钮 $("#btn_submit").click(function() { if(checkHousetype()){ //获得ztree对象 var treeObj = $.fn.zTree.getZTreeObj("functionTree"); //获得当前ztree对象选中的节点数组 var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集 //循环数组,获得节点的ID,拼接成字符串使用逗号分隔 var array = new Array(); for(var i=0;i array.push(nodes[i].id); } var ids = array.join(","); $("input[name=funcitonIds]").val(ids); var formData = new FormData($("#formproject")[0]); $.ajax({ type : "POST", url : "${pageContext.request.contextPath }/rest/sys/eidtRole", // data : $("#formproject").serialize(), data:formData, contentType: false, processData: false, statusCode : { 201 : function() { layer.msg('编辑角色成功!', {icon: 6,time:1500},function(){ location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist"; }) }, 400 : function() { layer.msg('提交的参数不合法', {time:1500}); }, 500 : function() { layer.msg('网络异常,请稍候再试!', {time:1500}); } } }); } }); }); //校验 function checkHousetype(){ var flag = true ; //关键字 if($("#code").val()==''){ flag = false ; layer.msg('请输入关键字', {time:1500}); return flag ; } //名称 if($("#name").val()==''){ flag = false ; layer.msg('请输入角色名称', {time:1500}); return flag ; } return flag ; } java后台: controller: /** * 编辑角色,回显角色权限 * @param roleId * @return */ @RequestMapping(value = "queryFunByRoleId", method = RequestMethod.POST) public ResponseEntity try { if(StringUtils.isBlank(roleId)){ // 返回400 return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } return ResponseEntity.ok(sysService.queryFunByRoleId(roleId)); } catch (Exception e) { e.printStackTrace(); } // 出错 500 return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null); } service: 由于List中的contains方法校验老是失败,也没纠结什么原因,自己写的根据id校验 /** * zTree v3回显 * 初始化化权限树 * 拼接treeNode属性 */ @Transactional(readOnly=true) public List //查询所有权限 List //查询指定角色的权限 List //包装zTree List Map for(int i=0;i map=new HashMap<>(); //Role role=functions.get(i); AuthFunction fun = functions.get(i); map.put("id", fun.getId()); map.put("pId", fun.getpId()); map.put("name", fun.getName()); map.put("isParent", fun.getIsParent()); //判断指定用户的角色是否在所有角色中包含,有则设置checked=true. if(functionsByRoleId != null && functionsByRoleId.size()>0 && ListIsContainsObj(functionsByRoleId,fun)){ map.put("checked",true); }else { map.put("checked",false); } list.add(map); } return list; } //校验全部权限中是否有某个权限,有返回true private boolean ListIsContainsObj(List if(fun == null || functions == null || functions.size()<=0){ return false; } for (AuthFunction authFunction : functions) { if(fun.getId().equals(authFunction.getId())){ return true; } } return false; } map=new HashMap<>(); //Role role=functions.get(i); AuthFunction fun = functions.get(i); map.put("id", fun.getId()); map.put("pId", fun.getpId()); map.put("name", fun.getName()); map.put("isParent", fun.getIsParent()); //判断指定用户的角色是否在所有角色中包含,有则设置checked=true. if(functionsByRoleId != null && functionsByRoleId.size()>0 && ListIsContainsObj(functionsByRoleId,fun)){ map.put("checked",true); }else { map.put("checked",false); } list.add(map); } return list; } //校验全部权限中是否有某个权限,有返回true private boolean ListIsContainsObj(List if(fun == null || functions == null || functions.size()<=0){ return false; } for (AuthFunction authFunction : functions) { if(fun.getId().equals(authFunction.getId())){ return true; } } return false; }
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
>> queryFunByRoleId(String roleId) {
发表评论
暂时没有评论,来抢沙发吧~