Z-Tree在HTML頁面中的顯示

• 首先引入Z-Tree的類庫和樣式表

<script type="text/javascript" src="/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/scripts/ztree/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" href="/scripts/ztree/zTreeStyle.css"type="text/css"> 

• 然後在你想要放入樹的地方加入這行程式碼（id自己設定，記得設定好父級容器的寬高，最好加上這句樣式overflow：auto，這樣超出的部分就可以自動出來滑動欄）

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

• 然後在js中配置Z-Tree,輸入資料，載入Z-Tree，下面是我自己打的資料，方便顯示

var zTreeObj;
        // zTree 的引數配置，深入使用請參考 API 文件（setting 配置詳解）
        var setting = {
             check: {
                enable: true//啟用checkbox
             },
             data: {
                simpleData: {
                    enable: true
 

                      }
              }   
        };
        // zTree 的資料屬性，深入使用請參考 API 文件（zTreeNode 節點資料詳解）
        var zNodes = [
            {name:"天津市", open:true, children:[{name:"南開區", open:true, children:[{name:"南開大學", open:true, children:[{name:"12號樓",open:true,children:[{name:"A104教室"}, {name:"A105教室"
 
}, {name:"A106教室"}, {name:"A107教室"}, {name:"A108教室"}, {name:"A109教室"}, {name:"A1010教室111111111111111111111111"}, {name:"A1011教室"}, {name:"A1012教室"}]},{name:"13號樓"},]}, {name:"天津大學"}]}]},{name:"北京市", open:true, children:[{name:"朝陽區"}, {name:"海淀區"} ,{name:"海淀區"} ,{name:"海淀區"} ,{name:"海淀區"} ,{name:"海淀區"}]}];
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#tree1"), setting, zNodes);
        });//載入Z-Tree，根據ID尋找

• 顯示效果