jsTree

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-10-28 (水) 14:21:48 | 最終更新:2015-11-19 (木) 15:42:09

ひさびさにツリーメニューを実装しようと思って
Treeview を設置してみたけど、動かない。。。
更新も止まっているようだし、他のプラグインを探してみたら良さそうなのがあった。 😯
採用するかどうかはわからないけど、使い方をメモ。

コード中に出てくる vakata って何かと思ってたけど
作者の HN でした。
GitHub:vakata

【環境】
jsTree:3.2.1
jQuery:1.11.3
DL

公式 の Download ボタンより DL。
2015-10-28 現在
vakata-jstree-3.2.1-0-g8ea6ce7.zip

ファイル配置
  1. DL したファイルを解凍
  2. 中身の dist ディレクトリを js ディレクトリへ配置
  3. 配置した dist ディレクトリを jstree にリネーム

中には CSS ファイルや画像ファイルもあるので、本来なら分けるべきかもしれないけど、ここで完結させる。
なぜなら、テーマ名を設定するだけで、テーマの変更をできるようになっているから。
でも、その割には CSS ファイルへの参照はちゃんと記述しないとダメ。。。

利用
前提
  1. <link rel="stylesheet" type="text/css" href="./css/jstree.min.css">
  2. <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  3. <script type="text/javascript" src="./js/jstree.min.js"></script>
リストタグ
  1. <script>
  2. $(document).ready(function(){
  3.       $('#tree').jstree();
  4. });
  5. </script>
  6.  
  7. <div id="tree">
  8. <ul>
  9.     <li>階層1
  10.     <ul>
  11.         <li>階層2</li>
  12.     </ul>
  13.     </li>
  14. </ul>
  15. </div>

注意
階層リストの場合、書式に注意。
下記タイプA、タイプB、どちらでもリスト表示をできるけど
jsTree は、タイプB で記述しないと認識しない。

  1. // タイプA
  2. <ul>
  3.     <li>階層1</li>
  4.     <ul>
  5.         <li>階層2</li>
  6.     </ul>
  7. </ul>
  8.  
  9. // タイプB
  10. <ul>
  11.     <li>階層1
  12.     <ul>
  13.         <li>階層2</li>
  14.     </ul>
  15.     </li>
  16. </ul>

私は今までタイプAで書くのが普通だったんだけど
もしかして、正式はタイプBなのかしら。。。汗

XML データ
JSON データ
注意

ツリー項目に a タグを付けてリンクを貼ろうとしたけど
どうも表示が変になる。

  1. <li>Content <a href="#">Edit</a></li>

としても、Edit だけが表示される。

dnd の研究にノードオブジェクトの中身を覗いてみたけど
jsTree が表示用に a タグを利用しているようで
リンクを貼りたければ、click イベントで制御するしかなさそう。

設定書式

プラグインも含めた設定の例。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         // 基本設定
  4.         'core' : {
  5.             'themes' : {
  6.                 'variant' : 'large'
  7.             }
  8.         },
  9.         // プラグイン毎の設定
  10.         'checkbox' : {
  11.             'keep_selected_style' : false
  12.         },
  13.         // 利用するプラグインを列挙?
  14.         'plugins' : [ 'wholerow', 'checkbox' ]
  15.     });
  16. });
  17. </script>

こんな感じ。
他のプラグインと同じ~。 😯

‘plugins’ で、On にしたいプラグインを列挙し
プラグイン毎の設定で、各プラグインの設定変更をする。

設定変更がなければ、プラグイン各個の設定は記述しなくて良い。

core(基本設定)
themes
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'themes' : {
  5.                 // 独自テーマを利用したい場合は、当該ディレクトリ名文字列を指定?
  6.                 'name' : false,
  7.                 // 独自テーマを利用したくて、.js ファイルと別階層に置きたい場合に true を指定?
  8.                 'url' : false,
  9.                 // url を true にしたときだけ有効。テーマの場所を記述?
  10.                 'dir' : false,
  11.                 // ツリー罫線を表示するか否か
  12.                 'dots' : true,
  13.                 // ノード(フォルダ)アイコンを表示するか否か
  14.                 'icons' : true,
  15.                 // 1行おきに背景色を付けて縞々にするか否か
  16.                 'stripes' : false,
  17.                 // CSS クラス('large', 'small', 'responsive')があるっぽい
  18.                 // false でデフォルトなんだろうけど、どれかわからない
  19.                 'variant' : false,
  20.                 // 小さい画面の時は ture って書いてある気がするけど、true にしてみても、違いがわからない
  21.                 'responsive' : false,
  22.             }
  23.         }
  24.     });
  25. });
