zTree簡單使用（異步加載）

最近使用zTree進行目錄的展示，使用了基本的用法，做下記錄
可以直接去zTree的官網上進行查看相關的使用說明，不過第一次沒太明白，多看幾篇介紹基本就可以解決了
http://www.treejs.cn/v3/main.php zTree的官網
API點擊相關方法會有相關彈框提示

第一步，下載zTree相關的文件
找到文件中的js，如下三個

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.core.js"></script>
<link href="css/zTreeStyle.css" />

第二步：進行設置setting參數：
使用異步加載方式，callback爲獲取參數完成時進行的回調操作

var setting = {
        view : {
            showIcon : false,
            fontCss : setFontCss_ztree//進行樣式設置的方法
        },
        data : {
            simpleData : {
                enable : true,//是否之用簡單數據
                idKey : 'id', //對應json數據中的ID
                pIdKey : 'parentId' //對應json數據中的父ID
            },
        },
        async : {
            enable : true,//是否爲異步加載
            url : url,//相關的請求網址
            otherParam : {
                "id" : list//傳參數，寫法和可以參考API文檔
            },
        },
        callback : {//請求成功後回調
            onClick : onclickTree,//點擊相關節點觸發的事件
            onAsyncSuccess : ztreeOnAsyncSuccess,//異步加載成功後執行的方法
        },
    };
//點擊樹觸發的事件
function onclickTree(event, treeId, treeNode) {
    alert(treeNode.id+"  "+treeNode.name);
)}
//獲取樹成功後進行的回調操作
function ztreeOnAsyncSuccess(event, treeId, treeNode) {
    //展開樹
    expand_ztree(treeId)
}
/**
 * 展開樹
 * @param treeId  
 */
   function expand_ztree(treeId){
       var treeObj = $.fn.zTree.getZTreeObj(treeId);
       treeObj.expandAll(true);
   }
/**
 * 設置樹節點字體樣式
 */
function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
        //根節點
        return {color:"#333", "font-weight":"bold"};
    } else if (treeNode.isParent == false){
        //葉子節點
        return {color:"#660099", "font-weight":"normal"};
    } else {
        //父節點
        return {color:"#333", "font-weight":"normal"};
    }
}

第三步：初始化調用

$(function() {
        $.fn.zTree.init($("#testTree"), setting, null);//對應ul要顯示的ID，對應相關的setting，如果異步加載，最後一個參數爲空，否則爲響應的數據
    })

第四步：html文件引用，在哪裏顯示zTree

<div id="content">
        <ul id="testTree" class="ztree"></ul>//class中ztree爲zTree需要使用的
    </div>

完成
使用的json數據格式如下

{“id”:”123”,”isHidden”:false,”open”:true,”parentId”:”“,”ext1”:”“,”name”:”1xxx”,”uuid”:”xxxxx”,”checked”:false},{“id”:”456”,”isHidden”:false,”open”:true,”parentId”:”123”,”ext1”:”“,”name”:”1.1xxxx”,”uuid”:”xxxxx”,”checked”:false}

open代表是否展開該節點,parentid父子關係對應

簡單的異步獲取目錄結構完成

目錄的搜索下一篇繼續
http://blog.csdn.net/u013009808/article/details/74726029
歡迎參考