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的开发人员工具中的Sources选项卡时，它甚至似乎都没有加载图像。

谁能看到我出错的地方？

更新

我发现图标实际上已加载，但它们被设置为隐藏在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>

Answer 2

我最终通过更新CSS解决了这个问题。 styles.css文件的部分标记如下：

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

通过评论CSS的整个部分，图像开始按预期显示。

我受限于jsTree的旧版本，但至少我不需要支持IE6！

jsTree图标没有出现

2 个答案: