1、新增角色使用ztree加载权限，由于权限不多，所以使用直接全部加载。
效果图：
具体涉及ztree代码：
jsp中导入：/js/ztree/ztreestyle.css和js/ztree/jquery.ztree.all-3.5.js
页面加入
6454f24a430b7438140e3665b0e494cc929d1f5ca49e04fdcb27f9465b944689
js代码（此js中加入了layer弹框效果）：
<script> $(function() { // 授权树初始化 var setting = { data : { key : { title : "t" }, simpledata : { enable : true } }, check : {//使用ztree选中效果 enable : true, } }; $.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<nodes.length;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 ; } </script>
权限中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代码：
<script> 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<nodes.length;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 ; } </script>
java后台：
controller:
/** * 编辑角色，回显角色权限 * @param roleid * @return */ @requestmapping(value = "queryfunbyroleid", method = requestmethod.post) public responseentity<list<map<string, object>>> queryfunbyroleid(string roleid) { 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<map<string, object>> queryfunbyroleid(string roleid) { //查询所有权限 list<authfunction> functions = queryallauthfunction(); //查询指定角色的权限 list<authfunction> functionsbyroleid = findfunctionbyroleid(roleid); //包装ztree list<map<string, object>> list =new arraylist<map<string, object>>(); map<string, object>map=null; for(int i=0;i<functions.size();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<authfunction> functions, authfunction fun) { if(fun == null || functions == null || functions.size()<=0){ return false; } for (authfunction authfunction : functions) { if(fun.getid().equals(authfunction.getid())){ return true; } } return false; }