最近在项目中使用到了ztree，在回显时候费了点时间，特记录下来供下次参考。
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;
}