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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
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入门学习的几个不错的实例代码
2008/07/13 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
js文件Cookie存取值示例代码
2014/02/20 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
python django集成cas验证系统
2014/07/14 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python程序控制NAO机器人行走
2019/04/29 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
个性发展自我评价
2014/02/11 职场文书
物理研修随笔感言
2014/02/14 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
详解Vue router路由
2021/11/20 Vue.js
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL