ツリービューをリストから作成できるjQueryプラグイン、”jsTree”

jsTreeはリストli要素からツリービューを表示させるためのjQueryプラグインです。htmlでliを記述するばかりでなく、jsonからも作成できます。

WordPressプラグインのTreeView On Contentsで興味をもって調べたのですが、多機能すぎてややこしい。

ただ、普通にツリー表示させてアイコンを変更するだけなら簡単にできるので、メモがてらやり方を書いておきます。

“jsTree”を使う

プラグインの入手

jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable,...

ページ中ほど左にある「Download」より配布パッケージを入手します。中にはいろいろ入っていますが、使うのはdistにあるjstree.min.jsとthemes-defaultに入っているstyle.min.cssと画像3つ計5つです(32px,40px,throbber,jstree.min.css,style.min.css)。

今回はCDN版を利用するので、お試しならDL不要です。

  • demo
  • dist
    • themes
      • default
        • 32px
        • 40px
        • stlye.css
        • stlye.min.css
        • throbber
    • jstree.js
    • jstree.min.js
  • src
  • test
  • LICENCE-MIT

jQueryの準備

jQueryが必要なので、未導入なら下のコードをhead内に書き込んでください。jQuery本体はjsTreeの前に設置して先に読み込ませてください。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

/js/jstree/以下に置く場合

置く場所のサンプルです。上の5つのファイルを同じディレクトリに入れてしまっていいです。

<link rel="stylesheet" href="/js/jstree/style.min.css">
<script src="/js/jstree/jstree.min.js"></script>

CDNから利用

CDNで提供されているので、お試しの今回はこちらを利用します。
</head>の手前にでも下のコードを書き込んでください。

 <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>

使ってみる

jsTreeはdiv要素内ulliでツリー化します。ここでは上に示したjsTreeを使うのに必要なファイルとディレクトリ構造を再現してみます。

最初にdivに適当なid名をつけてツリーを作ります。ここではid=”tree1“として作成します。

次に普通にulを使ったリストを作成します。見やすくするために今は<li>dist</li>の下に階層を1つだけ作って2階層とします。

まずはdemoからLICENCE-MITまでのフラットなリストを作り、その後<li>dist</li>を閉じる</li>の手前に<ul></ul>を挿入します。

そのうえで<ul></ul>の間に2階層目のリストを作成していきます。

<div id="tree1">
<ul>
 <li>demo</a></li>
 <li><b>dist</b>
 <ul>
 <li><b>themes</b>
 </li>
 <li>jstree.js</li>
 <li><b>jstree.min.js</b></li>
 </ul> 
 </li>
 <li>src</li>
 <li>test</li>
 <li>LICENCE-MIT</li>
</ul>
</div>

リスト1、id=1

jsTreeを有効にする

上で作ったリストにこのコードを用いると

<script>
$(function(){$('#tree1').jstree();});
</script>

たったの一行で下のようなツリーになりました。

  • demo
  • dist
    • themes
    • jstree.js
    • jstree.min.js
  • src
  • test
  • LICENCE-MIT

ツリー1,id=tree1

しかしこれだと問題が一つ。distの部分が閉じてしまっています。

閉じているところは三角になっているのでクリックすれば開きます。しかし、これでは知らない人にはツリーになっていることがわかりません。ビジュアル的にわかりやすくするためのツリー表示ですから、最初から開いておきます。

ツリーを開かせる

開かせておきたいli要素の属性に「data-jstree='{ “opened” : true }’」を書き加えます。
distを開かせたいわけですからこうします。

<li data-jstree='{ "opened" : true }'><b>dist</b>

書き加えて実行したものが下のツリーです。

  • demo
  • dist
    • themes
    • jstree.js
    • jstree.min.js
  • src
  • test
  • LICENCE-MIT

ツリー2,id=tree2

これで開きました。階層化している部分を最初からオープンにしたければ、リスト項目に「data-jstree='{ “opened” : true }’」と付け加えればいいわけです。

あとはthemesの下にも階層を作り、同様にすれば完成です。

アイコンを変更する

さて、ツリー自体は完成しましたが、アイコンがすべてフォルダのままです。これではかえってわかりにくいので、ファイルだけはアイコンを変更しましょう。

