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操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
实例浅析js的this
Dec 11 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
解析vue、angular深度作用选择器
Sep 11 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 strrpos()与strripos()函数
2013/08/31 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
深入理解Python3中的http.client模块
2017/03/29 Python
使用python存储网页上的图片实例
2018/05/22 Python
Django model update的多种用法介绍
2020/03/28 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python绘制分布折线图的示例
2020/09/24 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
图书室标语
2014/06/21 职场文书
财务工作检讨书
2014/10/29 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
四大名著读书笔记
2015/06/25 职场文书
春节慰问简报
2015/07/21 职场文书
小学同学聚会感言
2015/07/30 职场文书
Python学习之os包使用教程详解
2022/03/21 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL