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 가 왼쪽 동적 생 성 트 리 오른쪽 을 내용 으로 하 는 상세 한 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!