jstree、ボタンを押すと選択されたノードのアイコンを変更できるようにしたい。

jstreeで下記のようなプログラムを途中まで書きました。
実装したい処理は、先にノードを選択しておいて、そのノードのアイコン（:icon）を"glyphicon glyphicon-picture"に変更するというものを入れようと思っています。
「処理を入れたい」と書かれた部分に処理を入れたいのですがどうやっても上手くいきません。
何か解決方法はありませんか？

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JSTREE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
    <script>
      $(function(){
         TREE =$('#tree')
         TREE.jstree({ 'core' : {
            'data' : [
              'Simple root node',
              {
                'text' : 'Root node 2',
                'state' : {
                   'opened' : true,
                   'selected' : true
                },
               'children' : [
                 { 'text' : 'Child 1' },
                 'Child 2'
               ]
              }
             ]
         }});

         $("#tree_button").click(function(){
		  console.log("ここに処理を入れたい");
         });		   
      });
    </script>
  </head>
  <body>
    <div id="tree"></div>
	<input type="button" id="tree_button" value="アイコン変更">
  </body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

選択されている要素を取得して、アイコンをセットする処理を書けばよいです。
具体的なコードは下記を参照してください。

JavaScript
1$("#tree_button").bind("click",function(){
2	var tree = $('#tree').jstree(true);
3	var selectedNode = tree.get_selected(true);//選択された要素を取得
4	tree.set_icon(selectedNode, 'https://icongr.am/devicon/google-original.svg'); //要素にアイコンをセット
5});