ZTREE 树结构的使用教程

需求：根据不同级别的角色，将角色分在项目树的结构的不同位置，并查询后返回已选中的角色

例： 

         

实现步骤：

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被选中状态的角色