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

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实现左边动态生成树右边为内容详情功能，希望对大家有所帮助