집 >웹 프론트엔드 >JS 튜토리얼 >jQuery zTree 트리 플러그인 동적 로딩

jQuery zTree 트리 플러그인 동적 로딩

小云云원래의: 2018-01-12 09:53:191406검색

이 글은 주로 jQuery zTree 트리 플러그인의 동적 로딩 효과에 대한 예제 코드를 소개합니다. 필요한 친구들이 참고하면 zTree 기능을 더 잘 이해할 수 있기를 바랍니다.

요구 사항:

프로젝트의 계보도 데이터 양이 매우 많기 때문에 일반적인 로딩 방법은 페이지 로딩 시 zTree.init 메소드를 통해 데이터를 로딩하고, 한 번. 프로젝트에서는 계보 레벨이 수만 개로 매우 넓고 깊기 때문에 한 번 로드하면 전혀 로드할 수 없습니다. 따라서 데이터 로딩을 용이하게 하고 경험을 향상시키기 위해서는 동적 로딩(증분 로딩) 방식을 최적화하는 것이 필요합니다.

회로 중단 해결:

이 작업은 쉽게 처리할 수 있어야 합니다. 상위 노드 클릭 이벤트를 찾은 다음 데이터를 로드하고 노드를 연결하기만 하면 됩니다. 시간은 촉박하고 업무는 무거워서 연구할 시간이 전혀 없었습니다. "zTree 동적 로딩"만 눌러서 검색할 수 있었는데 결과가 나왔고 제목은 맞으나 내부 코드에서는 노드 추가에 대한 내용을 찾을 수 없었습니다... 한편으로는 요청에 의해 메시지가 표시되었습니다. , 그러나 반면에 비슷한 것을 찾을 수 없었습니다. 말문이 막히네요... 네, 공식 홈페이지가 없어서 API 함수를 다 찾아보다가 드디어 addNodes라는 함수를 발견했습니다. 행복!

제어 코드

<p class="UserTree">
  <ul id="treeDemo" class="ztree"></ul>
</p>

스크립트 코드(이벤트 클릭 시 노드 확장 및 동적 로딩 구현):

<script>
  var zNodes;
  var zTree;
  $(function () {
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      async: false,
      success: function (data) {
        zNodes = data;
      },
      error: function (data) {
        alert("error");
      }
    });
    zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
    zTree.expandAll(false);
  })
  var setting = {
    view: {
      nameIsHTML: true
    },
    data: {
      simpleData: {
        enable: true
      },
      keep: {
        parent: true
      }
    },
    open: false,
    callback: {
      onClick: nodeClick,
      onExpand: function (event, treeId, treeNode) {
        addSubNode(treeNode);
      }
    }
  };
  function showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
  };
  function searchM() {
    var username = $("#txtName").val()
  }
  function nodeClick(event, treeId, treeNode, clickFlag) {
    addSubNode(treeNode);
  }
  function addSubNode(treeNode) {
    if (!treeNode.isParent) return;
    var s = treeNode.children;
    if (s != undefined)
      return;
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      data: { userId: treeNode.id },
      async: true,
      success: function (data) {
        zTree.addNodes(treeNode, data);
      },
      error: function (data) {
        alert("error");
      }
    });
  }
</script>

백엔드 요청:

　데이터 소스는 요청 경로 "/User/NextLeve?userId=xxx"이며, 다음 구조를 가진 목록의 json 데이터(즉, List 유형의 .ToJson() 데이터). userId는 비어 있을 때 기본적으로 현재 로그인된 사용자를 가져옵니다.

public class UserNode
{
  public long id { get; set; }
  public long pId { get; set; }
  public string name { get; set; }
  public bool open { get; set; }
  public bool isParent { get; set; }
  public string icon { get; set; }
}

부모 노드를 확장할 때 부모 노드를 클릭/자식 노드를 동적으로 로드하는 효과가 구현됩니다.

jQuery zTree 트리 플러그인 동적 로딩

관련 기사