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

Question

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

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

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

jsTree open_all only showing last item in JSON array

javascript

jquery

json

jstree