javascript - jsTree 图标未出现

Question

我有一个jsTree。树正确渲染，我得到了一大堆看起来像这样的节点:

<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>

我正在尝试设置节点的图标:

$('#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' }
                        }
                      });

这似乎不起作用。没有为我的 jsTree 设置图标。当我检查 Chrome 开发人员工具中的“源”选项卡时，它甚至似乎没有加载图像。

有人能看出我哪里出错了吗？

<小时/>

更新

我发现图标实际上正在加载，但它们被设置为隐藏在 css 中

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

如果我在开发人员工具中切换此样式，则会出现图标。我一定是缺少某个设置或其他东西。

大家有什么想法吗？

<小时/>

更新

我仅限于使用 jsTree 1.0-rc3

Answer 1

我相信您使用的是旧版本的jsTree。我建议获取 latest version并使您的代码适应新的语法。通过遵循它的文档，我设法让它快速运行。

这是工作示例:http://jsfiddle.net/bortao/SJgLJ/

您需要更改类型定义:

JS

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

HTML

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