처음에는 노드를 선택하기 위해 jQuery 플러그인 jsTree를 가져올 수 없습니다.

Question

jsTree가 JSON 페이지에서 데이터를로드하고 올바르게 표시됩니다. 기본적으로 루트 노드를 선택하려고하는데 작동하도록 설정할 수 없습니다. 여기

내 jQuery를하다 :

$(function() { 
    $("#demo1").jstree({ 
     "plugins" : [ "themes","json_data","ui" ], 
     "json_data" : { 
      "ajax" : { 
       "url" : "categorytreejson.asp" 
      }, 
      "ui" : { 
       "initially_select" : [ "root" ] 
      }, 
     } 
    }); 
}); 

여기

---

JSONLint를 사용하여 유효성을 검사 categorytreejson.asp에서 내 JSON입니다 :

{ 
    "data": "root", 
    "attr": { 
    "id": "root" 
    }, 
    "children": [ 
    { 
     "data": "Photography", 
     "attr": { 
     "id": "Photography" 
     }, 
     "children": [ 
     { 
      "data": "Lenses", 
      "attr": { 
      "id": "Lenses" 
      }, 
      "children": [ 
      { 
       "data": "Telephoto", 
       "attr": { 
       "id": "Telephoto" 
       } 
      }, 
      { 
       "data": "Macro", 
       "attr": { 
       "id": "Macro" 
       } 
      }, 
      { 
       "data": "Other", 
       "attr": { 
       "id": "Other" 
       } 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

여기

---

는 결과 HTML입니다 :

가

<li class="jstree-last jstree-open" id="root"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>root</a> 
    <ul style=""> 
     <li class="jstree-closed" id="Photography"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>Photography</a> 
      <ul> 
       <li class="jstree-last jstree-closed" id="Lenses"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Lenses</a> 
        <ul> 
         <li class="jstree-leaf" id="Telephoto"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Telephoto</a> 
         </li> 
         <li class="jstree-leaf" id="Macro"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Macro</a> 
         </li> 
         <li class="jstree-last jstree-leaf" id="Other"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Other</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
</li> 
</ul> 
</li> 
</ul> 
</li> 

---

그리고 불을 지르고 볼 결과 데이터 개체 : 결과가 비어하지만 난 이유를 모르겠어요 때문에

args: [] 
inst: Object { data={...}, get_settings=function(), _get_settings=function(), more...} 
rlbk: false 
rslt: undefined 

나는 문제의 대부분을 믿고있어 무엇입니까?

Answer 1

내부에 UI 플러그 인 구성 을 넣고 있습니다. json_data 플러그인 구성입니다.
당신은 그것을 꺼내야하고, 그것이 작동합니다.

"json_data" : { 
     "ajax" : { 
      "url" : "categorytreejson.asp" 
     } 
    }, 
    "ui" : { 
     "initially_select" : [ "root" ] 
    } 

Answer 2

@Zheileman 대답은 나보다 훨씬 낫다하지만 난이 해결하는 또 다른 방법 공유하는 재미있을 것이라고 생각 : 문서에

을 준비 나는 jstree 이벤트의 사용으로 이런 짓을 :

나무 loaded- 때 jstree의 bind 함수에서

var i = 0; 
      $.each($("#container").jstree()._model.data, function (value, index) { 
       if (i == 1) { 
        $("#container").jstree(true).select_node(value, false, false); 
        $("#container").jstree(true).open_node(value); 
        return false; 
       } 
       i++; 
      }) 

Answer 3

마지막 노드를 선택하기 위해 다음 줄을 추가

$('#tree_id').jstree('select_node', 'ul > li:last'); 

는

$('#tree_id').jstree('select_node', 'ul > li:first'); 

예 -

$('#tree_id').bind("loaded.jstree", function(e, data) { 
    $(this).jstree("open_all"); 
    $('#tree_id').jstree('select_node', 'ul > li:last'); 
})