jquery - リーフノードのjstreeの異なるアイコン

Question

私はjquery jstreeコンポーネントを使用していますが、問題は、組み込みのテーマが子を持つノードと理想的ではないリーフノードに同じアイコンを使用していることです。

css を変更して、リーフ ノードのみのカスタム アイコンを指定するにはどうすればよいですか?

乾杯。

Answer 1

タイププラグインを見てみたい

The types enables node types - each node can have a type, and you can define
rules on how that type should behave - maximum children count, maximum depth,
valid children types, selectable or not, etc.

Answer 2

私は同じことが必要で、プロジェクトのバグトラッカーを読んだ後、これを見つけました:

https://github.com/vakata/jstree/issues/1125

jstree に渡すデータにアイコンを追加します ("icon" : "jstree-file"別のアイコンが必要なノードごとに使用できます)。

なぜこれがデフォルトではないのか、私を打ちのめします...しかし、これはあなたが望んでいたことをするはずだと思います。

Answer 3

css を使用して、リーフ ノードのカスタム アイコンを指定できます。

例 : html: The structure of the tree in :

<li class="jstree-open">
<ins class="jstree-icon"> </ins>
<a>root</a> 
<ul>
    <li class='jstree-leaf' id='1'>
        <ins class="jstree-icon"> </ins>
        <a class='books' href='#'><ins class="jstree-icon"> </ins>books</a>
    </li>
    <li class='jstree-leaf' id='2'>
        <ins class="jstree-icon"> </ins>
        <a class='musics' href='#'><ins class="jstree-icon"> </ins>musics</a>
    </li>  
    <li class='jstree-leaf' id='3'>
        <ins class="jstree-icon"> </ins>
        <a class='videos' href='#'><ins class="jstree-icon"> </ins>videos</a>
    </li> 
</ul> 

CSS:

li.jstree-open > ul > li.jstree-leaf > a.books > ins.jstree-icon { background: url("XXX1.png") 0px 0px no-repeat !important;}

li.jstree-closed > ul > li.jstree-leaf > a.books > ins.jstree-icon { background: url("XXX2.png") 0px 0px no-repeat !important;}

多分これはあなたを助けることができます。