如何更改jstree中的图标？

Question

我有以下代码:

$('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
            getFileById(data.args[0].hash.replace('#', ''));
        }).jstree({
            'plugins' : ['html_data','themes','ui','types'],
            'ui' : {
                'select_limit' : 1
            },
            'core' : {
                'animation' : 0
            },
            'types': {
                'default' : {
                    'icon' : {
                        'image' : '/admin/views/images/file.png'
                    }
                }
            }
        });

我有一个基本的无序列表,我希望显示为文件列表.我正在尝试使用"类型"来更改图标,但我不能为我的生活找出如何做到这一点.我检查了他们的文档链接,即使使用几乎相同的代码似乎也没有发生.

根据我对上面代码的理解,我的树的默认类型应该有我指定的图标但没有任何反应,我得到的是默认文件夹图标.

有任何想法吗？很抱歉,如果问题看起来很基本,但我发现在尝试做基本的事情时很难遵循文档.:)

Answer 1

我可以使用以下CSS替换几个图标,而无需使用Types插件.希望这对其他人也有帮助!

    /* replace folder icons with another image, remove leaf image */        
    li.jstree-open > a .jstree-icon {background:url("imageOpen.gif") 0px 0px no-repeat !important;}
    li.jstree-closed > a .jstree-icon {background:url("imageClosed.gif") 0px 0px no-repeat !important;}
    li.jstree-leaf > a .jstree-icon { display: none; }


    /* replace checkbox icons */
    li.jstree-unchecked > a .jstree-checkbox, li.jstree-undetermined > a .jstree-checkbox 
    {
        background:url("uncheckedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }
    li.jstree-checked > a .jstree-checkbox
    {
        background:url("checkedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }

Answer 2

头疼之后...我找到了解决方案.

    <li data-jstree='{"icon":"path/file.png"}'></li>

我建议不要修改css代码.

PS"类型"插件不是必需的.

Answer 3

两个问题:

1. 我需要在列表对象的rel属性中添加"type"(我创建了一个默认和文件类型).

2. 我在我的数组中忘了一个声明类型的级别,代码必须如下所示:

   $('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
       getFileById(data.args[0].hash.replace('#', ''));
   }).jstree({
       'plugins' : ['html_data','themes','ui','types'],
       'ui' : {
           'select_limit' : 1
       },
       'core' : {
           'animation' : 0
       },
       'types': {
           'types' : {
               'file' : {
                   'icon' : {
                       'image' : '/admin/views/images/file.png'
                   }
               },
               'default' : {
                   'icon' : {
                       'image' : '/admin/views/images/file.png'
                   },
                   'valid_children' : 'default'
               }
           }
   
       }
   });
   

我真的不明白为什么我的代码在WYSIWYG中破坏了,对不起,如果它很难看.无论如何,我希望这可以帮助别人.

Answer 4

您可以使用新API更改图标,而无需HTML,CSS或插件.

$("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");

Answer 5

要隐藏文件夹图标,请使用以下命令:

<style type="text/css">
 .jstree li > a > .jstree-icon {  display:none !important; } 
</style>

Answer 6

jstree 包含自己的文件图标（除了默认的文件夹图标），'icon': 'jstree-file'向节点添加属性以显示它