jquery 插件ztree的應用------簡單的樹（tree）

    首先在這分享一下ztree的api地址：http://www.baby666.cn/v3/api.php。如果本文中有些不明白的地方可以去查看api。

    我先介紹要構建一個tree所需js文件：query-1.4.4.min.js、 query.ztree.core-3.1.js、 jquery.ztree.excheck-3.1.js這些文件可以去網上下載。

         好，有了這些js腳本，那么我們就要開始代碼了，首先我們先來一個簡單的例子，形成一個簡單的tree，看代碼如下           

     var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var zNodes =[
            { id:'root', pId:0, name:"root"},
            { id:'1', pId:'root', name:"1"},
            { id:'11', pId:'1', name:'11'},
            { id:'2', pId:'root', name:"2"},
            { id:'22', pId:'2', name:"22"}
        ];    
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

    上面的形成的tree效果是這樣的

         

    現在讓我們簡單解釋一下js代碼，先來看這個行代碼：$.fn.zTree.init($("#treeDemo"), setting, zNodes);這是句話就是初始化tree，其中需要三個參數，參數一$("#treeDemo")，這是指定要把形成的tree現在那個div里，參數二 setting，其作用是設置tree的一些屬性，參數三zNodes，當然這是樹所需要的節點，即是個json對象。

    好了，我就先setting這個參數，剩下其他的大家一看就明白了。看代碼          

     var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

      其中的check：是設置是否要顯示復選框。Data：是設置節點的數據模式，這里我們用的簡單數據模式即[{id:’1’,pId:’0’,name:”1”},[{id:’2’,pId:’1’,name:”2”},…、]，setting，還有很多屬性設置，大家請參看api我就不一一介紹了。

好了簡單的tree形成了。