jsTree로 지연로드

Question

확장되었을 때 jtree의 노드를 동적으로로드하려고합니다. 내가 찾은 작은 문서는 this page 끝에 있습니다.

this one과 같은 루프를 사용하여 하나씩 노드를 만드는 몇 가지 솔루션을 찾았습니다. 나는 그것을 시도하지는 않았지만, 문서 페이지를보고 나는 jstree가 노드를 통해 사이클링을 처리해야한다고 생각한다.

plugins: ["json_data"]을 사용하는 많은 솔루션을 찾았지만 plugins documentation page에는 플러그인이 전혀 언급되어 있지 않습니다. 더 이상 필요하지 않은 플러그인입니까?

$(function() { 
    var pn = $('#project_number').val(); 
    $('#tree').jstree({ 
     'core' : { 
      'data' : { 
       'url' : function(node) { 
        return '/doc/test2'; 
       }, 
       'data' : function(node) { 
        return { 
         'part' : node.id === '#' ? pn : node.id 
        }; 
       } 
      } 
     } 
    }); 
}); 

같은 JSON 텍스트가 함께 작동 :이 같은 문서 페이지에 코드를 수정

$.ajax({ 
    var pn = $('#project_number').val(); 
    url : "bomtree?part=" + pn, 
    success : function(tree_content) { 
     var data = $.parseJSON(tree_content); 
     var config = { 
      'core' : { 
       'data' : data 
      } 
     }; 
     $('#bom_tree').jstree(config); 
    } 
}); 

:

내 현재 구현 한 번에 전체 트리를로드하기 위해이 코드를 사용 첫 번째 코드는 두 번째 코드와 함께 사용됩니다. 설명서에 The format remains the same as the above이 나와 있으므로 변경하지 않았습니다.

I 또한, 본 실시 예에서와 동일한 데이터를 리턴하려고 :

[ 
     { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, 
     { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, 
     { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, 
     { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, 
] 

하지만 결과는 같다 :

Sizzle.error = function(msg) { 
    throw new Error("Syntax error, unrecognized expression: " + msg); 
}; 

: JQuery와 다음 행에 Sizzle.error을 던진다 여기서 msg의 내용은 서버가 반환 한 json 데이터입니다.

무엇이 잘못 되었나요?

Answer 1

설명서/예제가 매우 까다 롭습니다. 또한 혼란의 근원이 주요 업그레이드에서 비롯된 것이라고 덧붙입니다. old version은 새 버전과 거의 공통점이 없으며 불행히도 대부분의 예제는 이전 버전에 대해 작성되었습니다.

좋은 소식은 바로 느슨한로드가 지원된다는 것입니다. 핵심은 각 노드가 확장 될 때 data: 구성으로 호출된다는 것입니다. 하지만 URL 함수가 작동하려면 주어진 노드에 대해 다른 URL을 반환해야합니다. 아래 코드에서 노드가 루트 (#)이면 하나의 URL을 반환하고 그렇지 않으면 조건을 기록하십시오.

$('#TreeDiv') 
    .jstree({ 
    core: { 
     data: { 
     url: function (node) { 
      return node.id === '#' ? '/UserAccount/AccountGroupPermissions' 
           : '/UserAccount/AccountPermissions/' + node.id; 
     }, 
     type: 'POST' 
     } 
    }, 
    plugins : ["checkbox"] 
}); 

Answer 2

"진정한 논리 값으로 AJAX 세트 어린이를 사용하고 jsTree가 폐쇄로 노드를 렌더링하고 사용자가 열립니다 해당 노드에 대한 추가 요청을 할 때.", 이것은 jstree 문서이며 귀하의 요구 사항을 충족시킬 수 있습니다.

Answer 3

Nathans는 (매우 최소한의) 예제를 사용하여 대답을 확장합니다. 지연로드가있는 데모 트리.

JS :

$('#the_tree').jstree({ 
    'core' : { 
     'data' : { 
      'url' : "tree/ajax.php", 
       'data' : function (node) { 
        return { 'id' : node.id }; 
       } 
     } 
    }, 

}); 

PHP :

header('Content-Type: application/json'); 

if ($_GET["id"] === "#") { 
    $data = array(
      array("id" => "ajson1", "parent" => "#", "text" => "Simple root node" ), 
      array("id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true), 

    ); 
} 

else if ($_GET["id"] === "ajson2") { 
    $data = array(
     array("id" => "ajson3", "parent" => "ajson2", "text" => "Child 1"), 
     array("id" => "ajson4", "parent" => "ajson2", "text" => "Child 2") 
    ); 
} 

echo json_encode($data); 

만 "children" : true이 노드는, 어린이 열었을 때, 다른 노드가 잎으로 처리됩니다에 대한 요청을 생성합니다.

Answer 4

지연로드를 만들려면 자식 속성 필드가있는 트리 노드가있는 JSON 객체를 반환하는 백엔드가 필요합니다. Children 속성은 자식 요소 또는 부울 true (배열 또는 부울)를 포함해야합니다. 백엔드에 강력하게 형식화 된 언어를 사용하면 추한 것일 수 있으므로 프론트 엔드에서 처리하는 것이 가장 좋습니다. AJAX 성공 콜백의 예 :

$('#tree').jstree({ 
    'core' : { 
     'data' : { 
      'url' : function(node) { 
       return '/doc/test2'; 
      }, 
      'data' : function(node) { 
       return { 
        'part' : node.id === '#' ? pn : node.id 
       }; 
      }, 
      'success' : function(nodes) { 

       var validateChildrenArray = function(node) { 

        if (!node.children || node.children.length === 0) { 
         node.children = true; 
        } 
        else { 
         for (var i = 0; i < node.children.length; i++) { 
          validateChildrenArray(node.children[i]); 
         } 
        } 
       }; 

       for (var i = 0; i < nodes.length; i++) { 
        validateChildrenArray(nodes[i]); 
       } 
      } 
     } 
    } 
}); 

이렇게하면 트리를 느리게로드 할 수 있습니다.

Answer 5

"select_node.jstree"이벤트와 "create_node"메소드를 결합하여 사용자 정의 지연 적로드를 만들었습니다. 이벤트 핸들러는 모든 노드를 선택하면 하위 노드가 있는지 확인하고 선택된 노드에 노드별로 노드의 응답을 추가합니다. 제 서버의 응답이 유사하지 않거나 jstree의 요구 사항이 아니기 때문에이 전략을 통해 많은 시간과 노력을 절약 할 수있었습니다. 누군가가 도움이되기를 바랍니다.