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


Posted in Javascript onAugust 04, 2017

最近工作中需要用到树形下拉框,因为项目中树形结构使用的是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两种方式分别实现树形下拉框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
JS中使用media实现响应式布局
Aug 04 #Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 #Javascript
node中Express 动态设置端口的方法
Aug 04 #Javascript
微信小程序 同步请求授权的详解
Aug 04 #Javascript
微信小程序 转发功能的实现
Aug 04 #Javascript
Vue计算属性的使用
Aug 04 #Javascript
JS+Ajax实现百度智能搜索框
Aug 04 #Javascript
You might like
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
使用console进行性能测试
2015/04/27 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django之路由层的实现
2019/09/09 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python3 元组tuple入门基础
2020/02/09 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
执行力心得体会
2013/12/31 职场文书
初中美术教学反思
2014/01/29 职场文书
工程专业应届生求职信
2014/02/19 职场文书
初中生评语大全
2014/04/24 职场文书
大学计划书范文800字
2014/08/14 职场文书
邀请书格式范文
2015/02/02 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书