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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
解决elementui表格操作列自适应列宽
Dec 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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php实现的通用图片处理类
2015/03/24 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
Javascript typeof 用法
2008/12/28 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python中return如何写
2020/06/18 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python实现定时发送邮件
2020/12/23 Python
Python如何telnet到网络设备
2021/02/18 Python
请说出几个常用的异常类
2013/01/08 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
代办委托书怎么写
2014/08/01 职场文书
单位工作证明范文
2014/09/14 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
打架检讨书
2015/01/27 职场文书
神州牡丹园的导游词
2019/11/20 职场文书