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

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

需求

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

思路

1、因為下拉框需要樹狀圖顯示，所以排除使用select做下拉框，改用input 模擬下拉框 
2、樹狀圖采用zTree插件

開始

1、布局

<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>    

 2、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(); 
        } 
    }  
}

 3、展示

 

 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()