Easyui和zTree如何实现树形下拉框

这篇文章给大家分享的是有关Easyui和zTree如何实现树形下拉框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

方式一，使用zTree

前端代码：

<div class="form-group"> 
  <label>点击事件：</label> 
  <input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" /> 
  <input type="hidden" name="actionTypeId" id="actionTypeId"/> 
  <div id="actionTreeContent" class="menuContent" > 
    <ul id="actionTypeTree" class="ztree" ></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 () {//请求失败处理函数 
        alert('请求失败'); 
      }, 
      success: function (data) { //请求成功后处理函数 
        $.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鼠标按下事件回调函数 
   */ 
  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) {
    /**
     * 当选中该节点时展开该节点，同时关闭其他节点
     */
    if (node.state == "closed") {
      $(this).tree('expand', node.target);
    }
    else {
      var isLeaf = $(this).tree('isLeaf', node.target);
      if (!isLeaf) {
        $(this).tree("collapse", node.target);
      }
    }
  }
});

感谢各位的阅读！关于“Easyui和zTree如何实现树形下拉框”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！