zTree를 사용한 비동기 로딩(자세한 튜토리얼)
- 亚连원래의
- 2018-06-23 15:39:213459검색
zTree는 jQuery로 구현된 다기능 "트리 플러그인"입니다. 이번 글을 통해 jQuery zTree의 비동기 로딩 시 자식 노드를 추가하는 중복 문제에 대해 공유하겠습니다. 필요한 친구들은 참고하시면 됩니다
zTree 소개
zTree는 다기능 "트리 플러그"입니다. -in"은 jQuery로 구현됩니다. 뛰어난 성능, 유연한 구성, 다양한 기능의 결합은 zTree의 가장 큰 장점입니다.
zTree는 오픈 소스이자 무료 소프트웨어(MIT 라이센스)입니다. zTree에 관심이 있거나 zTree의 지속적인 개발에 자금을 지원하고 싶다면 기부할 수 있습니다.
zTree v3.0은 핵심 코드를 기능별로 나누어 불필요한 코드를 로드할 필요가 없습니다.
지연 로딩 기술을 채택하여 수만 개의 노드를 쉽게 로드할 수 있으며 기본적으로 IE6에서도 즉시 판매
IE, FireFox, Chrome, Opera, Safari 및 기타 브라우저와 호환
JSON 데이터 지원
노드 데이터의 정적 및 Ajax 비동기 로딩 지원
모든 것을 지원합니다. 스킨 변경/사용자 정의 아이콘(CSS에 따라 다름)
매우 유연한 체크박스 또는 라디오 선택 기능 지원
다양한 이벤트 응답 콜백 제공
유연한 편집(추가/삭제/수정/확인) 기능, 노드를 마음대로 드래그 앤 드롭할 수 있으며 여러 노드를 드래그할 수 있습니다
한 페이지에서 여러 트리 인스턴스를 동시에 생성할 수 있습니다
간단한 매개변수 구성으로 유연하고 변경 가능한 기능 구현
원본 질문
//添加结点, 产品和版本
function addNode(event) {
rMenu.css({ "visibility": "hidden" });
var treeNode = zTree.getSelectedNodes()[0];
var pid;
var nodeName;
var treelevel;
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
//添加产品结点
pid = 0;
treeNode = null;
treelevel = 1;
} else if (treeNode) {
//添加版本结点
pid = treeNode.id;
treelevel = 2;
}
$.post(
"AddNode.action",
{ type: treelevel, id: pid },
function(nodeIdAndName) {
var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName);
if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
zTree.expandNode(treeNode, true);
}
treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
});
}원래 직접 자식 노드를 추가할 때 부모 노드가 확장되지 않으면 두 개의 동일한 자식 노드가 추가됩니다(처음). 부모 노드가 확장되었는지 판단했는데, 두 개의 동일한 하위 노드를 처음으로 추가할 때 이 문제를 해결하는 방법은 무엇입니까?
방법 1
if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
zTree.expandNode(treeNode, true);
}
treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });를
if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0)
{
treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
}
else if(treeNode.open)
{
if(treeNode.isParent)
{
zTree.reAsyncChildNodes(treeNode, "refresh");
}
else
{
treeNode.isParent=true;
zTree.reAsyncChildNodes(treeNode, "refresh");
}
}
else
{
zTree.expandNode(treeNode, true);
treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
}로 변경합니다. 문제는 해결될 수 있지만 최적화 방법이 있나요? 변경하고 나니 코드 카테고리가 너무 많아진 느낌이네요
가장 좋은 방법
그렇게 번거로울 필요는 없을 것 같죠? 이틀 전에도 비슷한 질문에 답했습니다.
1. 하위 노드를 추가하기 위해 클릭한 후 ajax를 직접 백그라운드로 보내 데이터를 저장하고 성공 이벤트를 캡처합니다.
2 ajax가 성공하면 treeNode.zAsync 속성을 사용하여 상위 노드인지 확인할 수 있습니다. false인 경우 reAsyncChildNodes를 직접 새로 고치고, true인 경우 addN을 사용하세요...
if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync)
treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
else
zTree.reAsyncChildNodes(treeNode, "refresh");위 내용은 나중에 모두에게 도움이 되기를 바랍니다.
관련 기사:
노드의 Vue 프로젝트에서 프런트엔드와 백엔드 분리를 달성하는 방법
JS에서 스택을 표현하기 위해 두 개의 대기열을 구현하는 방법
위 내용은 zTree를 사용한 비동기 로딩(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!