imuiTree(jsTree)で初期表示をすべて展開状態にする。

intra-martのパッケージの画面でimuiTree(jsTree)で実装されているツリー表示の画面があるのですが、 エンドユーザ様からすべて展開状態で初期表示してくれと言われたのでカスタマイズ方法を調べてみたら思いのほか簡単にできました。

ツリーのデータを設定したあとのところで以下のような１文を追加するだけです。

$('#tree').jstree('open_all'); // すべて開く

ちなみに１階層ずつデータを取得している場合でもこれですべてオープンにできます。
ただし、その場合は初期表示時に全ノード展開分のリクエストが一気に飛ぶので画面表示がモッサリします。

想像できると思いますが、すべて閉じるのは'close_all'でできます。
昔はブラウザでツリー表示ですべて展開といったらめんどくさいことこの上ないロジックを書いてた気がしますが、 １文で終わるとは便利な世の中になりましたね。
jsTreeありがたすぎる。

BitbucketからGitHubにリポジトリを自動インポートで移行する。

2020/06/07 URLが古かったので更新しました。

BitbucketからGitHubに移行するときに毎回やり方を忘れるのでメモ。

GitHubにはインポート機能があるのでBitbucketのURLをいれるだけで簡単に移行できる。

github.com

URLはhttps://bitbucket.org/finalstream/movselexといったBitbucketのプロジェクトページのURLをいれる。

ほかにもsvnとかtfsとかからもインポートできるみたい。ちょー便利。

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です。
ポイントはノード追加後にリフレッシュすることです。リフレッシュしないと表示されないです。
これに気づくまでハマりました。