1

私は jsTree を初めて使用し、HTML ページ内のリスト<ul>から始まるツリーを作成したいと考えています。<li>これはhtml_dataプラグインを使用しています（正しい方法であることを願っています）。

私は疑問に思っています: jsTree によってツリーに変換されるデータを HTML で記述する正しい方法はどれですか?

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ただし、jsTree がデータを参照するために使用する属性をどこに置くかは指定されていません。

さらに、あまりうまく機能していないようです。<div>そのコードを aおよび 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="#">、ノードのテキストを書くためだけにタグを使用するのはあまり快適ではないようです...そして、私<span>がアイテムアイコンを失う...

誰かが私よりも頭が冴えていることを願っています。

4

1 に答える 1

5

これは、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>
于 2011-01-14T07:56:18.153 に答える