Không thể tải plugin jQuery jsTree về bước đầu để chọn một nút

Question

Tôi có jsTree tải dữ liệu từ trang JSON và nó hiển thị chính xác. Tôi đang cố gắng chọn nút gốc theo mặc định nhưng tôi không thể làm cho nó hoạt động.

Đây là jQuery tôi:

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

---

Đây là JSON của tôi từ categorytreejson.asp mà xác nhận sử dụng JSONLint:

{ 
    "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" 
       } 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

---

Dưới đây là kết quả 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> 

---

Và kết quả là các đối tượng dữ liệu xem bởi firebug:

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

Tôi giả định hầu hết các vấn đề là bởi vì kết quả là rỗng nhưng tôi không chắc chắn lý do tại sao?

Answer 1

Bạn đang đặt cấu hình plugin giao diện người dùng vào bên trong cấu hình plugin json_data.
Bạn cần gỡ nó ra và nó sẽ hoạt động.

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

Answer 2

câu trả lời @Zheileman là tốt hơn nhiều so với tôi nhưng tôi nghĩ rằng nó sẽ là thú vị để chia sẻ một cách khác để giải quyết việc này:

trên tài liệu đã sẵn sàng, tôi đã làm điều này với việc sử dụng các sự kiện jstree:

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

trong function bind của jstree thêm dòng sau đây để chọn nút cuối cùng khi cây là loaded-

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

Để chọn nút đầu tiên luôn, use-

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

Example-

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