ztree入門應用總結

標籤：

　　以前用到過ZTREE做樹形展示，當時沒有總結，今天簡單總結一下，以後用的時候也好找，廢話不多說，下面開始。

1、ztree簡介

　　ztree是依靠jquery實現的一個樹形外掛程式，是一個開源的外掛程式，相容IE/FF/CHROM/OPERA這些常用的瀏覽器，支援JSON資料以及AJAX非同步載入節點資料，提供多種事件回呼函數，其實說了一大堆就是想說一句話，這是個比較好用的樹形結構展示外掛程式。

2、使用2.0 項目環境2.0.1 資料庫表

 

2.1 引入的檔案2.1.1 JS檔案

a. jquery-1.4.2.js 或其他更高版本的 jQuery ;

b. jquery-ztree.core-3.0.js,如果需要用到編輯功能 或 checkbox / radio 還需要分別載入 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js;
c.根據需求添加其他JS檔案。

2.1.2 CSS檔案

a. zTreeStyle.css;

b. zTreeStyle 目錄下的 img 檔案；

c.根據需求引入其他CSS檔案；

2.2 初始化2.2.1 頁面

　　在頁面上需要有一個承載tree的容器，並且要設定該容器的className為ztree，如下所示：

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

　　ztree" 這個 className，可以根據需要隨意修改，別忘了修改 css 中對應名字就是了，對於容器如果需要增加其他特殊樣式，可根據自己的需要進行修改。

2.2.2 JS初始化

$.fn.zTree.init($("#tree"), setting);

　　init方法中可以有三個參數，第一個參數表示tree的承載容器物件，第二個參數表示ztree的配置資料，也就是初始化參數，第三個參數zNodes表示ztree的節點資料，因為在本文中使用非同步載入的方式載入資料，因此第三個參數為空白。

　　此方法的傳回值即為ztree對象，提供操作ztree的各種方法，對於通過js操作ztree來說必須通過此對象，如果沒有設定的話，可以使用 $.fn.zTree.getZTreeObj方法隨時擷取，擷取方式為：

treeObj = $.fn.zTree.getZTreeObj("tree");

2.2.3 setting設定2.2.3.1 async