check_callback

ユーザーによるツリーの変更を許可するか否か。
デフォルトは false。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'check_callback' : false,
  5.         }
  6.     });
  7. });
関数指定

true か false か、状況によって変化させるために
関数を指定することができる。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'check_callback' : function (operation, node, node_parent, node_position, more) {
  5.                 if ((operation === 'move_node' || operation === 'copy_node') && (node_parent.id === '#')) return false;
  6.             },
  7.         }
  8.     });
  9. });
jstree.js
  1. * __Examples__
  2. *
  3. *   $('#tree').jstree({
  4. *       'core' : {
  5. *           'check_callback' : function (operation, node, node_parent, node_position, more) {
  6. *               // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
  7. *               // in case of 'rename_node' node_position is filled with the new node name
  8. *               return operation === 'rename_node' ? true : false;
  9. *           }
  10. *       }
  11. *   });
引数
jstree.js
  1. * @name check(chk, obj, par, pos)
  2. * @param  {String} chk the operation to check, can be "create_node", "rename_node", "delete_node", "copy_node" or "move_node"
  3. * @param  {mixed} obj the node
  4. * @param  {mixed} par the parent
  5. * @param  {mixed} pos the position to insert at, or if "rename_node" - the new name
  6. * @param  {mixed} more some various additional information, for example if a "move_node" operations is triggered by DND this will be the hovered node
  7. * @return {Boolean}
  • 引数
    • operation(String)
      • ソース説明の通り。5種
    • node(Object)
      • オブジェクト
    • node_parent(Object)
      • 移動先の親オブジェクト
    • node_position(integer)
    • more(Object)
      • core
      • is_foreign
      • is_multi
      • origin(Object)
        • 恐らく移動前のツリー全体の情報が格納されている
        • 参考記事の more.ref.data.type の使い方不明
よくわからないオブジェクト連鎖

stackoverflow:JsTree v3.0 drag and drop plugin. Reference target node upon dropping
こちらに書かれている下記コードにおける
more.ref.data.type
が、何をどう辿っているのか不明。

  1. if (more.ref.data.type === "folder") {
  2.     return true;
  3. }
  1. console.log(more.ref.data.type);
TypeError: more.ref is undefined
タイミング

チェックは常に行っているらしく
上記のように指定することで、ドラッグ中に
root 直下へは、移動先候補 ▶ のマークが出なくなった。

data(Ajax)

こちらを設定しておくことで、ページ読み込み時に
そちらを読みにいく。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'data' : {
  5.                 'url' : function (node){
  6.                             if (node.id === '#') {
  7.                         return "http://localhost:9000/getCourses/" ;
  8.                             }
  9.                             else
  10.                         return "http://localhost:9000/getCourses/" + node.id;
  11.                             }
  12.                         },
  13.                 'data' : function (node) {
  14.                             return { 'id' : node.id };
  15.                         }
  16.             }
  17.         }
  18.     });
  19. });

こちらは下記サイトのコードをいただいてきたが
あちこちでこのような書き方がされている。
answer uxu:jstree html and json

どうもデフォルトでは、node.id がルートの # になっていて
ルートの情報を取得して表示。
後はノードを選択する度に、そのノードの ID を送り、その配下の情報を取得し表示。
という仕様になっているっぽい。

変更の通信ではない?

プラグイン

jsTree という名前の jQuery プラグインに実装されている
プラグイン(追加機能)。

一覧

公式:Plugins?

  1. 'plugins' : [
  2.     'checkbox',
  3.     'contextmenu',
  4.     'dnd',
  5.     'massload',
  6.     'search',
  7.     'sort',
  8.     'state',
  9.     'types',
  10.     'unique',
  11.     'wholerow',
  12.     'changed',
  13.     'conditionalselect'
  14. ]
checkbox
設定
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'checkbox' : {
  4.             // 選択された行に背景色をつけるか否か
  5.             'keep_selected_style' : true
  6.         }
  7.         'plugins' : [ 'checkbox' ]
  8.     });
  9. });
contextmenu

contextmenu

dnd(Drag and Drop)

dnd(Drag and Drop)

search
設定

JSFIDDLE:http://jsfiddle.net/53cvtbv9/1/

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'plugins' : [ 'search' ]
  4.     });
  5. });
  1. <div><?php echo __('Search : '); ?><input type="text" class="search-input" /></div>
  2.  
  3. <script>
  4. $(document).ready(function() {
  5.     $(".search-input").keyup(function() {
  6.         var searchString = $(this).val();
  7.         $(selectorTree).jstree('search', searchString);
  8.     });
  9. });
  10. <script>
