Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框

更新時間：2017年08月04日 16:22:58 作者：Annie-ax

最近工作中需要用到樹形下拉框，因為項目中樹形結(jié)構使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達到了，但是風格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺供大家參考

最近工作中需要用到樹形下拉框，因為項目中樹形結(jié)構使用的是zTree，然后就百度，結(jié)果出來效果不好看，后來就試著用了easyui的comboTree，雖然比較好看，但是跟整體的bootstrap風格有點兒不搭。現(xiàn)在貼出來兩種方式及效果，以后備用。

方式一，使用zTree

前端代碼：

<div class="form-group"> 
  <label>點擊事件：</label> 
  <input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" style="border-radius:5px;background-color: white;cursor: default;"/> 
  <input type="hidden" name="actionTypeId" id="actionTypeId"/> 
  <div id="actionTreeContent" class="menuContent" style="border-radius:5px;display: none; z-index:9999;position: absolute; border: 1px #CCC solid; background-color:#f9f9f9;"> 
    <ul id="actionTypeTree" class="ztree" style="margin-top:0;height: 200px;overflow: auto"></ul> 
  </div> 
</div>

js代碼：

/* 
   * 點擊事件下拉樹的設置 
   */ 
  var actionTypeSetting = { 
    view: { 
      dblClickExpand: true, 
      showIcon: false, 
      fontCss : {"font-weight":"400","font-size":"20px"} 
    }, 
    data: { 
      key: { 
        name: "text", 
        children: "children" 
      }, 
      simpleData: { 
        enable: true 
      } 
    }, 
    callback: { 
      onClick: actionTypeOnClick 
    } 
  }; 
  /* 
   * 點擊事件下拉樹的點擊事件 
   */ 
  function actionTypeOnClick(e, treeId, treeNode) { 
    $("#actionTypeId").val(treeNode.id); 
    $("#selectActionType").val(treeNode.text); 
  } 
  /* 
   * 初始化點擊事件類型 
   * 
   */ 
  function initActionType() { 
    $.ajax({ 
      async: false, 
      cache: false, 
      type: 'POST', 
      dataType: "json", 
      url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2', 
      error: function () {//請求失敗處理函數(shù) 
        alert('請求失敗'); 
      }, 
      success: function (data) { //請求成功后處理函數(shù) 
        $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data); 
      } 
    }); 
  } 
  /* 
   * 展示點擊事件SelectTree 
   */ 
  function showActionTypeTree() { 
    $.ajax({ 
      url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2', 
      type: 'POST', 
      dataType: "json", 
      async: false, 
      success: function (data) { 
        $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data); 
        var deptObj = $("#selectActionType"); 
        var deptOffset = $("#selectActionType").offset(); 
        $("#actionTreeContent").css({ 
          left: deptOffset.left - 26 + "px", 
          top: deptOffset.top + "px" 
        }).slideDown("fast"); 
        $('#actionTypeTree').css({width: deptObj.outerWidth() + "px"}); 
        var zTree = $.fn.zTree.getZTreeObj("actionTypeTree"); 
        var node = zTree.getNodeByParam("id", $('#actionTypeId').val(), null); 
        zTree.selectNode(node); 
        $("body").bind("mousedown", onBodyDownByActionType); 
      } 
    }); 
  } 
  /* 
   * Body鼠標按下事件回調(diào)函數(shù) 
   */ 
  function onBodyDownByActionType(event) { 
    if (event.target.id.indexOf('switch') == -1) { 
      hideActionTypeMenu(); 
    } 
  } 
  /* 
   * 隱藏點擊事件Tree 
   */ 
  function hideActionTypeMenu() { 
    $("#actionTreeContent").fadeOut("fast"); 
    $("body").unbind("mousedown", onBodyDownByActionType); 
  }

方式二：使用easyui

前端代碼：

<div class="form-group"> 
  <label>點擊事件：</label> 
  <input id="actionTypeId2" name="actionTypeId2" class="form-control" /> 
</div>

js代碼：

$("#actionTypeId2").combotree({
  url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
  textField:'name',
  onClick: function (node) {
    $("#actionTypeId").val(node.id);
  },
  onSelect: function (node) {
    /**
     * 當選中該節(jié)點時展開該節(jié)點，同時關閉其他節(jié)點
     */
    if (node.state == "closed") {
      $(this).tree('expand', node.target);
    }
    else {
      var isLeaf = $(this).tree('isLeaf', node.target);
      if (!isLeaf) {
        $(this).tree("collapse", node.target);
      }
    }
  }
});

總結(jié)

以上所述是小編給大家介紹的Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

jquery 卷簾效果實現(xiàn)代碼(不同方向)
卷簾效果在生活中應用比較廣泛，因為它的視覺效果比較不錯，本文用代碼實現(xiàn)一個，感興趣的朋友不妨了解一下，或許對你學習jquery有所幫助,好了話不多說切入正題
2013-02-02
jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關技巧,需要的朋友可以參考下
2016-06-06
基于jquery實現(xiàn)下拉框美化特效
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)下拉框美化特效的示例代碼，以一個完整的實例進行分析講解，感興趣的小伙伴們可以參考一下
2016-02-02
詳解jQuery插件開發(fā)中的extend方法
這篇文章主要介紹了jQuery插件開發(fā)中的extend方法，有需要的朋友可以參考一下
2013-11-11
jQuery插件ContextMenu自定義圖標
這篇文章主要為大家詳細介紹了jQuery插件ContextMenu自定義圖標的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
深入理解Jquery表單驗證（使用formValidator）
表單驗證在web中中的應用很廣，本篇文章主要介紹了Jquery表單驗證（使用formValidator），非常具有實用價值，需要的朋友可以參考下。
2017-01-01
jQuery fadeOut 異步實例代碼詳解
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。這篇文章給大家介紹jquery fadeout異步實例代碼，感興趣的朋友一起看下吧
2016-08-08
jQuery模擬html下拉多選框的原生實現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬html下拉多選框的原生實現(xiàn)方法,結(jié)合完整實例形式分析了jQuery動態(tài)操作頁面元素實現(xiàn)select下拉框效果的相關操作技巧,需要的朋友可以參考下
2019-05-05
Jquery 獲得服務器控件值的方法小結(jié)
由于ASP.NET網(wǎng)頁運行后，服務器控件會隨機生成客戶端id，jquery獲取時候不太好操作，google了下，總結(jié)有以下3種方法.
2010-05-05
基于jQuery傾斜打開側(cè)邊欄菜單特效代碼
基于jQuery多重圖片無限循環(huán)動畫效果，本文給大家分享基于jQuery傾斜打開側(cè)邊欄菜單特效代碼，感興趣的朋友可以參考下
2015-09-09