[TOC] [基于bootstrap的jQuery多級列表樹插件\_jQuery之家-自由分享jQuery、html5、css3的插件庫 (htmleaf.com)](http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html) [基于bootstrup的jQuery多級列表樹插件效果演示\_jQuery之家-自由分享jQuery、html5、css3的插件庫 (htmleaf.com)](http://www.htmleaf.com/Demo/201502141380.html) [jonmiles/bootstrap-treeview: Tree View for Twitter Bootstrap - (github.com)](https://github.com/jonmiles/bootstrap-treeview) ## **ztree** [API 文檔 \[zTree -- jQuery 樹插件\] (treejs.cn)](https://treejs.cn/v3/api.php) **html** ``` <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> ``` >[danger]注意 容器的class必須要設置為ztree **js** ``` var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; var zNodes= [ {id:1, pId:0, name: "父節點1"}, {id:11, pId:1, name: "子節點1"}, {id:12, pId:1, name: "子節點2"} ]; //實例化并返回ztree對象 $.fn.zTree.init($("#treeDemo"), setting, zNodes); //其他地方隨時獲取ztree對象,必須在初始化 zTree 以后才可以使用此方法。 var treeObj = $.fn.zTree.getZTreeObj("tree"); //銷毀指定ztree $.fn.zTree.destroy("treeDemo"); //銷毀全部ztree $.fn.zTree.destroy(); //插件入口 $.fn.zTree._z ``` ### **配置一覽詳情參看**[**zTree -- jQuery 樹插件API**](https://treejs.cn/v3/api.php) ``` $.fn.zTree.init($("#cateDir"), setting, treeNode); ``` ``` setting 配置詳解 var setting = { treeId : "",//zTree 的唯一標識，初始化后，等于 用戶定義的 zTree 容器的 id 屬性值,請勿進行初始化 或 修改，屬于內部參數 treeObj : null,//zTree 容器的 jQuery 對象，主要功能：便于操作,請勿進行初始化 或 修改，屬于內部參數。 async : { enable : false,//異步加載，true后生效且下面的參數才有效 autoParam : [],//異步加載時需要自動提交父節點屬性的參數。[setting.async.enable = true 時生效] contentType : "application...",//Ajax 提交參數的數據類型。[setting.async.enable = true 時生效] dataFilter : null,//用于對 Ajax 返回數據進行預處理的函數 dataType : "text",//Ajax 獲取的數據類型 otherParam : [],//Ajax 請求提交的靜態參數鍵值對 type : "post",//Ajax 的 http 請求模式 headers : {},//參考 jQuery ajax 中的 headers 參數 xhrFields : {},//參考 jQuery ajax 中的 xhrFields 參數 url : ""//Ajax 獲取數據的 URL 地址 }, callback : { beforeAsync : null,//用于捕獲異步加載之前的事件回調函數。返回值是 true / false，zTree 根據返回值確定是否允許進行異步加載 beforeCheck : null,//用于捕獲 勾選 或 取消勾選 之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許 勾選 或 取消勾選 beforeClick : null,//用于捕獲單擊節點之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許單擊操作 beforeCollapse : null,//用于捕獲父節點折疊之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許折疊操作 beforeDblClick : null,//用于捕獲 zTree 上鼠標雙擊之前的事件回調函數。返回值是 true / false，并且根據返回值確定觸發 onDblClick 事件回調函數 beforeDrag : null,//用于捕獲節點被拖拽之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許開啟拖拽操作 beforeDragOpen : null,//用于捕獲拖拽節點移動到折疊狀態的父節點后。返回值是 true / false，即將自動展開該父節點之前的事件回調函數，并且根據返回值確定是否允許自動展開操作 beforeDrop : null,//用于捕獲節點拖拽操作結束之前的事件回調函數。返回值是 true / false,并且根據返回值確定是否允許此拖拽操作 beforeEditName : null,//用于捕獲節點編輯按鈕的 click 事件。返回值是 true / false,并且根據返回值確定是否允許進入名稱編輯狀態 beforeExpand : null,//用于捕獲父節點展開之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許展開操作 beforeMouseDown : null,//用于捕獲 zTree 上鼠標按鍵按下之前的事件回調函數。返回值是 true / false，并且根據返回值確定觸發 onMouseDown 事件回調函數 beforeMouseUp : null,//用于捕獲 zTree 上鼠標按鍵松開之前的事件回調函數。返回值是 true / false，并且根據返回值確定觸發 onMouseUp 事件回調函數 beforeRemove : null,//用于捕獲節點被刪除之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許刪除操作，回調參數treeId, treeNode beforeRename : null,//用于捕獲節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之后，更新節點名稱數據之前的事件回調函數。返回值是 true / false，并且根據返回值確定是否允許更改名稱的操作，回調參數treeId, treeNode,newName beforeRightClick : null,//用于捕獲 zTree 上鼠標右鍵點擊之前的事件回調函數。返回值是 true / false，并且根據返回值確定觸發 onRightClick 事件回調函數 onAsyncError : null,//用于捕獲異步加載出現異常錯誤的事件回調函數 onAsyncSuccess : null,//用于捕獲異步加載正常結束的事件回調函數 onCheck : null,//用于捕獲 checkbox / radio 被勾選 或 取消勾選的事件回調函數 onClick : null,//用于捕獲節點被點擊的事件回調函數 onCollapse : null,//用于捕獲節點被折疊的事件回調函數 onDblClick : null,//用于捕獲 zTree 上鼠標雙擊之后的事件回調函數 onDrag : null,//用于捕獲節點被拖拽的事件回調函數 onDragMove : null,//用于捕獲節點被拖拽過程中移動的事件回調函數 onDrop : null,//用于捕獲節點拖拽操作結束的事件回調函數 onExpand : null,//用于捕獲節點被展開的事件回調函數 onMouseDown : null,//用于捕獲 zTree 上鼠標按鍵按下后的事件回調函數 onMouseUp : null,//用于捕獲 zTree 上鼠標按鍵松開后的事件回調函數 onNodeCreated : null,//用于捕獲節點生成 DOM 后的事件回調函數 回調參數event, treeId, treeNode onRemove : null,//用于捕獲刪除節點之后的事件回調函數。 onRename : null,//用于捕獲節點編輯名稱結束之后的事件回調函數。 onRightClick : null//用于捕獲 zTree 上鼠標右鍵點擊之后的事件回調函數 }, check : { enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio ,影響下面的參數 autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數 chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 時對于父子節點的關聯關系 chkStyle : "checkbox",//勾選框類型(checkbox 或 radio） nocheckInherit : false,//當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true chkDisabledInherit : false,//當父節點設置 chkDisabled = true 時，設置子節點是否自動繼承 chkDisabled = true radioType : "level"//radio 的分組范圍 }, data : { keep : { leaf : false,//zTree 的節點葉子節點屬性鎖。如果設置為 true，則所有 isParent = false 的節點，都無法添加子節點 parent : false//zTree 的節點父節點屬性鎖，如果設置為 true，則所有 isParent = true 的節點，即使該節點的子節點被全部刪除或移走，依舊保持父節點狀態。 }, key : { checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱 children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。 isParent : "isParent",//zTree 節點數據保存節點是否為父節點的屬性名稱。 isHidden : "isHidden",//Tree 節點數據保存節點是否隱藏的屬性名稱。 name : "name",//zTree 節點數據保存節點名稱的屬性名稱。 title : "",//zTree 節點數據保存節點提示信息的屬性名稱 url : "url"//zTree 節點數據保存節點鏈接的目標 URL 的屬性名稱 }, simpleData : { enable : false,//是否采用簡單數據模式 (Array) idKey : "id",//節點數據中保存唯一標識的屬性名稱 pIdKey : "pId",//節點數據中保存其父節點唯一標識的屬性名稱 rootPId : null//用于修正根節點父節點數據，即 pIdKey 指定的屬性值 }, render : { name : null,//用于使用自定義的方法動態渲染節點名稱， 利用 setting.key.name 獲取該修改后節點名稱 title : null//用于使用自定義的方法動態渲染節點標題,利用 setting.key.title 獲取該修改后節點標題 } }, //編輯模塊 需要加載exedit 擴展 且 setting.edit.enable = true 時生效 edit : { drag : { autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數 isCopy : true,//拖拽時, 設置是否允許復制節點 isMove : true,//拖拽時, 設置是否允許移動節點 prev : true,//拖拽到目標節點時，設置是否允許移動到目標節點前面的操作 next : true,//拖拽到目標節點時，設置是否允許移動到目標節點后面的操作。 inner : true,//拖拽到目標節點時，設置是否允許成為目標節點的子節點 borderMax : 10,//拖拽節點成為根節點時的 Tree 內邊界范圍 (單位：px)。 borderMin : -5,//拖拽節點成為根節點時的 Tree 外邊界范圍 (單位：px)。 minMoveSize : 5,//判定是否拖拽操作的最小位移值 (單位：px)。 maxShowNodeNum : 5,//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多余的節點用...代替 autoOpenTime : 500//拖拽時父節點自動展開的延時間隔 }, editNameSelectAll : false,//節點編輯名稱 input 初次顯示時,設置 txt 內容是否為全選狀態 enable : false,//設置 zTree 是否處于編輯狀態 removeTitle : "remove",//刪除按鈕的 Title 輔助信息 renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息 showRemoveBtn : true,//設置是否顯示刪除按鈕 showRenameBtn : true//設置是否顯示編輯名稱按鈕 }, view : { addDiyDom : null,//用于在節點上固定顯示用戶自定義控件 addHoverDom : null,//用于當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕 autoCancelSelected : true,//點擊節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。 dblClickExpand : true,//雙擊節點時，是否自動展開父節點的標識 expandSpeed : "fast",//zTree 節點展開、折疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數 fontCss : {},//個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象 nodeClasses : {},//使用 className 設置文字樣式，只針對 zTree 在節點上顯示的<A>對象 nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本 removeHoverDom : null,//用于當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕 selectedMulti : true,//設置是否允許同時選中多個節點 showIcon : true,//設置 zTree 是否顯示節點的圖標 showLine : true,//設置 zTree 是否顯示節點之間的連線 showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性) txtSelectedEnable : false//設置 zTree 是否允許可以選擇 zTree DOM 內的文本 } } ``` ### **ZTreeObj實例對象**：`var treeObj = $.fn.zTree.getZTreeObj("tree");`動態修改或者獲取實例的參數 ``` var treeObj = $.fn.zTree.getZTreeObj("#cateDir"); ``` ~~~ //對于 id = "tree" 的 zTree 增加 1 個根節點 var treeObj = $.fn.zTree.getZTreeObj("tree"); var newNode = {name:"newNode1"}; newNode = treeObj.addNodes(null, newNode); //對于 id = "tree" 的 zTree 增加 3 個根節點 var treeObj = $.fn.zTree.getZTreeObj("tree"); var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}]; newNodes = treeObj.addNodes(null, newNodes); ~~~ ``` zTreeObj : { setting zTree 對象使用的 setting 配置數據，詳細請參考 “setting 配置詳解”中的各個屬性詳細說明 addNodes (parentNode, index, newNodes, isSilent) 添加節點。 cancelEditName (newName) 取消節點的編輯名稱狀態，可以恢復原名稱，也可以強行賦給新的名稱。 cancelSelectedNode (node) 取消節點的選中狀態。 checkAllNodes (checked) 勾選 或 取消勾選 全部節點 checkNode (node, checked, checkTypeFlag, callbackFlag) 勾選 或 取消勾選 單個節點 copyNode (targetNode, node, moveType, isSilent) 復制節點。 destroy () 銷毀當前zTreeObj實例 editName (node) 設置某節點進入編輯名稱狀態 expandAll (expandFlag) 展開 / 折疊 全部節點 expandNode (node, expandFlag, sonSign, focus, callbackFlag) 展開 / 折疊 指定的節點 getChangeCheckedNodes () 獲取輸入框勾選狀態被改變的節點集合（與原始數據 checkedOld 對比） getCheckedNodes (checked) 獲取輸入框被勾選 或 未勾選的節點集合 getNodeByParam (key, value, parentNode) 根據節點數據的屬性搜索，獲取條件完全匹配的節點數據 JSON 對象 getNodeByTId (tId) 根據 zTree 的唯一標識 tId 快速獲取節點 JSON 數據對象 getNodeIndex (node) 獲取某節點在同級節點中的序號（從0開始） getNodes () 獲取 zTree 的全部節點數據 getNodesByFilter (filter, isSingle, parentNode, invokeParam) 根據自定義規則搜索節點數據 JSON 對象集合 或 單個節點數據 getNodesByParam (key, value, parentNode) 根據節點數據的屬性搜索，獲取條件完全匹配的節點數據 JSON 對象集合 getNodesByParamFuzzy (key, value, parentNode) 根據節點數據的屬性搜索，獲取條件模糊匹配的節點數據 JSON 對象集合 getSelectedNodes () 獲取 zTree 當前被選中的節點數據集合 hideNode (node) 隱藏某個節點。 hideNodes (nodes) 隱藏一批節點。 moveNode (targetNode, node, moveType, isSilent) 移動節點。 reAsyncChildNodes (parentNode, reloadType, isSilent, callback) 強行異步加載父節點的子節點。 reAsyncChildNodesPromise(parentNode, reloadType, isSilent)強行異步加載父節點的子節點（ES6 Promise 版） refresh () 刷新 zTree 。 removeChildNodes (parentNode) 清空某父節點的子節點。 removeNode (node, callbackFlag) 刪除節點。 selectNode (node, addFlag, isSilent) 選中指定節點 setChkDisabled (node, disabled, inheritParent, inheritChildren) 禁用 或 解禁 某個節點的 checkbox / radio setEditable (editable) 設置 zTree 進入 / 取消 編輯狀態。 showNode (node) 顯示某個被隱藏的節點。 showNodes (nodes) 顯示一批已經被隱藏的節點。 transformToArray (nodes) 將 zTree 使用的標準 JSON 嵌套格式的數據轉換為簡單 Array 格式。(免去用戶自行編寫遞歸遍歷全部節點的麻煩) transformTozTreeNodes (simpleNodes) 將簡單 Array 格式數據轉換為 zTree 使用的標準 JSON 嵌套數據格式。 updateNode (node, checkTypeFlag) 更新某節點數據，主要用于該節點顯示屬性的更新。 } ``` ### **treeNode：zTreeObj的節點數據** ``` $.fn.zTree.init($("#cateDir"), setting, treeNode); ``` ``` treeNode : { checked 節點的 checkBox / radio 的 勾選狀態 children 節點的子節點數據集合。 chkDisabled 設置節點的 checkbox / radio 是否禁用 click 最簡單的 click 事件操作。相當于 onclick="..." 的內容。 如果操作較復雜，請使用 onClick 事件回調函數 getCheckStatus () 獲取節點 checkbox / radio 半勾選狀態 getIndex () 獲取 treeNode 節點在同級節點中的位置。 getNextNode () 獲取與 treeNode 節點相鄰的后一個節點 getParentNode () 獲取 treeNode 節點的父節點 getPath () 獲取 treeNode 節點的所有父節點（包括自己） getPreNode () 獲取與 treeNode 節點相鄰的前一個節點 halfCheck 強制節點的 checkBox / radio 的 半勾選狀態 icon 節點自定義圖標的 URL 路徑 iconClose 父節點自定義折疊時圖標的 URL 路徑 iconOpen 父節點自定義展開時圖標的 URL 路徑 iconSkin 節點自定義圖標的 className isHidden 判斷 treeNode 節點是否被隱藏。 isParent 記錄 treeNode 節點是否為父節點。 name 節點名稱。 nocheck 設置節點是否隱藏 checkbox / radio open 記錄 treeNode 節點的 展開 / 折疊 狀態 target 設置點擊節點后在何處打開 url url 節點鏈接的目標 URL *DIY* [check_Child_State] 用于設置節點的子節點的 checkBox / radio 的半選狀態 [check_Focus] 用于設置節點的 checkBox / radio 的 focus 狀態 [checkedOld] 節點的 checkBox / radio 在初始化時的 勾選狀態 [editNameFlag] 用于記錄節點是否處于編輯名稱狀態 [isAjaxing] 記錄 treeNode 節點是否正在進行異步加載。 [isFirstNode] 記錄 treeNode 節點是否為同級節點中的第一個節點 [isHover] 記錄節點 的 hover 狀態，主要用于 setting.view.addHoverDom / removeHoverDom [isLastNode] 記錄 treeNode 節點是否為同級節點中的最后一個節點。 [level] 記錄節點的層級 [parentTId] treeNode 節點的父節點唯一標識 tId。 [tId] treeNode 節點的唯一標識 tId。 [zAsync] 記錄 treeNode 節點是否已經進行過異步加載，避免父節點反復異步加載數據。 } ```