樹形下拉框ztree、獲取ztree全部父節點，ztree的相關方法

參考：jQuery樹形控件zTree使用小結

需求

添加、修改的終端須要選擇組織，組織是多級架構（樹狀圖顯示）。

思路

一、由於下拉框須要樹狀圖顯示，因此排除使用select作下拉框，改用input 模擬下拉框 
二、樹狀圖採用zTree插件

開始

一、佈局

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.core.min.js"></script>
<link href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
<style> .trg{/*設置三角符號的樣式*/ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid black;; position: absolute; left:380px; top:12px;
    } .org-select{/*設置input框的樣式*/ cursor: default; z-index: -1; width:400px;
    } #treeDemo{/*設置樹結構的樣式*/ position:absolute; z-index:1;/*層級定位高一些，absolute或者relative時，顯示層級的優先級*/ overflow：hidden;/*去除浮動*/ background-color: white;/*背景色*/ width:100%; border:1px solid #4aa5ff;
    }      
</style>
<div style="position: relative;margin:90px;">
    <input id="orgName" class="org-select" onclick="showTree()" readonly > 
    <!-- 模擬select點擊框 以及option的text值顯示-->
    <i class="trg"style="position: absolute;"></i>
    <!-- 模擬select右側倒三角 -->
    <input id="orgCode" type="hidden" name="orgCode" />
    <!-- 存儲 模擬select的value值 -->
    <div class="ztree" style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
        <ul id="treeDemo"></ul>
        <!-- zTree樹狀圖 相對定位在其下方 -->
    </div>  
</div>

 二、js代碼

//樹狀圖展現 var orgList =[ { id:1, pId:0, name:"父節點1 - 展開", open:true}, { id:11, pId:1, name:"父節點11 - 摺疊"}, { id:111, pId:11, name:"葉子節點111"}, { id:112, pId:11, name:"葉子節點112"}, { id:113, pId:11, name:"葉子節點113"}, { id:114, pId:11, name:"葉子節點114"}, { id:12, pId:1, name:"父節點12 - 摺疊"}, { id:121, pId:12, name:"葉子節點121"}, { id:122, pId:12, name:"葉子節點122"}, { id:123, pId:12, name:"葉子節點123"}, { id:124, pId:12, name:"葉子節點124"} ]; /*兩種格式均可以*/ var orgList =[ { name:"***平臺系統", open:true, children: [ { name:"**核心系統", open:true, children: [{ name:"數據維護系統" } ,{ name:"新數據維護系統" } ]} ,{ name:"北分車險****" } ,{ name:"北京上海易*****" } ]} ,{ name:"**增項目" } ,{ name:"客服體系" } ]; var setting = { data: { simpleData: { enable: true } }, //回調 callback: { onClick: zTreeOnClick }, view: { fontCss: { fontSize: "14px" } } }; //節點點擊事件 function zTreeOnClick(event, treeId, treeNode) { name = getFilePath(treeNode); $('#orgName').val(name); hideTree(); }; //獲取子節點，全部父節點的name的拼接字符串 function getFilePath(treeObj){ if(treeObj==null)return ""; var filename = treeObj.name; var pNode = treeObj.getParentNode(); if(pNode!=null){ filename = getFilePath(pNode) +">"+ filename; } return filename; } $(document).ready(function () { //初始組織樹狀圖 $.fn.zTree.init($("#treeDemo"), setting, orgList); }); //下拉框顯示 隱藏 function showTree(){ if($('.ztree').css('display') == 'none'){ $('.ztree').css('display','block'); } else{ $('.ztree').css('display','none'); } $("body").bind("mousedown", onBodyDownByActionType); } function hideTree() { $('.ztree').css('display','none'); $("body").unbind("mousedown", onBodyDownByActionType); return false; } //區域外點擊事件 function onBodyDownByActionType(event) { if (event.target.id.indexOf('treeDemo') == -1){ if(event.target.id != 'selectDevType'){ hideTree(); } } }

 三、展現

 

 zTree的經常使用方法

 1 獲取zTree對象：var treeObj = $.fn.zTree.getZTreeObj("tree"); 2 增長節點：addNodes(parentNode,index,newNodes,isSlient) 3 parentNode:指定的父節點，若是增長根節點，請設置 parentNode 爲 null 便可 4 index:新節點插入的位置（從 0 開始），index = -1 時，插入到最後，此參數可忽略 5 newNodes：須要增長的節點數據 JSON 對象集合，數據只須要知足 zTree 的節點數據必需的屬性便可 6 isSilent：true 時，添加節點後不展開父節點，其餘值或缺省狀態都自動展開 7 勾選或取消勾選所有節點：checkAllNodes(checked); 8 checked參數爲true時所有勾選，爲false時所有取消勾選。 9 勾選或取消勾選單個節點：checkNode(node, checked, checkedTypeFlag，callbackFlag); 10 node：要進行操做的節點 11 checked：爲true勾選，爲false取消勾選 12 checkeTypeFlag:爲true表示對當前結點的子節點及父節點進行勾選狀態的聯動，爲false不聯動 13 callbackFlag:爲true時表示執行beforeOnCheck和onCheck事件的回調函數，爲false不執行
14 getParentNode:找到父節點 
編輯節點 15 edit(node); 使節點處於編輯狀態，必須引用jquery.ztree.exedit 擴展。 16 展開或摺疊所有節點：expandAll(expand); 17 expand爲true是展開全部節點，爲false是摺疊全部節點。 18 根據節點屬性查找結點：getNodesByParam(key,value, parentNode); 19 key:屬性名 20 value:屬性值 21 parentNode:是否在指定節點下查找，爲null表示整個樹查找。 22 獲取被勾選或未被勾選的節點集合：getCheckedNodes(checked); 23 checked爲true表示獲取全部被勾選的節點集合，爲false表示全部未被勾選的節點集合 24 獲取輸入框勾選狀態被改變的節點集合：getChangeCheckedNodes()