アイコンのファイルを変更したいリスト項目の属性に「 data-jstree='{ “icon” : “jstree-file” }’」を付け加えます。jstree.min.jsの項目なら

 <li data-jstree='{ "icon" : "jstree-file" }'><b>jstree.min.js</b></li>

こうします。「jstree-file」の部分をurlにすれば、好きな画像を使えます。

<div id="tree3">
<ul>
 <li>demo</a></li>
 <li data-jstree='{ "opened" : true }'><b>dist</b>
 <ul>
 <li data-jstree='{ "opened" : true }'><b>themes</b>
 <ul>
 <li data-jstree='{ "opened" : true }'><b>default</b>
 <ul>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>32px</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>40px</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'>stlye.css</li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>stlye.min.css</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>throbber</b></li>
 </ul>
 </li>
 </ul>
 </li>
 <li data-jstree='{ "icon" : "jstree-file" }'>jstree.js</li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>jstree.min.js</b></li>
 </ul>
 </li>
 <li>src</li>
 <li>test</li>
 <li data-jstree='{ "icon" : "jstree-file" }'>LICENCE-MIT</li>
</ul>
</div>

リスト3、id=tree3
実行結果

  • demo
  • dist
    • themes
      • default
        • 32px
        • 40px
        • stlye.css
        • stlye.min.css
        • throbber
    • jstree.js
    • jstree.min.js
  • src
  • test
  • LICENCE-MIT

ツリー3,id=tree3

階層構造もファイルも一目でわかるようになりました。これで完成です。

表示をカスタマイズ

完成はしましたがもう少しいじってみます。

まずは一つ一つをわかりやすくするためにストライプにします。ストライプにするにはcoreでthemesを設定します。stripesというテーマが用意されているので、trueにします。

$('#tree4').jstree();{'core' : {'themes':{'stripes':true}}}

さらにリスト項目をつなぐ線を消して、チェックボックスを付け加えます。”wholerow”は線を消す、”checkbox”はチェックボックスを表示するプラグインです。

$('#tree4').jstree({"plugins" : ["wholerow","checkbox"],'core' : {'themes':{'stripes':true}}});

最後に特定の項目を際立たせてみます。style.min.cssにチェックを入れます。 「”selected” : true」をdata-jstreeに加えます。

<li data-jstree='{ "icon" : "jstree-file" , "selected" : true}'><b>stlye.min.css</b></li>

上の記述を反映させたものが下のリスト4です。

<div id="tree4">
<ul>
 <li>demo</a></li>
 <li data-jstree='{ "opened" : true }'><b>dist</b>
 <ul>
 <li data-jstree='{ "opened" : true }'><b>themes</b>
 <ul>
 <li data-jstree='{ "opened" : true }'><b>default</b>
 <ul>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>32px</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>40px</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'>stlye.css</li>
 <li data-jstree='{ "icon" : "jstree-file" , "selected" : true}'><b>stlye.min.css</b></li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>throbber</b></li>
 </ul>
 </li>
 </ul>
 </li>
 <li data-jstree='{ "icon" : "jstree-file" }'>jstree.js</li>
 <li data-jstree='{ "icon" : "jstree-file" }'><b>jstree.min.js</b></li>
 </ul>
 </li>
 <li>src</li>
 <li>test</li>
 <li data-jstree='{ "icon" : "jstree-file" }'>LICENCE-MIT</li>
</ul>
</div>

リスト4、id=tree4

最終的には上のようになりました。実行すると

  • demo
  • dist
    • themes
      • default
        • 32px
        • 40px
        • stlye.css
        • stlye.min.css
        • throbber
    • jstree.js
    • jstree.min.js
  • src
  • test
  • LICENCE-MIT

ツリー4、id=tree4

完成しています。

リスト項目への線が消え、行ごとにシマシマが入っています。先ほどチェックしたstyle.min.cssにはチェックが入って、さらに上の階層もチェックが入っています。

シマシマはいらないかもしれないですが、一例としてやってみました。

さいごに

説明すると長くなってしまいめんどうそうですが、2階層くらいのツリービューなら簡単に作れます。アイコンも好きなものに変更できるので、系統樹のようなものも作れそうです。

ただ、インタラクティブにする必要のない簡単なツリー表示するためだけにこれほどごてごてしいプラグインを使う必要があるのか?と、ここまで書いてから思ったり思わなかったりです。

スポンサーリンク
336
336

シェアする

フォローする