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

Question

我是 jsTree 的新手，我想从 HTML 页面内的

和
• 列表开始创建一棵树。这使用 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>

但它没有指定将 id< 放在哪里/code> jsTree 用于引用数据的属性。

而且它似乎效果不太好。我见过有人将该代码嵌入

和

标签。例如：

<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。 这是正确的方法吗？ 对我来说，仅使用 标签来编写节点的文本似乎不太舒服......如果我使用 < /code> 我失去了项目图标...

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

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>