当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Easyui和zTree两种方式分别实现树形下拉框

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

最近工作中需要用到树形下拉框，因为项目中树形结构使用的是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两种方式分别实现树形下拉框，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网