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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
js实现内置计时器
Dec 16 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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语法(1)
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python变量和字符串详解
2017/04/29 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
个人贷款承诺书
2014/03/28 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
个人委托书格式
2014/04/04 职场文书
消防安全标语
2014/06/07 职场文书
党员检讨书范文
2014/12/27 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python