zTree實現目錄樹

zTree在實現目錄樹展開的應用中十分常見，結合zTree的API文檔幫助，和實踐中的使用，小結如下：
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。專門適合項目開發，尤其是 樹狀菜單、樹狀數據的Web顯示、權限管理等等。

zTree 的特點
● zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載
● 採用了延遲加載技術，上萬節點輕鬆加載，即使在 IE6 下也能基本做到秒殺
● 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
● 支持 JSON 數據
● 支持靜態和 Ajax 異步加載節點數據
● 支持任意更換皮膚 / 自定義圖標（依靠css）
● 支持極其靈活的 checkbox 或 radio 選擇功能
● 提供多種事件響應回調
● 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
● 在一個頁面內可同時生成多個 Tree 實例
● 簡單的參數配置實現 靈活多變的功能

其中，在ztree初始化數據的過程中，可以指定節點的某些屬性，比如checked是否選中，checkbox/radio的disabled屬性 = true 表示禁用 checkbox / radio

還可以將zTree的節點序列化爲Array的格式，便於後面的遍歷操作：

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformToArray(treeObj.getNodes());

zTree的初始化操作：

var treeId = 'treeDemo';
            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: 'id',
                        pIdKey: 'pId',
                        rootPId: 0
                    }
                },
                callback: {
                    onClick : OnLeftClick
                },
                view: {
                    showTitle: true,
                    fontCss: setFontCss
                },
            };

            // 生成目錄樹
            $.fn.zTree.init($('#treeDemo'), setting, data);
            treeObj = $.fn.zTree.getZTreeObj('treeDemo');

            //console.log("打印樹對象");
            //console.log(treeObj);

            // 展開所有節點
            treeObj.expandAll(true);

            $("#treeDemo").css({height:'450px', width:'240px'});
            //$("#treeDemo").parent().jScrollPane();
            //$('#standardTree').niceScroll();

            $('#treeDemo').niceScroll();

判斷節點的屬性從而決定其顏色，function

function setFontCss(treeId, treeNode) {
        var num = 0;
        if(!(treeNode.isParent)&&(treeNode.level!=0)){
        $.ajax({
            type:"get",
            async:false,
            url:"api/manager/showDetailNodes/countById/"+treeNode.id,
            data:{},
            success: function(data){
                num = data;


            }
        });


        if(num!=0){
            return  {};
        }else{
            return {color:"gray"};
        } 
    }   
};   

還有許多zTree自帶的函數，單擊事件，父子節點的獲取等在文檔中說明的很詳細了，初始化後的zTree，展示如下

http://www.ztree.me/v3/main.php#_zTreeInfo zTree參考文檔鏈接