免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

需求

添加、修改終端需要選擇組織，組織是多級(jí)架構(gòu)（樹狀圖顯示）。

思路

1、因?yàn)橄吕蛐枰獦錉顖D顯示，所以排除使用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  rel="stylesheet"><style>.trg{    width: 0;    height: 0;    border-left: 3px solid transparent;    border-right: 3px solid transparent;    border-top: 6px solid black;;    position: absolute;    left:181px;    top:8px;}.org-select{    cursor: default;    z-index: -1;    width:200px;}</style><div style="position: relative;margin:90px;">    <input id="orgName" class="org-select" onclick="showTree()"  readonly >     <!-- 模擬select點(diǎn)擊框 以及option的text值顯示-->    <i class="trg"style="position: absolute;"></i>    <!-- 模擬select右側(cè)倒三角 -->    <input id="orgCode" type="hidden" name="orgCode" />    <!-- 存儲(chǔ) 模擬select的value值 -->    <!-- zTree樹狀圖 相對(duì)定位在其下方 -->    <div class="ztree"  style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">        <ul id="treeDemo"></ul>    </div>  </div>

2、js方法部分

//樹狀圖展示var orgList =[      { id:1, pId:0, name:"父節(jié)點(diǎn)1 - 展開", open:true},      { id:11, pId:1, name:"父節(jié)點(diǎn)11 - 折疊"},      { id:111, pId:11, name:"葉子節(jié)點(diǎn)111"},      { id:112, pId:11, name:"葉子節(jié)點(diǎn)112"},      { id:113, pId:11, name:"葉子節(jié)點(diǎn)113"},      { id:114, pId:11, name:"葉子節(jié)點(diǎn)114"},      { id:12, pId:1, name:"父節(jié)點(diǎn)12 - 折疊"},      { id:121, pId:12, name:"葉子節(jié)點(diǎn)121"},      { id:122, pId:12, name:"葉子節(jié)點(diǎn)122"},      { id:123, pId:12, name:"葉子節(jié)點(diǎn)123"},      { id:124, pId:12, name:"葉子節(jié)點(diǎn)124"},       ];  var setting = {      data: {          simpleData: {              enable: true          }      },      //回調(diào)      callback: {          onClick: zTreeOnClick      },      view: {          fontCss: { fontSize: "14px" }      }  };  //節(jié)點(diǎn)點(diǎn)擊事件  function zTreeOnClick(event, treeId, treeNode) {      $('#orgName').val(treeNode.name);      $('#orgCode').val(treeNode.Id)      hideTree();    };  $(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;} //區(qū)域外點(diǎn)擊事件function onBodyDownByActionType(event) {      if (event.target.id.indexOf('treeDemo') == -1){          if(event.target.id != 'selectDevType'){            hideTree();         }     }  }

效果圖

代碼：樹狀圖下拉框

轉(zhuǎn)自 https://blog.csdn.net/jx950915/article/details/80403027