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

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

方式一，使用zTree

前端代码：

 
  点击事件： 
   
   
   
    
 
   
 

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); 
      } 
    }); 
  } 
   
  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); 
      } 
    }); 
  } 
   
  function onBodyDownByActionType(event) { 
    if (event.target.id.indexOf('switch') == -1) { 
      hideActionTypeMenu(); 
    } 
  } 
   
  function hideActionTypeMenu() { 
    $("#actionTreeContent").fadeOut("fast"); 
    $("body").unbind("mousedown", onBodyDownByActionType); 
  } 

方式二：使用easyui

前端代码：

 
  点击事件： 
   
 

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两种方式分别实现树形下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！