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 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
js实现星星海特效的示例
Sep 28 Javascript
基于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输出Excel文件类
2010/02/08 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP连接access数据库
2015/03/27 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
npm的lock机制解析
2019/06/20 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
小程序自动化测试的示例代码
2020/08/11 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python接口测试文件上传实例解析
2020/05/22 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
幼儿园美术教学反思
2014/01/31 职场文书
程序员求职信
2014/04/16 职场文书
建筑工地宣传标语
2014/06/18 职场文书
就业协议书样本
2014/08/20 职场文书
检讨书范文
2015/01/27 职场文书
2015年国庆节寄语
2015/08/17 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
检讨书之工作不认真
2019/08/14 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python