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

2019-11-19 15:00:09

字体：大中小

来源：转载

供稿：网友

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

删除事件：

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

上一篇：React-intl 实现多语言的示例代码

下一篇：基于angular-utils-ui-breadcrumbs使用心得(分享)