关于Ztree的一些使用心得
现在基本上每个网页都得用到tree,由于Ztree是中国人写的,所以中文文档比较齐全,基本的一些应用需求都能到文档上找到答案,这段时间使用Ztree做过一些简单应用,总结一下一些常用的使用方法,直接在前端写数据的形式文档上已经很全了,这里主要讲一下从后端获取数据到tree上
通过AJAX从后台拿到对应数据,并将tree初始化
$(function(){
//查询所有的菜单信息
$.ajax({
type:'post',
url: "${ctx}/notify/getData",
success:function(result){
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
chkboxType: { "Y": "p", "N": "s" }
};
eval("var ztreenode="+result);
$.fn.zTree.init($("#tree"),setting,ztreenode);
}
});
}); 前端获取选择的所有父节点,子节点
var s_child="",s_parent="";
var treeObj = $.fn.zTree.getZTreeObj("tree");//树控件
var content=$("#content").val();
var flag=$("#flag").val();
var nodes = treeObj.getCheckedNodes(true);//获取所有选择的节点
if(nodes.length==0){
alert("请选择人员");
}else if(content==null || content==""){
alert("请输入通知内容");
}else if(nodes.length!=0 & content!=null & content!=""){
for(var i=0;iif(nodes[i].isParent){
s_parent+=nodes[i].id+",";//父节点
}else{
s_child+=nodes[i].id+",";//子节点
}
} 后端写了一个tree的实体类,专门用来处理tree类型的数据
public class DeptEmployeeTree {
private Integer id;
private Integer pId;
private String name;
private String icon;
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getpId() {
return pId;
}
public void setpId(Integer pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
如果需要对tree进行更为详细的一些设置,自己添加相对应的tree的属性,一定要有 id ,pid,name
List depts=deptService.findAllDept(); //从数据库中获取所有部门
Listemployees=employeeService.findAllEmployees();//获取所有雇员
List list=new ArrayList<>(); //DeptEmployeeTree这个是对应的Tree实体
int k=0;
for (int i = 0; i < depts.size(); i++) {
DeptEmployeeTree tree=new DeptEmployeeTree();
tree.setId(depts.get(i).getId());
tree.setpId(0);
tree.setIcon("/chrm/images/dept.gif");//自定义Tree图标
tree.setName(depts.get(i).getName());
if (k.get(i).getId()) {
k=depts.get(i).getId();
}
list.add(tree);
}
for (int j = 0; j < employees.size(); j++) {
DeptEmployeeTree tree=new DeptEmployeeTree();
tree.setId(employees.get(j).getId()+k);
tree.setpId(employees.get(j).getDept().getId());
tree.setIcon("/chrm/images/person.gif");
tree.setName(employees.get(j).getName());
list.add(tree);
}
Gson gson =new Gson();
String zNodes=gson.toJson(list);
return zNodes; 关于上面的K,因为我数据库中设置的是自增的ID,所以俩个表的ID有可能回相同,部门为父节点,人员为子节点,为了使ID不冲突,我设置了K取得本次查询的部门的最大ID,然后人员那边在加上这个最大ID,解决冲突,后续处理前台传过来的数据时,多传一个K值,然后记得减掉就行了,Icon属性为图标属性,这边可以设置为自己的图标,具体实现效果图:
