HTML

首先我們先放置一個樹ul列表

<ul id="treeDemo" class="ztree"></ul>

演示一：最簡單的樹 -- 簡單 JSON 資料

var setting = { 
    data: { 
        simpleData: { 
            enable: true 
        } 
    } 
}; 
 
var zNodes = [{ 
    id: 1, 
    pId: 0, 
    name: "父節點1 - 展開", 
    open: true 
}, 
{ 
    id: 11, 
    pId: 1
 
, 
    name: "父節點11 - 摺疊" 
}];

接著呼叫樹外掛zTree：

$(document).ready(function() { 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

演示二：最簡單的樹 -- 標準 JSON 資料

var zNodes = [{ 
    name: "父節點1 - 展開", 
    open: true, 
    children: [{ 
        name: "父節點11 - 摺疊", 
        children: [{ 
            name: "葉子節點111"
 
 
        }, 
        { 
            name: "葉子節點112" 
        }] 
    }, 
    { 
        name: "父節點12 - 摺疊", 
        children: [{ 
            name: "葉子節點121" 
        }, 
        { 
            name: "葉子節點122" 
        }] 
    }, 
    { 
        name: "父節點13 - 沒有子節點", 
        isParent: true 
    }
 
] 
}, 
{ 
    name: "父節點2 - 摺疊", 
    children: [{ 
        name: "父節點21 - 展開", 
        open: true, 
        children: [{ 
            name: "葉子節點211" 
        }, 
        { 
            name: "葉子節點212" 
        }] 
    }, 
    { 
        name: "父節點22 - 摺疊", 
        children: [{ 
            name: "葉子節點221" 
        }, 
        { 
            name: "葉子節點222" 
        }] 
    }, 
    { 
        name: "父節點23 - 摺疊", 
        children: [{ 
            name: "葉子節點231" 
        }] 
    }] 
}, 
{ 
    name: "父節點3 - 沒有子節點", 
    isParent: true 
} 
];

演示三：自定義圖示 -- icon 屬性

var setting = { 
            data: { 
                simpleData: { 
                    enable: true 
                } 
            } 
        }; 
 
        var zNodes =[ 
            { id:1, pId:0, name:"展開、摺疊 自定義圖示不同", open:true, iconOpen:"../css/zTreeStyle/img/diy/1_open.png", iconClose:"../css/zTreeStyle/img/diy/1_close.png"}, 
            { id:11, pId:1, name:"葉子節點1", icon:"../css/zTreeStyle/img/diy/2.png"}, 
            { id:2, pId:0, name:"展開、摺疊 自定義圖示相同", open:true, icon:"../css/zTreeStyle/img/diy/4.png"}, 
            { id:21, pId:2, name:"葉子節點1", icon:"../css/zTreeStyle/img/diy/6.png"} 
            { id:3, pId:0, name:"不使用自定義圖示", open:true }, 
            { id:31, pId:3, name:"葉子節點1"} 
        ]; 
 
        $(document).ready(function(){ 
            $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
        });

演示三：非同步載入節點資料的樹

var setting = { 
    async: { 
        enable: true, 
        url: "../asyncData/getNodes.php", 
        autoParam: ["id", "name=n", "level=lv"], 
        otherParam: { 
            "otherParam": "zTreeAsyncTest" 
        }, 
        dataFilter: filter 
    } 
}; 
 
function filter(treeId, parentNode, childNodes) { 
    if (!childNodes) return null; 
    for (var i = 0, 
    l = childNodes.length; i < l; i++) { 
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); 
    } 
    return childNodes; 
} 
 
$(document).ready(function() { 
    $.fn.zTree.init($("#treeDemo"), setting); 
});

演示四：單擊節點控制

var setting = { 
    data: { 
        key: { 
            title: "t" 
        }, 
        simpleData: { 
            enable: true 
        } 
    }, 
    callback: { 
        beforeClick: beforeClick, 
        onClick: onClick 
    } 
}; 
 
var zNodes = [{ 
    id: 1, 
    pId: 0, 
    name: "普通的父節點", 
    t: "我很普通，隨便點我吧", 
    open: true 
}, 
{ 
    id: 11, 
    pId: 1, 
    name: "葉子節點 - 1", 
    t: "我很普通，隨便點我吧" 
}, 
{ 
    id: 12, 
    pId: 1, 
    name: "葉子節點 - 2", 
    t: "我很普通，隨便點我吧" 
}, 
{ 
    id: 13, 
    pId: 1, 
    name: "葉子節點 - 3", 
    t: "我很普通，隨便點我吧" 
}, 
{ 
    id: 2, 
    pId: 0, 
    name: "NB的父節點", 
    t: "點我可以，但是不能點我的子節點，有本事點一個你試試看？", 
    open: true 
}, 
{ 
    id: 21, 
    pId: 2, 
    name: "葉子節點2 - 1", 
    t: "你哪個單位的？敢隨便點我？小心點兒..", 
    click: false 
}, 
{ 
    id: 22, 
    pId: 2, 
    name: "葉子節點2 - 2", 
    t: "我有老爸罩著呢，點選我的小心點兒..", 
    click: false 
}, 
{ 
    id: 23, 
    pId: 2, 
    name: "葉子節點2 - 3", 
    t: "好歹我也是個領導，別普通群眾就來點選我..", 
    click: false 
}, 
{ 
    id: 3, 
    pId: 0, 
    name: "鬱悶的父節點", 
    t: "別點我，我好害怕...我的子節點隨便點吧...", 
    open: true, 
    click: false 
}, 
{ 
    id: 31, 
    pId: 3, 
    name: "葉子節點3 - 1", 
    t: "唉，隨便點我吧" 
}, 
{ 
    id: 32, 
    pId: 3, 
    name: "葉子節點3 - 2", 
    t: "唉，隨便點我吧" 
}, 
{ 
    id: 33, 
    pId: 3, 
    name: "葉子節點3 - 3", 
    t: "唉，隨便點我吧" 
}]; 
 
var log, className = "dark"; 
function beforeClick(treeId, treeNode, clickFlag) { 
    className = (className === "dark" ? "": "dark"); 
    showLog("[ " + getTime() + " beforeClick ]  " + treeNode.name); 
    return (treeNode.click != false); 
} 
function onClick(event, treeId, treeNode, clickFlag) { 
    showLog("[ " + getTime() + " onClick ]  clickFlag = " + clickFlag + " (" + (clickFlag === 1 ? "普通選中": (clickFlag === 0 ? "<b>取消選中</b>": "<b>追加選中</b>")) + ")"); 
} 
function showLog(str) { 
    if (!log) log = $("#log"); 
    log.append("<li class='" + className + "'>" + str + "</li>"); 
    if (log.children("li").length > 8) { 
        log.get(0).removeChild(log.children("li")[0]); 
    } 
} 
function getTime() { 
    var now = new Date(), 
    h = now.getHours(), 
    m = now.getMinutes(), 
    s = now.getSeconds(); 
    return (h + ":" + m + ":" + s); 
} 
 
$(document).ready(function() { 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

zTree豐富的API文件地址：<a href='http://www.sucaihuo.com/jquery/demo/138/api/API_cn.html'>點選檢視</a>

原文地址:http://www.sucaihuo.com/js/138.html