web-dev-qa-db-ja.com

jstreeのアイコンを変更するにはどうすればよいですか？

私は次のコードを持っています：

$('.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 そしてほとんど同一のコードを使用しても何も起こらないようです。

上記のコードを理解すると、ツリーのデフォルトタイプには指定したアイコンが表示されますが、何も起こりません。デフォルトのフォルダーアイコンだけが表示されます。

何か案は？質問が基本的なように思えても申し訳ありませんが、基本的なことをしようとすると、ドキュメントを理解するのが難しいと思います。 :)

javascriptjstree
27
Gazillion

2つの問題：

  1. リストオブジェクトのrel属性に「タイプ」を追加する必要がありました（デフォルトとファイルタイプを作成しました）。

  2. 型を宣言する配列の1つのレベルを忘れました。コードは次のようにする必要がありました。

    $('.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で壊れている理由が本当にわかりませんが、ifい場合は申し訳ありません。とにかく、これが誰かを助けることを願っています。

16
Gazillion

Typesプラグインを使用せずに、次のCSSを使用していくつかのアイコンを置き換えることができました。これが他の人にも役立つことを願っています！

    /* 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;
    }
24
http203

頭痛の後に...私は解決策を見つけました。

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

do n't cssコードを変更することをお勧めします。

PS「タイプ」プラグインは必要ありません。

23
FabioSorre

HTML、CSS、またはプラグインなしで、新しいAPIでアイコンを変更できます。

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

フォルダアイコンを非表示にするには、次を使用します。

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

jstreeには（デフォルトのフォルダーアイコンに加えて）独自のファイルアイコンが含まれており、'icon': 'jstree-file'表示するノードのプロパティ

4
Severian

レベルに基づいてアイコンを変更する方法：

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

非常に多くの構成を試みて失敗した後、私は素晴らしいアイデアを見つけました！

オンラインフォトエディターを使用して https://pixlr.com/editor/ パスの下にアイコンイメージファイルを開きました。

jstree\themes\default\32px.png

そして、置き換えたいフォルダアイコンを開きました

enter image description here

簡単に交換して保存してください:) 2時間の闘争の後、最高だと思います。

2
efirat

次のスクリプトは私のために機能します：

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

このコードを試してください：

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");
0
Saeed Gharedaghi