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快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
brook javascript框架介绍
2011/10/10 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
cf战队收人广告词
2014/03/14 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
服务明星事迹材料
2014/12/29 职场文书
求职导师推荐信范文
2015/03/27 职场文书
仓库管理制度范本
2015/08/04 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js