欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:26:13
最近工作中需要用到树形下拉框,因为项目中树形结构使用的是ztree,然后就百度,结果出来效果不好看,后来就试着用了easyui的combotree,虽然比较好看,但是跟整体...

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