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

Question

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

我想知道：在 HTML 中编写将由 jsTree 转换为树的数据的正确方法是什么？

jsTree 文档建议了这一点：

<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>

但它没有指定将idjsTree 用来引用数据的属性放在哪里。

此外，它似乎不太好用。我见过有人用 a<div>和 a<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>

请注意iddiv 标签中的 。这是正确的方法吗？对我来说，<a href="#">仅使用标签来编写节点的文本似乎不太舒服......如果我使用 a<span>我会失去项目图标......

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

Answer 1

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

<div id="mytree">
    <ul>
        <li>
            <a href="#">Node 1</a>
            <ul>
                <li>
                    <a href="#">Node 1.1</a>
                </li>
                <li>
                    <a href="#">Node 1.2</a>
                    <ul>
                        <li>
                            <a href="#">Node 1.2.1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Node 2</a>
        </li>
    </ul>
</div>

即每个节点都具有 jsTree 文档推荐的结构：

<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 (recursively apply the same pattern)-->
    </ul>
</li>

并且所有的结构都必须用（什么文档没有说）包裹：

<div id="mytree">
    <ul>
        <!-- all the tree here -->
    </ul>
</div>