ztree가 선택된 node_jquery를 얻을 때 가시 영역에 들어갈 수 없는 BUG를 해결하는 방법

zTree는 jQuery로 구현된 다기능 "트리 플러그인"입니다. 뛰어난 성능, 유연한 구성, 다양한 기능의 결합은 zTree의 가장 큰 장점입니다.

zTree 기능 편집

● zTree v3.0은 핵심코드를 기능별로 나누어 불필요한 코드를 로딩할 필요가 없습니다
● 지연 로딩 기술을 채택하여 수만 개의 노드를 쉽게 로드할 수 있으며 기본적으로 IE6에서도 즉시 종료가 가능합니다
● IE, FireFox, Chrome, Opera, Safari 및 기타 브라우저와 호환
● JSON 데이터 지원
● 노드 데이터의 정적 및 Ajax 비동기 로딩 지원
● 모든 스킨 변경/맞춤 아이콘 지원(CSS 기반)
● 매우 유연한 체크박스 또는 라디오 선택 기능 지원
● 여러 이벤트 응답 콜백 제공
● 유연한 편집(추가/삭제/수정/확인) 기능으로 노드를 마음대로 끌어서 놓을 수 있으며 여러 노드를 끌어서 놓을 수 있습니다
● 한 페이지에 여러 개의 Tree 인스턴스를 동시에 생성할 수 있습니다
● 유연한 기능을 구현하기 위한 간단한 매개변수 구성

zTree 편집의 장점

zTree의 작성자는 여가 시간을 활용하여 zTree 기능을 지속적으로 개선하고, 또한 적시에 사용자와 소통하고 다양한 질문에 적시에 응답하여 신규 사용자가 빠르게 익힐 수 있도록 합니다. 현재 점점 더 많은 사용자가 최근 출시된 QUI 프레임워크의 최신 버전을 포함하여 시스템의 원래 트리 플러그인을 대체하기 위해 zTree를 사용하고 있습니다.

관련 플러그인 버전:

jquery.ztree.exedit-3.4.js

jquery.ztree.all-3.4.js

jquery-1.8.0.js

 function onAsyncSuccess(event, treeId, treeNode, msg) {
     curAsyncCount--;
     if (curStatus == "expand") {
       expandNodes(treeNode.children);
     } else if (curStatus == "async") {
       asyncNodes(treeNode.children);
     } 
     if (curAsyncCount <= ) {
       curStatus = "";
       // 节点定位
       if(devicesSelect.selectNodeId){
         // 节点变成被选中状态
         var zTree = $.fn.zTree.getZTreeObj(zTreeId);
         zTree.cancelSelectedNode();
         $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
         $("#treeDiv").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-},);//是ms,也可以用slow代替
         devicesSelect.selectNodeId = "";
       }
     }
   } 
   function expandNodes(nodes) {
     if (!nodes) return;
     curStatus = "expand";
     var zTree = $.fn.zTree.getZTreeObj(zTreeId);
     for (var i=, l=nodes.length; i<l; i++) {
       if(ids.indexOf(nodes[i].id) != -){
         if (nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)) {
           if(nodes[i].typeName.indexOf("虚拟")=="-"){
             zTree.expandNode(nodes[i], true, false, false);
           } else if(nodes[i].type.indexOf(type)>"-"){
             zTree.expandNode(nodes[i], true, false, false);
           }
         } else {
           goAsync = true;
         }
       }
     }
     if(goAsync==true){
       var id_ = ids.substring(,ids.indexOf(","));
       var node = zTree.getNodeByParam("id",id_);
       goAsync = false;
       me.curStatus = "";
       me.type = "";
       me.selectNodeId = node.tId;
     }
   } 

포지셔닝 아이디어:

1. 노드 A를 찾고 싶다고 가정합니다. 노드 A의 고유 식별자는 objid입니다

2. objid를 기반으로 db에서 모든 우수한 objid를 가져와 함께 연결한 후 ids 변수에 저장합니다.

3. onAsyncSuccess 메서드에서 ExpandNodes를 호출합니다. 이 메서드에서는 [if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id)를 전달합니다. ) )] ID에 ID가 있는 노드를 필터링하고 확장합니다.

4. 일반적인 상황에서는 확장이 끝나면 objid를 기준으로 [var node = zTree.getNodeByParam("id",id_);]를 통해 노드 A 객체를 얻은 후 [zTree.selectNode를 통해 선택합니다. (노드);] 노드.

이 경우 대상 노드를 찾아 선택할 수 있지만, 해당 노드와 동일한 상위 노드를 가진 데이터가 많은 경우 노드 A가 표시 영역에 나타나지 않을 수 있습니다. 소스 코드를 검색해 보니 Ztree가 위치 지정을 위해 [$("#" node.tId).focus().blur();] 메서드를 사용하는 것으로 나타났습니다. 그러나 불행히도 BUG가 있습니다.

따라서 스크롤 막대를 사용하여 위치를 직접 제어하세요. 구현은 다음과 같습니다.

1. 위치 충돌을 방지하려면 [zTree.selectNode(node);]를 삭제하세요.

2. onAsyncSuccess 메소드에서 노드가 확장되는 시점을 결정하고 노드 A의 오프셋을 얻은 후 트리가 있는 DIV의 scrollTop 속성에 값을 할당합니다.

$("#treeDiv1").animate({scrollTop:$("#" devicesSelect.selectNodeId).offset().top-300},1000);//1000은 ms입니다. 대신 느리게 사용할 수도 있습니다.

참고: devicesSelect.selectNodeId는 treeDiv1 트리가 위치한 div의 id 속성을 통해 얻은 노드 A의 노드 tid입니다.

3. 이전에 선택한 노드 취소: zTree.cancelSelectedNode();

4. 선택한 상태 클래스를 노드 A에 추가합니다: $("#" devicesSelect.selectNodeId "_a").addClass("curSelectedNode");

저자는 가볍게 말했습니다. 두 번째 요점은 원래 [$("#treeDiv1").scrollTop($("#" devicesSelect.selectNodeId).offset().top-200);] 을 사용하고 싶었습니다. 효과적이긴 하지만 같은 레이어에 노드가 너무 많으면 여전히 가시 영역에 들어갈 수 없습니다. 이때 트리가 확장되지 않았기 때문일 것이라고 깊이 의심하여 ​​불량인 애니메이션을 사용했습니다. 이동하다.

작가의 마지막 말: 이 글에 오류가 있으면 지적해 주시면 감사하겠습니다. . . .

위 내용은 선택된 노드 획득 시 ztree가 가시 영역에 들어갈 수 없는 경우 발생하는 버그를 해결하는 방법에 대한 전체 설명입니다.