async : {        enable : true,        url : asyncURL,        type : "post",        dataType : "text",        autoParam : ["id=pid"],//        otherParam : ["type"],        dataFilter : toArray    },

　　async表示非同步載入時需要向後台傳遞的參數。

　　enable：設定ztree是否開啟非同步載入模式，布爾類型，預設為false;如果設定為 true，請務必設定 setting.async 內的其它參數。如果需要根節點也非同步載入，初始化時 treeNodes 參數設定為 null 即可。

　　url:Ajax 擷取資料的 URL 地址;enable為true時生效；url 內也可以帶參數，這些參數就只能是通過 get 方式提交了，並且請注意進行轉碼；

　　type：ajax的http請求模式，預設值為post；

　　dataType ：Ajax 擷取的資料類型；

　　autoParam：非同步載入時需要自動認可父節點屬性的參數，預設為[]，將需要作為參數提交的屬性名稱，製作成 Array 即可，例如：["id", "name"],可以設定提交時的參數名稱，例如 server 只接受 zId : ["id=zId"];

　　dataFilter :用於對 Ajax 返回資料進行預先處理的函數,傳回值是 zTree 支援的JSON 資料結構即可。

/** * transfer the post data to array adapted to displaying the zTree * 將非同步過來的JSON資料，進行處理，符合Ztree的顯示 */function toArray (treeId, pNode, datas) {    if(!datas || datas.length == 0){        //alert("no datas");        return null;    }    var len = datas.length;    var array = new Array();    for(var i = 0; i < len; i++){        if(datas[i].type != "f"){            datas[i].isParent = true;        }        if(pNode){            datas[i].checked = datas[i].checked || pNode.checked;        }        array.push(datas[i]);    }    return array;}

　　此函數的三個參數，treeId對應ztree的treeid,pNode表示進行非同步載入的父節點json資料對象，對根進行非同步載入時，pNode = null,datas表示非同步載入擷取到的資料轉換後的Array(JSON)、JSON、String資料對象。

 

2.2.3.1.1 後台代碼

private Integer pid;public String getChildren(){        if(pid == null){            pid = SessionUtils.getCurrentRequireFromSession(request).getId();        }        List<SystemModule> list = nodeService.getNodeChildren(pid);        String json = new Gson().toJson(list);                try {            response.setContentType("text/plain");            response.setCharacterEncoding("utf-8");            PrintWriter out = response.getWriter();            out.print(json);        } catch (IOException e) {            e.printStackTrace();        }                return null;    }

2.2.3.2 check

/*outlook style should not include the check, you mustn‘t set the check configuration outLook 風格不能有check選擇的配置，否則會有左側按鈕的重疊*/    check : {        autoCheckTrigger : false, // automatically trigger the check functions: beforeCheck and onCheck        chkboxType : {"Y" : "ps","N" : "ps"},        chkStyle : "checkbox",        enable : true,        nocheckInherit : false,        chkDisabledInherit : false,        radioType : "level"    },

　　chkboxType:勾選 checkbox 對於父子節點的關聯關係,setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效;Y 屬性定義 checkbox 被勾選後的情況,N 屬性定義 checkbox 取消勾選後的情況,"p" 表示操作會影響父級節點,"s" 表示操作會影響子級節點,注意大小寫，改變後出錯。

　　autoCheckTrigger：設定自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回呼函數，這裡設定為不觸發；

　　chkStyle：表示勾選框類型，checkbox或者radio，預設為checkbox,此時顯示 checkbox 選擇框，setting.check.chkboxType 屬性有效；chkStyle = "radio" 時，顯示 radio 選擇框， setting.check.radioType 屬性有效。注意大小寫。

　　enable：設定 zTree 的節點上是否顯示 checkbox / radio，預設值為false；

　　nocheckInherit：當父節點設定 nocheck = true 時，設定子節點是否自動繼承 nocheck = true；true 表示 新加入子節點時，自動繼承父節點 nocheck = true 的屬性。false 表示 新加入子節點時，不繼承父節點 nocheck 的屬性。預設值為false;

　　chkDisabledInherit:當父節點設定 chkDisabled = true 時，設定子節點是否自動繼承 chkDisabled = true；

　　radioType：radio 的分組範圍，預設為level,radioType = "level" 時，在每一級節點範圍內當做一個分組,radioType = "all" 時，在整棵樹範圍內當做一個分組.

　　標紅色的兩個必須設定，其他的根據需要設定即可。

 

2.2.3.3 view

view: {//        addDiyDom : outLookStyle,//        addHoverDom: addHoverDom,// mouse float//        removeHoverDom: removeHoverDom,// mouse float        autoCancelSelected : false,        dblClickExpand : true,//        expandSpeed : "slow",// tree expand speed        fontCss : setFontCss,//        nameIsHTML : false,        selectedMulti: false,        showIcon : false,        showLine : false,        showTitle : false,        txtSelectedEnable : true    },

　　上面注掉的是暫時用不到的，如果想用的話可以自己查一下API加上即可，主要介紹一下沒有注掉的那些功能：

autoCancelSelected ：點擊節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。其實我也沒感覺有什麼用，預設值為true，如果不需要此功能可以設定為false,此處設定為false;

dblClickExpand :雙擊節點時，是否自動延伸父節點的標識，boolean類型，預設為true;什麼意思呢，其實就是如果一個節點有下級節點，雙擊此節點時，如果是展開的，那麼會摺疊，反之亦然；

fontCss ：個人化文字樣式，只針對 zTree 在節點上顯示的<A>對象。預設值為{},JSON 格式為 JQuery css方法中的 JSON 對象格式，例如：{color:"#ff0011", background:"blue"}，此處可以使用函數來設定：

/** set the CSS style for every different node * 為每一個節點設定不同的CSS樣式  * @param treeId * @param treeNode */var cssJson = {color:"red"};function setFontCss(treeId, treeNode) {    if(treeNode.level == 0){        cssJson.color = "red";    } else if(treeNode.level == 1){        cssJson.color = "blue";    } else if(treeNode.level == 2){        cssJson.color = "green";    } else {        cssJson.color = "red";    }    return cssJson;};

　　selectedMulti：設定是否允許同時選中多個節點。預設值為true,設定為 true時，按下 Ctrl 或 Cmd 鍵可以選中多個節點，此處禁用；

　　showIcon：設定 zTree 是否顯示節點的表徵圖。預設為true,這裡為了追求簡單就沒有加ICON,喜歡的同學可以自己加上去，也可以使用函數設定ICON,傳回值是布爾類型的；

　　showLine：設定 zTree 是否顯示節點之間的連線。預設值為true，顯示節點之間的連線；

　　showTitle:設定 zTree 是否顯示節點的 title 提示資訊(即節點 DOM 的 title 屬性)。請務必與 setting.data.key.title 同時使用。預設值：true,不需要顯示提示資訊的話就無視吧；

　　txtSelectedEnable：設定 zTree 是否允許可以選擇 zTree DOM 內的文本。預設為false；

2.2.3.4 data

data: {        keep : {            leaf : true,// children lock            parent : true// parent lock        },        key : {            children : "child",            name : "name",            title : "ufp",        },        simpleData: {            enable: true        }    },

　　leaf：zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false，預設為false,如果設定為 true，則所有 isParent = false 的節點，都無法添加子節點。什麼意思呢，意思就是只要你是孫子，一輩子都是孫子，什麼時候你也變不成老子，就是這樣；

　　parent：zTree 的節點父節點屬性鎖，是否始終保持 isParent = true，跟上邊意思差不多；

　　children：zTree 節點資料中儲存子節點資料的屬性名稱。

　　name:zTree 節點資料儲存節點名稱的屬性名稱。預設值是name;

　　title:zTree 節點資料儲存節點提示資訊的屬性名稱。如果設定為 "" ，則自動與 setting.data.key.name 保持一致，避免使用者反覆設定,，預設值是"";[setting.view.showTitle = true 時生效]

　　enable:確定 zTree 初始化時的節點資料、非同步載入時的節點資料、或 addNodes 方法中輸入的 newNodes 資料是否採用簡單資料模式 (Array),不需要使用者再把資料庫中取出的 List 強行轉換為複雜的 JSON 嵌套格式,預設值：false,如果設定為 true，請務必設定 setting.data.simpleData 內的其他參數: idKey / pIdKey / rootPId，並且讓資料滿足父子關係。

　　2.2.3.5 edit

edit : {        enable : true,        showRemoveBtn : false,        showRenameBtn : false,        drag : {            isCopy : true,            isMove : false,            prev : true,            inner : true,            next : true,        },    },

　　enable:設定 zTree 是否處於編輯狀態,請在初始化之前設定，初始化後需要改變編輯狀態請使用 zTreeObj.setEditable() 方法,預設值: false;點擊節點時，不會開啟 node.url 指定的 URL;全面支援 編輯 與 非同步載入 狀態共存;可以對節點進行拖拽，且支援多棵樹之間進行拖拽;支援拖拽時 複製/移動 節點;可以通過編輯按鈕修改 name 屬性;可以通過刪除按鈕刪除節點。

　　showRemoveBtn:設定是否顯示刪除按鈕，預設值：true;當點擊某節點的刪除按鈕時：

　　　　1、首先觸發 setting.callback.beforeRemove 回呼函數，使用者可判定是否進行刪除操作。

　　　　2、如果未設定 beforeRemove 或 beforeRemove 返回 true，則刪除節點並觸發setting.callback.onRemove 回呼函數。

　　showRenameBtn：設定是否顯示編輯名稱按鈕，預設值：true；

　　drag：拖拽時的屬性；

　　isCopy:拖拽時, 設定是否允許複製節點;

　　isMove:拖拽時, 設定是否允許移動節點;

　　　　1、isCopy = true; isMove = true 時，拖拽節點按下 Ctrl 或 Cmd 鍵表示 copy; 否則為 move

　　　　2、isCopy = true; isMove = false 時，所有拖拽操作都是 copy

　　　　3、isCopy = false; isMove = true 時，所有拖拽操作都是 move

　　　　4、isCopy = false; isMove = false 時，禁止拖拽操作

　

 

　　　　又有事了，先寫到這，下次接著寫。

　　

　　

 

　　

　　

　　

　　

 

ztree入門應用總結