1、ztree官網首頁下載所需zip,下載方式為 GitHub 方式下載

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

SSH : [email protected]: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;
    }
}

zTree 官網鏈接 http://www.treejs.cn

ztree插件動態加載節點