読者です 読者をやめる 読者になる 読者になる

カッパでも分かるiOSアプリゲーム開発

カッパがひたすらゲーム制作に関することを書くブログです。Railsに関するTipsもたまにまとめてます。

rails4 + jstree でツリー構造を実装+色々カスタマイズする

スポンサードリンク

Ruby on Rails 4 アプリケーションプログラミング
f:id:InvokeTwoA:20151023183618p:plain「jstreeを使えばツリー構造も楽チン楽チン!」
f:id:InvokeTwoA:20151215172640p:plain「最近ツリー構造ばかりやってますね」
【目次】

jstreeってなに?

  • 名前の通り、ツリー構造を javascript で表現してくれるライブラリ
  • ある特定のdivタグから下にある ul, li を階層順に表示し、ツリー構造の開閉が可能となる

使い方

インストール

gem 'jstree-rails-4'
bundle install
  • javascript の include
//= require jstree
  • css の include
*= require jstree-default
  • 使い方
#jstree
  %ul
    %li hige
       %ul
          %li hoge
          %li huga
:coffee
$('#jstree').jstree()

カスタマイズ

デフォルトで付いてるフォルダのアイコンを非表示にしたい

  • data-jstree の icon を false にすれば良い
<li data-jstree='{"icon":"false"}'>

これだけだと謎の空欄ができてしまうので css をいじって幅を1pxとかにすると良い

.jstree-anchor i
  width: 1px !important

onClick でイベントを取得したい

  • としていた場合、下記のようにcoffeescriptを書けばクリックしたアイテムのidが取得できる
 $(document).on 'click', '.jstree-anchor', ->
   $(this).parent().data('hoge')

文字を折り返したい

  • cssをいじり、jstree のリンク部分に word-wrap: break-word の指定をすれば良い
.jstree-anchor a
  word-wrap: break-word !important

ツリーのアイコンを +- にしたい

  • 現バージョンでは無理
  • 参照する画像を変えるとかする必要あり

初めはツリーの状態を閉じているようにしたい

  • li のクラスに jstree-close を指定すれば良い
  • 逆に li のクラスに jstree-open を指定していると開いた状態になる

総評

f:id:InvokeTwoA:20151023183618p:plain「すごく使いやすいけど、ツリー構造の開閉ボタンがプラスマイナスみたいなあのアイコンじゃなくなったのが残念だね」
f:id:InvokeTwoA:20151215172640p:plain「簡単に画像のカスタマイズとかできれば尚良かったんですけどねー」