需求:根据不同级别的角色,将角色分在项目树的结构的不同位置,并查询后返回已选中的角色
例:
实现步骤:
1.从 ztree官方 下载所需 js、css等文件,导入项目
2.新建实体类,用于接受返回值(包括扩父类ID,是否打开),具体每一个字段使用,请参考 官方文档 ,
public class TreeNode {
private String id;//节点ID
private String pId;
private String name;
private String file;
private String treeIndex;
private boolean open = false;
private boolean checked = false;
private boolean nocheck;
private String icon;
private String iconOpen;
private String iconClose;
//自定义
/**
* 节点类型 1:项目 2:点位
*/
private Long type = 1L;
/**
* 树类型, 1:点位树 2:点位+公司树
*/
private Integer treeType;
/**
* 是否已经拥有该设备 1:已有 0:未拥有
*/
private Integer owned ;
private String serial_number;
//此处省略getter setter方法
}
下载的demo中(index.html)也有相关使用的方法
3.查询返回主要使用的值,赋值给定义的TreeNode和pid,我项目中定义的结构是 当前角色id为001,子类就为001001,子类的子类就为001001001
eg:
父类 001
子类1 001001
001002
子1 子 001001001
子2子 001002001
4.js 中使用ztree,具体是否展开,可以在后台给实体类的 open 赋值,是否选中,给 check 赋值,具体每一个字段使用,请参考 官方文档
var setting = {
view: {
showIcon:false,
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
check: {
enable: true,
chkStyle: "checkbox",
nocheck: true,
checkbox: {"Y": "", "N": ""}
},
data: {
simpleData: {
enable:true,
idKey: "id",//idKey 为 ztree 定义 id 为实体类定义
pIdKey: "pId", //pIdKey 为 ztree 定义,pid 为实体类定义
rootPId: ""
}
},
callback: {
//响应后,拼接显示内容
beforeClick: function(treeId, treeNode) {
$("#treeNode").val(treeNode.name+"_"+treeNode.id);
}
}
};
/**
* 获取角色等级树结构
*/
function getAllRole(){
$.ajax({
url:path+"role/getRoleTree",
type:"post",
dataType:'json',
cache:'false',
success: succFunction
});
function succFunction(data) {
//后台组织一下,是否选中,可以将 checked 变为true(选中)
var obj =data;
var success = obj.status==200?true:false;
if(success){
//加载数据
var json = obj.result;
var t = $("#treeDemo");
t = $.fn.zTree.init(t, setting, json);
}
}
}
补充:
保存选中的角色时,可以参考
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true);
第一行是获取tree对象,然后第二行是得到ztree被选中状态的角色