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

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

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

有什么想法吗？很抱歉，如果问题看起来很基本，但我发现在尝试做基本的事情时很难遵循文档。：）

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

两个问题：

我需要在列表对象的rel属性中添加“type”（我创建了默认和文件类型）。

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

$('.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'属性添加到节点以显示它

Answer 7

根据级别更改图标的方法：

jQuery('#tree-edit').on('changed.jstree', function(e, data) {

      //do something
    }).on("open_node.jstree", function(event, data) {
        jQuery.each(data.instance._model.data, function(key, val) {
            console.log(key + ", " + val);
           if (key.length < 4 || key=='#') {
               jQuery.jstree.reference("#tree-edit").set_type(val, "selectable");
           }
        });
    }).on("loaded_node.jstree", function(event, data) {
        console.log(data);

    }).jstree({
        'plugins': ["search", "types"],
        'core': {
            'data': {
                'url': 'http://www.google.com/json',
                'data': function(node) {
                    return {'id': node.id};
                }
            }
        },
        'types': {
            'selectable': {
                'icon': 'http://elpidio.tools4software.com/images/icon-ok-small.png'
            },
            'default': {
                'icon': 'http://www.fabulatech.com/printer-for-remote-desktop-server-help/img/icons/warning-small.gif'
            }
        },
    });

Answer 8

在尝试了这么多配置失败后，我发现了一个好主意！

通过使用在线照片编辑器https://pixlr.com/editor/，我在路径下打开了图标图像文件：

jstree\themes\default\32px.png

我打开了我要替换的文件夹图标

轻松更换并保存:) 我认为这是经过2小时奋斗后最好的。

Answer 9

试试这段代码：

lst_item = [];
$('#city_tree li').each(function(){ lst_item.push($(this).attr('id')); });
$('#city_tree').jstree(true).set_icon(lst_item, "/static/global/plugins/jstree/province.png");

Answer 10

以下脚本适合我：

$('div#jstree').on('ready.jstree click', function (e, data) {
        $('i.jstree-icon').removeClass('jstree-themeicon jstree-icon').addClass('fa fa-lg fa-user');
    });

如何更改jstree中的图标？

10 个答案: