zTree -- jQuery 樹插件 構造treeNode JSON 數據對象

前言

zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。

網址：http://www.ztree.me/v3/main.p...

上回說到，在大型項目中，每每須要不一樣的用戶看到不一樣的目錄，不一樣的地區顯示不一樣的目錄等等，面對這些龐大的數據，須要生成不一樣結構的樹目錄，你不能一個一個定義這些配置來知足那麼多數據需求，這就須要異步加載子節點的的父節點，經過構造treeNode的 JSON 數據對象方法來實現，若是你不嫌我囉嗦，接下來會給你們講述這個方法。

setting配置

按照以下配置來構造ztree:

//樹初始化
var myTreeSetting = {
    view: {  
        showLine: true, 
        selectedMulti: false,  
        dblClickExpand: false  
    },  
    async: {
        enable: true,
        type: "get",
        dataType:"json",
        url:"/server/basic/major/info/findmajortree.json",
        autoParam:["id=pId"],
        dataFilter: filter
    },

    data: {  
        simpleData: {  
            enable: true,  
            idKey:"id",  
            pIdKey:"pId",
            rootPId:0
        }
    }
};

解釋：

1. setting.async.url [ 依賴 jquery.ztree.core ]
   Ajax 獲取數據的 URL 地址，默認值："".設置固定的異步加載 url請注意地址的路徑，確保頁面能正常加載。
   url 內也能夠帶參數，這些參數就只能是經過 get方式提交了，而且請注意進行data格式。不一樣的樹目錄根據不 同的數據，在服務器端編寫好不一樣的url，將其配置在這裏便可。
2. setting.async.dataType[ 依賴 jquery.ztree.core]
   Ajax 獲取的數據類型，默認值："text"。這裏我使用了json。
3. setting.async.dataFilter[ 依賴 jquery.ztree.core ]
   用於對 Ajax 返回數據進行預處理的函數。以後代碼中會給出filter的定義。

詳細說明參見：zTree API 文檔 http://www.ztree.me/v3/api.php

代碼

html：
仍是zTree -- jQuery 樹插件 使用方法與例子中的那個html，不在重複粘貼, 。

js:

var treeNodes;  

     $(document).ready(function() {
          initTree($('#planTree'));
      });
  
    //樹初始化
    var myTreeSetting = {
        view: {  
            showLine: true, 
            selectedMulti: false,  
            dblClickExpand: false  
        },  
        async: {
            enable: true,
            type: "get",
            dataType:"json",
            url:"/server/basic/major/info/findmajortree.json",
            autoParam:["id=pId"],
            dataFilter: filter
        },
    
        data: {  
            simpleData: {  
                enable: true,  
                idKey:"id",  
                pIdKey:"pId",
                rootPId:0
            }
        }
    };
    
    
    //初始化樹，包括回調函數
    function initTree(anchor){
        //初始化節點                           
        treeNodes = $.fn.zTree.init(anchor, classTreeSetting);
    }
    
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            if (childNodes[i].pId!='0') childNodes[i].open = false;
        }
    
        curChildNodes = childNodes;
        return childNodes;
    }

如此，就能夠實現了。
任它數據再多，樹結構再複雜，這一個js就足以配置許多想要的書目錄了。
效果以下：

後記

在頁面上放這樣一個樹目錄固然不是爲了放在那裏觀看的，例如，你想要點擊樹中的某個節點，頁面上的列表數據刷新爲對應的數據，等功能，均可以經過如下方法來完成。

在myTreeSetting中配置 callback，定義點擊事件。

callback: {
            beforeClick: getCurrentNode,
            onClick : zTreeOnClick
        }

在js中定義這些函數:

function getCurrentNode(treeId, treeNode) {
       curNode = treeNode;
       zTreeOnClick(curNode);
   }
   
   function zTreeOnClick(treeNode){
      //此處編寫須要完成的業務邏輯代碼
   }