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 树控件 比较好用
Jun 11 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Node调用Java的示例代码
Sep 20 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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中鲜为人知的10个函数
2014/02/28 PHP
php实现水仙花数示例分享
2014/04/03 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python文件和目录操作函数小结
2014/07/11 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python字符串格式化输出代码实例
2019/11/22 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
娱乐地球:Entertainment Earth
2020/01/08 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
怒海潜将观后感
2015/06/11 职场文书
小学英语教学随笔
2015/08/14 职场文书