如何使用jsTree构建要显示为树的HTML数据

Question

我是jsTree的新手，我想从HTML页面内的<ul>和<li>列表开始创建树。使用html_data插件（希望这是正确的方法）。

我想知道：这是正确的方法用HTML编写将被jsTree变成树的数据？

[jsTree documentation提示这一点：

<li>
    <a href="some_value_here">Node title</a>
    <!-- UL node only needed for children - omit if there are no children -->
    <ul>
        <!-- Children LI nodes here -->
    </ul>
</li>

但是它没有指定jsTree用来引用数据的id属性的位置。

此外，它似乎还不能很好地工作。我见过有人用<div>和<ul>标记嵌入该代码。例如：

<div id="categories">
    <ul>
        <li><a href="#">Category 1</a>
            <ul>
                <li><a href="#">SubCategory 1</a></li>
                <li><a href="#">SubCategory 2</a></li>
            </ul>
        </li>
        <li><a href="#">Category 2</a></li>
    </ul>
</div>

注意div标签中的id。这是正确的方法吗？对我来说，似乎只使用<a href="#">标签只写一个节点的文本不太舒服...如果我使用<span>我会松开项目图标...

希望有人比我的头脑更清晰。

Answer 1

这似乎是jsTree用来绘制树的模式：