Easyui和zTree两种方式分别实现树形下拉框

最近工作中需要用到树形下拉框，因为项目中树形结构使用的是zTree，然后就百度，结果出来效果不好看，后来就试着用了easyui的comboTree，虽然比较好看，但是跟整体的bootstrap风格有点儿不搭。现在贴出来两种方式及效果，以后备用。

方式一，使用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 () {//请求失败处理函数
        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两种方式分别实现树形下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！