imuiTree(jsTree)で動的にノードを追加する。

intra-martの画面でツリー表示を行う場合、imuiTreeを使うと思います。
ついこないだプロジェクトで使っていて、初期表示のサーバサイド処理で全ツリーデータを生成していたんですけど、 ぜんぜん性能がでなくて1階層ずつ表示するように変更することにしようと思いました。

imのAPIドキュメント見ても動的にノードを追加するようなやり方は載ってなく、さらにimuiTreeNodeというものもありましたが使い方がよくわからず。Collaborationのソースを見てもわけがわからず。

さらに調べるとimuiTreeはjsTreeをカスタマイズしたものであるということがわかりました。

www.jstree.com

それでjsTreeでノードを追加する方法をいろいろググったんですけど、あまりドンピシャなものがなくて、jsTreeのAPIドキュメント見ながらようやく実装できました。 以下の様な感じで。

// クライアント側のコード
$('#tree').on('select_node.jstree', function(event, data) {

  var selectNode = data.rslt.obj; // 選択ノード取得

  // add child nodes
  $.ajax({
    url: 'xxx/getfolders',
    dataType: 'json',
    data : { folderKey : selectNode.attr('rel') }
  }).done(function(data){

    selectNode.find('li').remove(); // ノードを追加し直すので子ノードをすべて削除
    for(var i in data) {
      var folder = data[i];
      var parent = $('#tree').jstree('get_selected'); // 親ノードを設定 
      var newNode = { data: folder.label, 'attr' : { "rel": folder.rel } };
      $('#tree').jstree("create_node", parent, 'inside', newNode, false, false);  // ノードを追加
    }
    $('#tree').jstree("refresh"); // 表示を更新

  }).fail(function(res){
    // エラー処理
  });

});

上記のコードではノード選択時に、選択ノード情報をajaxでリクエストして、子ノードの情報を取得し、選択ノードの子ノードとして追加しています。
ノードの追加は簡単で、親ノードを指定してラベルに表示する情報など渡して"create_node"を実行すればOKです。
ポイントはノード追加後にリフレッシュすることです。リフレッシュしないと表示されないです。
これに気づくまでハマりました。