jsTree open_all仅显示JSON数组中的最后一项

Question

我对使用jQuery和jsTree相对较新。在我的应用程序中，我调用API，然后想要使用jsTree显示生成的JSON。对于我的示例，我使用了这个假API调用http://jsonplaceholder.typicode.com/posts/?userId=1

但是，当页面加载时，只有数组中的最后一项是＆＃34;打开＆＃34;如果我点击其他项目，它只显示最后一项的数据。这是一个精简版：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属性，或确保它们在树中是唯一的。