ztree學習筆記（一）

    在項目當中，常常會用到ztree樹形插件，以前作的幾個項目當中都用到了這個插件，感受功能仍是很強大的，並且在網上還找到了中文的API，由於項目中的樹形結構不是本身作的，因此如今從頭學習一下，而且記錄一下學習的過程。

   先簡單介紹一下ztree。

 

   ztree是一款依靠jQuery實現的「樹形」插件，它的特色是性能優異，配置靈活，功能強大，常常用於一些項目的功能管理和權限管理上，我本身接觸的幾個項目上的功能管理和權限管理上就用到了ztree插件。先向你們推薦一下ztree的中文API，我的以爲這個API對學習ztree頗有幫助。網站是http://www.treejs.cn/v3/demo.php#_101。但願對學習ztree的朋友有所幫助。

ztree有三個js文件jquery.ztree.core-3.x.js，jquery.ztree.excheck-3.x.js，jquery.ztree.exedit-3.x.js

使用ztree時必須用到的是核心包 jquery.ztree.core-3.x.js，此外還須要引入一個zTreeStyle1.css文件，此文件是ztree的樣式。個人項目中還用到了jquery.ztree.excheck-3.x.js，這個包的做用是提供單選複選框功能，還有一個包是編輯功能包  jquery.ztree.exedit-3.x.js 。由於項目比較簡單不包含編輯功能因此沒有用到。

  下面經過項目中的一個小的權限管理來闡述一下具體實現。項目中的實際圖形爲

要建立ztree，必須建立ztree的初始化方法，當頁面加載時，js首先執行ztree的$.fn.ztree.init(Obj,zSetting,zNodes)方法，咱們看到，這個初始化方法有三個參數，先搞懂這三個參數是幹嗎的

Obj，這個是ztree的對象，API中說到，ztree對象提供了操做ztree的方法，經過js操做ztree必須使用此對象，那麼這個對象如何獲得，可用el表達式經過ztree的div的id直接獲得該對象，即Obj=${"id"}。

zSetting 裏面配置了各類參數，是ztree對象的數據配置。

zNodes則是後臺傳過來的數據。

下面經過簡單的代碼來講明如何建立ztree。

這裏我就不上後端的代碼了，經過後臺傳過來的數據格式是這樣的：

String functionList=

[{"id":"11","pId":"11","name":"信息採集"},{"id":"5","pId":"5","name":"信息查詢","checked":true},{"id":"12","pId":"11","name":"村居信息採集"},{"id":"6","pId":"5","name":"村居信息查詢","checked":true},{"id":"32","pId":"31","name":"用戶管理"},{"id":"26","pId":"26","name":"統計分析"},{"id":"13","pId":"11","name":"農戶信息採集"},{"id":"7","pId":"5","name":"農戶信息查詢","checked":true},{"id":"28","pId":"26","name":"村居信息統計"},{"id":"33","pId":"31","name":"角色管理"},{"id":"31","pId":"31","name":"平臺管理"},{"id":"34","pId":"31","name":"權限管理"},{"id":"35","pId":"31","name":"單位管理"},{"id":"30","pId":"26","name":"農戶家庭基本信息統計"},{"id":"29","pId":"26","name":"農戶家庭成員信息統計"},{"id":"27","pId":"26","name":"農戶家庭教育信息統計"},{"id":"37","pId":"31","name":"數據字典"},{"id":"38","pId":"26","name":"需求狀況信息統計"},{"id":"40","pId":"26","name":"農戶醫療狀況統計"},{"id":"39","pId":"26","name":"農戶水住行狀況統計"}]

這是一個json類型的數組，ztree是使用json數據

前臺js代碼

   $(function(){
         var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    /* idKey : "id",
                    pIdKey :"pId",
                    rootPid :null */
                    
                }
            }
            
        };

        var zNodes =${functionList};
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        })
    
    </SCRIPT>     
                <div class="treeClass" >
                <ul id="treeDemo" class="ztree" ></ul>
               </div>

check的設置是是否顯示單選框/複選框，setting裏面的參數不少，所有記得的話很難，須要用到的時候直接看下API，API都有詳細的說明。

以前看API的時候，看到setting裏的參數data中的simpleData屬性，裏面有句話是這樣說的：

true / false 分別表示 使用 / 不使用 簡單數據模式

若是設置爲 true，請務必設置 setting.data.simpleData 內的其餘參數: idKey / pIdKey / rootPId，而且讓數據知足父子關係。

我看了下它們的註釋，idkey，節點數據中保存惟一標誌的屬性名稱，當setting.data.simpleData.enable = true 時生效，默認值是「id」

                           PIdKey，節點數據中保存父節點的的惟一標誌的屬性名稱，當setting.data.simpleData.enable = true 時生效，默認值是「PId」

咱們看到，這兩個參數都有默認值，因此，在後臺傳過來的參數名稱必須與默認值保持一致，也就是上面的functionList中的數據形式，其實在setting.data.simpleData中是沒必要設置這幾個參數的，只要傳過來的參數名稱與默認值保持一致就好了，固然，咱們也能夠本身命名參數的名稱，可是就須要在setting.data.simpleData裏面顯示的設置一下。說到底仍是idKey和pIdKey的參數名稱先後臺保持一致就好了。

 

固然這個是最簡單的樹形結構了，ztree還有不少功能，靈活多變，本次就先學習的這裏，新手初學，可能會有一些理解不到位或者錯誤的地方，若是有朋友看到這篇文章發現有錯誤的地方歡迎指出，謝謝了。