unique

単一ノード直下の重複チェック。

設定
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'unique' : {
  4.             // 大文字小文字の区別をするか否か
  5.             'case_sensitive' : false,
  6.             // 重複した場合の名称を hoge -> hoge (2) のように変更する
  7.             'duplicate' : false,
  8.         }
  9.         'plugins' : [ 'unique' ]
  10.     });
  11. });
イベントリスナー

イベントリスナー

メソッド
書式

複数あるっぽい。

  1. $('#jstree').jstree('select_all'); // うまくいった
  2. $('#jstree').select_all(true); // 未試行
一覧
  1. // 選択系
  2. $('#jstree').jstree('select_all'); // 全選択
  3. $('#jstree').jstree('check_all'); // 全選択
  4. $('#jstree').jstree('deselect_all'); // 全選択解除
  5.  
  6. $('#jstree').jstree('select_node', node.id); // 個別選択
  7. $('#jstree').jstree('deselect_node', node.id); // 個別選択解除
  8.  
  9. // オープン系
  10. $('#jstree').jstree('open_all'); // 全開く
  11. $('#jstree').jstree('close_all'); // 全閉じる
  12. // 後はパターンで考えてましょう。。。
本体解析
this

全部でないかもしれないけど、本体コード中に現れる this は
カスタマイズの際には $(selectorTree).jstree(true) に読みかえればよいかも?

Loading

本体の Ajax 通信を利用せずに、独自の通信ロジックにしたら
Loading 表示のやり方がわからなかった。

独自にした理由

どこの例を見ても、’data’ : のところが、{ “id” : node.id } となっていて、それ以外のデータの渡し方がわからなかったから
当該ノードだけを更新するわけでなくて、ツリー全体を更新しているから

本体解析

うまい例を見つけられなかったので、本体を見てみた。

jstree.js
  1. refresh : function (skip_loading, forget_state) {
  2.  
  3.     __snip__
  4.  
  5.     if(!skip_loading) {
  6.         this.element.html("<"+"ul class='"+c+"' role='group'><"+"li class='jstree-initial-node jstree-loading jstree-leaf jstree-last' role='treeitem' id='j"+this._id+"_loading'><i class='jstree-icon jstree-ocl'></i><"+"a class='jstree-anchor' href='#'><i class='jstree-icon jstree-themeicon-hidden'></i>" + this.get_string("Loading ...") + "</a></li></ul>");
  7.         this.element.attr('aria-activedescendant','j'+this._id+'_loading');
  8.     }
  9.  
  10.     __snip__
  11. }

どうやら、ここで表示しているらしい。

本体の HTML を一旦 Loading 用に書き換えちゃってるのね~。

refresh

それで、いくつか refresh メソッドを試してみたけど表示されなかった。

  1. $(selectorTree).jstree(true).trigger('refresh');
  2.  
  3. // create で試したけど、当該ノードが消えただけ
  4. // refresh をかけたわけだから、create に前に戻るので当たり前
  5. $(selectorTree).jstree(true).refresh();
Loading 表示

上記の HTML の内、わからないところとか、不必要と思われる箇所を少しだけ除いて
無理くり下記のようにしてみたら、ツリー全体を Loading 画像で置き換えることができた。

  1. var htmlLoading = '<ul class="jstree-container-ul jstree-children" role="group">'
  2. + '<li class="jstree-initial-node jstree-loading jstree-leaf jstree-last" role="tree-item">'
  3. + '<i class="jstree-icon jstree-ocl"></i>'
  4. + '<a class="jstree-anchor" href="#">'
  5. + '<i class="jstree-icon jstree-themeicon-hidden"></i>Loading ...'
  6. + '</a>'
  7. + '</li>'
  8. + '</ul>';
  9.  
  10. $('#jstree').jstree(true).element.html(htmlLoading);
refresh

そのまんま。
読み込んだときの状態に戻す。

  1. $(selectorTree).jstree(true).refresh();
  2.  
  3. $(selectorTree).jstree(true).refresh(false, false);

第1引数:skip_loading。Loading 表示をスキップするか否か
第2引数:forget_state。現状を記憶するか否か

参考サイト

株式会社アンフィニ 技術ブログ:【javascript】jQueryプラグイン jsTreeの紹介
海外製ライブラリ・Web API ドキュメントの翻訳ページ:jsTreeドキュメント日本語訳

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-10-28 (水) 14:21:48 | 最終更新:2015-11-19 (木) 15:42:09

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment