zTree -- jQuery 樹(shù)插件構(gòu)造treeNode JSON 數(shù)據(jù)對(duì)象

周國(guó)輝發(fā)布于2019-08-21 10:50 / 3153人閱讀

摘要：前言是一個(gè)依靠實(shí)現(xiàn)的多功能樹(shù)插件。不同的樹(shù)目錄根據(jù)不同的數(shù)據(jù)，在服務(wù)器端編寫好不同的，將其配置在這里即可。依賴獲取的數(shù)據(jù)類型，默認(rèn)值。依賴用于對(duì)返回?cái)?shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。詳細(xì)說(shuō)明參見(jiàn)文檔代碼還是樹(shù)插件使用方法與例子中的那個(gè)，不在重復(fù)粘貼。

前言

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。

網(wǎng)址：http://www.ztree.me/v3/main.p...

上回說(shuō)到，在大型項(xiàng)目中，往往需要不同的用戶看到不同的目錄，不同的地區(qū)顯示不同的目錄等等，面對(duì)這些龐大的數(shù)據(jù)，需要生成不同結(jié)構(gòu)的樹(shù)目錄，你不能一個(gè)一個(gè)定義這些配置來(lái)滿足那么多數(shù)據(jù)需求，這就需要異步加載子節(jié)點(diǎn)的的父節(jié)點(diǎn)，通過(guò)構(gòu)造treeNode的 JSON 數(shù)據(jù)對(duì)象方法來(lái)實(shí)現(xiàn)，如果你不嫌我啰嗦，接下來(lái)會(huì)給大家講述這個(gè)方法。

setting配置

按照如下配置來(lái)構(gòu)造ztree:

//樹(shù)初始化
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
        }
    }
};

解釋：

setting.async.url [ 依賴 jquery.ztree.core ]
Ajax 獲取數(shù)據(jù)的 URL 地址，默認(rèn)值："".設(shè)置固定的異步加載 url請(qǐng)注意地址的路徑，確保頁(yè)面能正常加載。
url 內(nèi)也可以帶參數(shù)，這些參數(shù)就只能是通過(guò) get方式提交了，并且請(qǐng)注意進(jìn)行data格式。不同的樹(shù)目錄根據(jù)不同的數(shù)據(jù)，在服務(wù)器端編寫好不同的url，將其配置在這里即可。

setting.async.dataType[ 依賴 jquery.ztree.core]
Ajax 獲取的數(shù)據(jù)類型，默認(rèn)值："text"。這里我使用了json。

setting.async.dataFilter[ 依賴 jquery.ztree.core ]
用于對(duì) Ajax 返回?cái)?shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。之后代碼中會(huì)給出filter的定義。

詳細(xì)說(shuō)明參見(jiàn)：zTree API 文檔 http://www.ztree.me/v3/api.php

代碼

html：
還是zTree -- jQuery 樹(shù)插件使用方法與例子中的那個(gè)html，不在重復(fù)粘貼, 。

js:

    var treeNodes;  

     $(document).ready(function() {
          initTree($("#planTree"));
      });
  
    //樹(shù)初始化
    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
            }
        }
    };
    
    
    //初始化樹(shù)，包括回調(diào)函數(shù)
    function initTree(anchor){
        //初始化節(jié)點(diǎn)                           
        treeNodes = $.fn.zTree.init(anchor, classTreeSetting);
    }
    
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i
如此，就可以實(shí)現(xiàn)了。
任它數(shù)據(jù)再多，樹(shù)結(jié)構(gòu)再?gòu)?fù)雜，這一個(gè)js就足以配置許多想要的書目錄了。
效果如下：

后記
在頁(yè)面上放這樣一個(gè)樹(shù)目錄當(dāng)然不是為了放在那里觀看的，例如，你想要點(diǎn)擊樹(shù)中的某個(gè)節(jié)點(diǎn)，頁(yè)面上的列表數(shù)據(jù)刷新為對(duì)應(yīng)的數(shù)據(jù)，等功能，都可以通過(guò)以下方法來(lái)完成。
在myTreeSetting中配置 callback，定義點(diǎn)擊事件。
    callback: {
            beforeClick: getCurrentNode,
            onClick : zTreeOnClick
        }
在js中定義這些函數(shù):
   function getCurrentNode(treeId, treeNode) {
       curNode = treeNode;
       zTreeOnClick(curNode);
   }
   
   function zTreeOnClick(treeNode){
      //此處編寫需要完成的業(yè)務(wù)邏輯代碼
   }

云服務(wù)器 GPU云服務(wù)器構(gòu)造樹(shù)json jquery遍歷json對(duì)象 jquery操作json對(duì)象 ztree插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/86289.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

周國(guó)輝

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Css打字機(jī)效果

閱讀 2345·2019-08-30 15:44
css filter濾鏡的實(shí)例講解

閱讀 1270·2019-08-30 13:01
徹底搞懂JS事件冒泡與捕獲

閱讀 3312·2019-08-30 11:22
css預(yù)編譯--sass進(jìn)階篇

閱讀 3097·2019-08-29 15:23
input下拉列表選中后背景變黃色

閱讀 1620·2019-08-29 12:22
網(wǎng)頁(yè)上渲染數(shù)學(xué)公式

閱讀 3378·2019-08-26 13:58
this的指向問(wèn)題

閱讀 3446·2019-08-26 12:17
如何利用showdoc自動(dòng)生成API文檔

閱讀 3483·2019-08-26 12:16

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

zTree -- jQuery 樹(shù)插件構(gòu)造treeNode JSON 數(shù)據(jù)對(duì)象

相關(guān)文章

zTree -- jQuery 樹(shù)插件使用方法與例子

前端技術(shù) 博客文章、書籍積累

前端技術(shù) 博客文章、書籍積累

前端技術(shù) 博客文章、書籍積累

發(fā)表評(píng)論

0條評(píng)論

周國(guó)輝

男|高級(jí)講師

TA的文章

Css打字機(jī)效果

css filter濾鏡的實(shí)例講解

徹底搞懂JS事件冒泡與捕獲

css預(yù)編譯--sass進(jìn)階篇

input下拉列表選中后背景變黃色

網(wǎng)頁(yè)上渲染數(shù)學(xué)公式

this的指向問(wèn)題

如何利用showdoc自動(dòng)生成API文檔

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

zTree -- jQuery 樹(shù)插件 構(gòu)造treeNode JSON 數(shù)據(jù)對(duì)象

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

zTree -- jQuery 樹(shù)插件構(gòu)造treeNode JSON 數(shù)據(jù)對(duì)象