zTree树的简单应用

工具：zTree
下载地址：https://download.csdn.net/download/ly_linyuan/10393005

1.在工程中引入相关js

2.在相关的jsp页面上引入这些js和css样式

3.编写相关的js代码，实现动态的生成一棵树（数据来源是一个json串）

<script type="text/javascript">
/* zTree树的样式 */
var zTreeObj;
var setting = {
    check : {
        enable : true
    },
    data : {
        simpleData : {
            enable : true
        }
    }
};

$(document).ready(function() {
    debugger;
    var id = ${role.id};//后台传过来的角色id
    $.post( 
        "${path}/role/findzT/"+id,//后台查询角色权限方法
        function(data){
            debugger;
            zTreeObj = $.fn.zTree.init($('#jkTree'), setting, data);    //jkTree 树的id，支持多个树
            zTreeObj.expandAll(true);       //展开所有树节点
        },
        "json"
    );
});

//初始化zTree树，获取所有选择的节点
function submitCheckedNodes() {
    var nodes = new Array();
    nodes = zTreeObj.getCheckedNodes(true);     //取得选中的结点
    var str = "";
    for (i = 0; i < nodes.length; i++) {
        if (str != "") {
            str += ",";
        }
        str += nodes[i].id;
    }
    $('#moduleIds').val(str);
}

/* 保存更改 */
function save(id){
    debugger;
    var nodes = new Array();
    nodes = zTreeObj.getCheckedNodes(true);     //取得选中的结点
    var str = "";
    for (i = 0; i < nodes.length; i++) {
        if (str != "") {
            str += ",";
        }
        str += nodes[i].id;
    }
    $.post("${path}/role/toUpdate/"+id+"/"+str,function(data){
        if(data == 1){
            alert("更改成功!");
            window.location="${path}/role/role";
        }else{
            alert("更改失败!");
        }
    }) 
}
</script>

前台代码：

<div>  
<ul id="jkTree" class="ztree">
</ul>  
</div>

4.后台controller代码：

@RequestMapping("/findzT/{id}")
@ResponseBody
public String find(@PathVariable Integer id,Model model){
    //查询所有权限
    List<Permission> perlist = permissionService.getAll();
    int size=perlist.size();
    //查询当前角色拥有的权限关系表
    List<RolePermission> rplist = rolePermissionService.getByRid(id);
    //遍历关系表，查询出该角色拥有的权限
    Set<String> plist = new HashSet<String>();
    for(RolePermission rp : rplist){
        //通过id查询到权限
        Permission p = permissionService.getById(rp.getPid());
        plist.add(p.getName());
    }

    //4.组织json串
    StringBuilder sb = new StringBuilder();
    sb.append("[");
    for(Permission per : perlist){
        size--;
        sb.append("{\"id\":\"").append(per.getId());
        sb.append("\",\"pId\":\"").append(per.getParentId());
        sb.append("\",\"name\":\"").append(per.getName());
        sb.append("\",\"checked\":\"");
        if(plist.contains(per.getName())){
            sb.append("true");
        }else{
            sb.append("false");
        }
        sb.append("\"}");

        if(size>0){
            sb.append(",");
        }
    }
    sb.append("]");
    return sb.toString();
}

5.效果图：