이 글은 주로 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
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 EasyUI가 zTree 트리 구조와 결합되어 웹 페이지 생성
예시 설명 zTree 플러그인을 사용하는 jQuery 드래그 앤 드롭 기능 구현
위 내용은 jQuery zTree 트리 플러그인 동적 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!