ztree插件动态加载节点

1、ztree官网首页下载所需zip,下载方式为 GitHub 方式下载

HTTPS : https://gitee.com/zTree/zTree_v3.git

SSH : git@gitee.com:zTree/zTree_v3.git

2、在jsp页面中引入 js、css文件

<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="jquery-1.4.2.js">

</script> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

3、配置所需属性

var zTreeObj;   // 树形结构对象
$(document).ready(function () {
    zTreeObj=$.fn.zTree.init($("#treeDemo"), setting);  // 初始化/加载树形结构（创建 zTree 必须使用此方法） 
});

var setting = {  // 配置setting详情
    async: { // 通过url进行异步加载子节点（返回JSON或JSONArray对象）
        enable: true,
        url: ctx+"/web/admin/ajax/getData?serviceName=secuDepartmentService&serviceMethod=getTreeList",//异步加载时的请求地址，
        autoParam: ["id"],//提交参数
        type: 'get',
        dataType: 'json'，
　　　　　otherParam : {'xx':'yy', 'mm':'nn'} // 

    },
    callback: { // 对节点操作的回调方法
        onClick: zTreeOnClick,  // 点击节点后的回调
        onAsyncSuccess: zTreeOnAsyncSuccess // 异步加载成功的回调，可以用来展开根节点的子节点
    }
};

//单击时获取zTree节点的Id,和value的值
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
　　alert(treeNode.id + "---" + treeNode.name);
}

var treeJsonArray = "${treeJsonArray}";  // 从后台获取的上级节点的id集合（为了展开到点击前的节点位置）

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    var pnode;
    for(var i=0;i<treeJsonArray.length;i++){ // 遍历展开
        var node = zTreeObj.getNodeByParam("id", treeJsonArray[i], null);
        if(node==null){
            zTreeObj.expandNode(pnode, true, true, true); // 该方法执行时会进行异步加载（setting中的async）
        }
        pnode=node;
    }
}

注：添加icon图标时注意图片的像素大小 16*16 可以 

zTree 官网链接  http://www.treejs.cn