树形下拉框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()