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

站长资源 2024/11/28 佚名

2 0 1

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

页面原型图：

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

前端代码实现：

引入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="/UploadFiles/2021-04-02/<c:url value=">

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" "htmlcode">

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);
        }
      });
    }
  }


删除事件：



// 删除节点事件
  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实现左边动态生成树右边为内容详情功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

ztree动态生成树

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

React-intl 实现多语言的示例代码

基于angular-utils-ui-breadcrumbs使用心得(分享)

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接