ztree实现左边动态生成树右边为内容详情功能


Posted in Javascript onNovember 03, 2017

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标(依靠css) 。

页面原型图:

ztree实现左边动态生成树右边为内容详情功能

功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面

前端代码实现:

引入css文档:

<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /css/global/ztree_custom.css"/>" />

引入js文件:

<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script>
<script type="text/javascript"  src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script>
<script src="<c:url value="/js/system/organ.js"/>"></script>

jsp 部分:HTML部分很简单,就是相当于一个盛放树的div

<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>

js 部分:

设置树节点

var setting = {
    check : {
      enable : false
    },
    view : {
      selectedMulti : false,
    // addHoverDom: addHoverDom,
    // removeHoverDom: removeHoverDom,
    },
    data : {
      key : {
        name : "name"
      },
      simpleData : {
        enable : true,
        idKey : "id",
        pIdKey : "pId"
      }
    },
    edit : {
      enable : true,
      removeTitle : "删除节点",
      showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,
      showRenameBtn : false
    },
    callback : {
      // onRightClick : onRightClick,
      // 单击事件
      onClick : zTreeOnClick,
      onNodeCreated : zTreeOnNodeCreated,
      beforeRemove : zTreeBeforeRemove,
      onRemove : zTreeOnRemove
    }
  };

初始化,判断是否展开节点:

var zTreeObj;
  function initTree() {
    $.get(basePath + "/system/organ/getOrganTreeList", function(data) {
      zTreeObj = $.fn.zTree.init($("#organTree"), setting,
          data.returnData.organTree);
      zTreeObj.expandAll(false);
    });
  }
// 给生成的节点添加class属性
// 控制节点是否显示删除图标
  function setRemoveBtn(treeId, treeNode) {
    return treeNode.pId != null;
  }
  // 给生成的节点添加class属性
  function zTreeOnNodeCreated(event, treeId, treeNode) {
    var str = treeNode.tId + "_span";
    $("#" + str).addClass(treeNode.type);
  }

单击事件,像后台发起请求,请求右侧的信息

// 单击事件,向后台发起请求
  function zTreeOnClick(event, treeId, treeNode) {
    if (treeNode.id == "1") {
      return;
    }
    $("#moreinform").show();
    $("#baseinform").hide();
    $(".po_phone_num_r").css("display", "none");
    $(" .po_email_r").css("display", "none");
    if (treeNode.type == "organ") {
      $("#organ").html("部门名称");
      $("#Partman").show();
      $("#Email").hide();
      $("#sorgan").html("上级部门");
      $("#partaddress").html("部门地址");
      $("#partman").html("部门负责人");
      $("#parttel").html("手机");
      if (treeNode.id == "1") {
        $("#po").hide();
      } else {
        $("#po").show();
      }
      $.ajax({
        url : basePath + "/system/organ/" + treeNode.id,
        type : "get",
        success : function(data) {
          var organ = data.returnData.organ;
          $("#organId").val(organ.organId);
          $("#sex").hide();
          $("#name").val(organ.organName);
          $("#diz").val(organ.address);
          $("#tel").val(organ.phone);
          $("#manage").val(organ.manager);
          $("#parentOrgan").val(organ.parentId);
        }
      });
    } else {
      $("#po").show();
      $("#organ").html("姓名");
      $("#sex").show();
      $("#Email").show();
      $("#Partman").hide();
      $("#sorgan").html("所属部门");
      $("#partaddress").html("职位");
      $("#parttel").html("手机");
      $.ajax({
        url : basePath + "/system/organ/getStaff/" + treeNode.id,
        type : "get",
        success : function(data) {
          var staff = data.returnData.staff;
          $("#organId").val(staff.id);
          $("#name").val(staff.name);
          $("#diz").val(staff.position);
          $("#tel").val(staff.tel);
          $("#profession").val(staff.sex)
          $("#Email02").val(staff.email);
          $("#parentOrgan").val(staff.organId);
        }
      });
    }
  }

删除事件:

ztree实现左边动态生成树右边为内容详情功能

// 删除节点事件
  function zTreeOnRemove(event, treeId, treeNode) {
    if (treeNode.type == "organ") {
      $.ajax({
        url : basePath + "/system/organ/" + treeNode.id,
        type : "DELETE",
        success : function(data) {
          $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框
          if (customGlobal.ajaxCallback(data)) {
            location.reload();
          }
        }
      });
    } else {
      $.ajax({
        url : basePath + "/system/organ/deleteStaff/" + treeNode.id,
        type : "DELETE",
        success : function(data) {
          $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框
          if (customGlobal.ajaxCallback(data)) {
            initTree();
          }
        }
      });
    }
  }

总结

以上所述是小编给大家介绍的ztree实现左边动态生成树右边为内容详情功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 #Javascript
微信小程序实现图片放大预览功能
Oct 22 #Javascript
极简主义法编写JavaScript类
Nov 02 #Javascript
You might like
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
新手入门常用代码集锦
2007/01/11 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python字符串的拼接方法总结
2019/11/18 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
小学毕业感言300字
2014/02/19 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年班干部工作总结
2014/11/25 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL