jsTree open_all只顯示JSON數組中的最後一項

Question

我對jQuery和jsTree的工作比較陌生。在我的應用程序中，我調用了一個API，然後想要使用jsTree顯示生成的JSON。對於我的示例，我使用這個假的API調用http://jsonplaceholder.typicode.com/posts/?userId=1

但是，當頁面加載時，只有數組中的最後一項是「打開」，如果我點擊其他項目，那麼它只顯示最後一項的數據。這裏是一個精簡版：http://jsfiddle.net/7saL0t83/，並在這裏的是，我遇到

HTML現象截圖：

<div id="jstree"> 
<ul> 
    <li>[List]: 
     <ul> 
      <li id="userId" value="1"> 
       userId: 1 
      </li> 
      <li id="id" value="1"> 
       id: 1 
      </li> 
      <li id="title" value="&quot;sunt aut facere repellat provident occaecati excepturi optio reprehenderit&quot;"> 
       title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit 
      </li> 
      <li id="body" value="&quot;quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto&quot;"> 
       body: quia et suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto 
      </li> 
     </ul> 
    </li> 
    <li>[List]: 
     <ul> 
      <li id="userId" value="1"> 
       userId: 1 
      </li> 
      <li id="id" value="2"> 
       id: 2 
      </li> 
      <li id="title" value="&quot;qui est esse&quot;"> 
       title: qui est esse 
      </li> 
      <li id="body" value="&quot;est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla&quot;"> 
       body: est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla 
      </li> 
     </ul> 
    </li> 
</ul> 
</div> 

的Javascript：

$(function() { 
    $('#jstree').jstree({ 
     "core" : { 
      "animation":0, 
      "themes": { "icons" : false, "responsive": true } 
     }, 
     "plugins" :["checkbox","state"] 
    }) 
    .bind("ready.jstree", function (event, data) { 
     //open all nodes once the ready event is triggered 
     $(this).jstree("open_all"); 
    }); 
    $('#jstree').on("changed.jstree", function (e, data) { 
     console.log(data.selected); 
    }); 
}); 

如果我查看HTML源代碼所有的數據都在那裏，所以爲什麼它只打開數組中的最後一項？另外，當點擊其他數組項時，它爲什麼會顯示最後一個數據？

謝謝！

(my code on jsfiddle)

Answer 1

您有重複的ID - jstree不能正確解析結構。 jstree不允許在一棵樹內複製ID（請記住，即使在文檔級別，您也不應該複製ID）。

要麼刪除每個LI節點上的ID屬性，要麼確保它們在樹中是唯一的。