ztree implémente un arbre couvrant dynamique à gauche et un exemple de partage de fonction de détails de contenu à droite

Cet article partage principalement avec vous l'implémentation par ztree des arbres générés dynamiquement à gauche et les détails du contenu à droite. zTree utilise le code principal de JQuery pour implémenter un ensemble de plug-ins Tree qui peuvent compléter les fonctions les plus courantes. compatible avec IE, FireFox, Chrome et d'autres navigateurs. Plusieurs instances d'arbre peuvent être générées simultanément sur une seule page. Prend en charge la génération statique unique et le chargement asynchrone Ajax. Prend en charge plusieurs réponses à des événements et des commentaires. , et la suppression. Prend en charge les modifications arbitraires de skin/icônes personnalisées (en s'appuyant sur CSS).

Prototype de page :

Exigences fonctionnelles : Cliquez sur le nœud enfant dans l'arborescence de gauche pour envoyer une requête en arrière-plan et afficher les informations demandées à droite Dans le formulaire,

Implémentation du code front-end :

Introduire le document 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"/>" />

Introduire le fichier 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>

Partie jsp : La partie HTML est très Simple, elle est équivalente à la partie p

<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>

js d'un arbre en fleurs :

Définissez le nœud de l'arbre

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

pour initialiser et déterminer s'il faut étendre le nœud :

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

Cliquez sur l'événement, lancez une demande en arrière-plan, demandez les informations à droite

// 单击事件，向后台发起请求
  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);
        }
      });
    }
  }

Supprimer l'événement :

// 删除节点事件
  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();
          }
        }
      });
    }
  }

Recommandations associées :

Exemples pour expliquer l'utilisation par jQuery du plug-in zTree pour implémenter la fonction glisser-déposer

Exemples pour expliquer l'utilisation du plug-in d'arborescence zTree jQuery

Exemple détaillé de jQuery utilisant ztree pour implémenter une table arborescente

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!