CODEWITHSUNDEEP
jqueryjstree
Nick
Nick

Reputation: 729

jstree different icon for leaf nodes

I'm using the jquery jstree component, but the problem is the inbuilt themes use the same icon for a node with children and a leaf node which isn't ideal.

How would i go about modifying the css to specify a custom icon for leaf nodes only?

Cheers.

Upvotes: 5

Views: 9652

Answers (3)

wvxvw
wvxvw

Reputation: 9468

I needed the same thing, and after reading the project's bug-tracker, I found this:

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

Add the icons to the data you are passing to jstree (you could use "icon" : "jstree-file" for each node you need to have a different icon).

Why this isn't the default, beats me... but, I think this should do what you wanted.

Upvotes: 2

Crazy Crab
Crazy Crab

Reputation: 702

you can use the css to specify a custom icon for leaf nodes.

For example, 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;}

Maybe this can help you.

Upvotes: 1

Radek
Radek

Reputation: 11091

You want to have a look at types plugin

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.

Upvotes: 5

Related Questions