jsTree图标未出现

Question

I have a jsTree. The tree is rendering correctly and I am getting a whole bunch of nodes that look like this:

<li 
    id="aaaa" 
    data-level="2" 
    data-wiid="bbbb" 
    data-itemid="aaaa" 
    data-witype="Tasks" 
    class="jstree-leaf">

        <ins class="jstree-icon">&nbsp;</ins>
        <a href="#" class="">
            <ins class="jstree-icon">&nbsp;</ins>
            Some Node Text
        </a>
</li>

I'm trying to set the icons of the nodes:

$('#jsTreeDiv').jstree({ 
    'json_data'     : {'data': preloadedData}, 
    'plugins'       : ['themes', 'json_data', 'ui', 'contextmenu', 'types'],
    'types'         : {
                        'type_attr' : 'data-witype',
                        'types'     : 
                        {
                            'Tasks' : {'icon': { 'image': '/imgs/tasks.png' }
                        }
                      });

This doesn't seem to be working. Icons aren't being set for my jsTree. When I check the Sources tab in chrome's developer tools it doesn't even appear to be loading the images.

Can anyone see where I'm going wrong?

---

Update

I've found that the icons are actually being loaded, but they're being set to hidden in css

.jstree-default a ins.jstree-icon {
    display: none;
}

If I toggle this style in the developer tools I get the icons appearing. I must be missing a setting or something.

Anyone have any ideas?

---

Update

I'm limited to using jsTree 1.0-rc3

Answer 1

I believe you are using the old version of jsTree. I recommend getting the latest version and adapting your code to it's new syntax. I managed to get it working very quickly by following it's documentation.

Here's the working example: http://jsfiddle.net/bortao/SJgLJ/

You need to change the type defintion:

JS

'types': {
    'Tasks': {
        'icon': 'iconfile.png'
    }
}

HTML

<li data-jstree='{"type":"Tasks"}'> </li>

Answer 2

I eventually solved this by updating the CSS. The styles.css file has a section marked like this:

/* IE6 BEGIN */
.jstree-default li, 
.jstree-default ins,
#vakata-dragged.jstree-default .jstree-invalid, 
#vakata-dragged.jstree-default .jstree-ok, 
#jstree-marker.jstree-default { _background-image:url("d.gif"); }
.jstree-default .jstree-open ins { _background-position:-72px 0; }
.jstree-default .jstree-closed ins { _background-position:-54px 0; }
.jstree-default .jstree-leaf ins { _background-position:-36px 0; }
.jstree-default a ins.jstree-icon { _background-position:-56px -19px; }
#vakata-contextmenu.jstree-default-context ins { _display:none; }
#vakata-contextmenu.jstree-default-context li { _zoom:1; }
.jstree-default .jstree-undetermined a .jstree-checkbox { _background-position:-20px -19px; }
.jstree-default .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
.jstree-default .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
/* IE6 END */

By commenting out this entire section of CSS, the images started appearing as expected.

I am constrained to an old version of jsTree, but at least I don't have to support IE6!