【javascript】jQueryプラグイン jsTreeの紹介

jQuery

こんにちは。酢ダコ@infiniです。

今回は初★技術ブログになります。
私なんかが第１段を書いていいのかは不明ですが、精一杯頑張りたいと思います。


アンフィニ 技術ブログとは？

アンフィニ社員がITやプログラミングに関する技術をちょこっとお披露目するブログです。
普通に社員ブログより更新速度は遅くなりそうですが、少しでも皆さんのお役に立てたら嬉しいです。


jsTree

今回私が紹介するのは、jQueryプラグインのjsTreeです。

jsTreeは、HTML, json, XMLのデータを用いて、ツリーを生成するプラグインです。

jsTreeは以下のサイトから入手出来ます。

jsTree　：　http://www.jstree.com/

また、jsTreeはjQueryのプラグインのため、jQuery本体も必要になります。

jQuery　：　http://jquery.com/


jsTreeで出来ること

  • ドラッグ＆ドロップ（ツリー内、複数ツリー間も可）
  • テーマの設定
  • キーボード操作
  • インライン編集
  • チェックボックス付ツリー
  • Ajax対応
  • 開閉アニメーション
  • 状態をcookieに保存

・・・etc

ツリーの基本機能は一通りそろっています。


使い方

一番簡単な、HTMLで作られたリスト(ulタグ＆liタグ)をツリーに生成する方法を紹介します。


HTMLにjQueryとjsTreeを読み込ませます。
<script type="text/javascript" src="../jstree/_lib/jquery.js"></script>
<script type="text/JavaScript" src="../jstree/jquery.jstree.js"></script>
divタグで囲ったリストを記載します。（以下のコード）
<div id="testTree">
	<ul>
		<li><a href="#">ノード1</a>
			<ul>
				<li><a href="#">ノード1-1</a></li>
				<li><a href="#">ノード1-2</a></li>
				<li><a href="#">ノード1-3</a></li>
			</ul>
		</li>
		<li><a href="#">ノード2</a></li>
	</ul>
</div>
javascriptを記載します。（以下のコード）
$(function () {
	$("#testTree").jstree();
});
実行

簡単に綺麗なツリーを生成することができました！

今は開く要素を設定していないので、ノードが開いていませんが、
三角のボタンをクリックしてみると…

こんな感じで、きちんとノードが作られています！



XMLを使用したツリー生成方法

XMLをAjaxで読み込んで、ツリーを生成してみます。

HTML
<div id = "xmlTree"></div>

このid "xmlTree"にツリーを生成していきます。

JavaScript
$(function () {
	$("#xmltree").jstree({
		"xml_data" : {
			"ajax" : {
				"url" : "xmlFile.xml"
			}
		},
		"plugins" : [ "themes", "xml_data" ]
	});
});

jsontreeのメソッドにはオプションを付けることが出来ます。
オプション内で、さらに使いたい機能（プラグイン）を読み込み、各種オプションが使えるようになります。

XML

ツリーの内容となるXMLファイル(別ファイル)を記載します。
xmlFile.xmlの内容：

<root>
	<item>
		<content>
			<name><![CDATA[Node 1]]></name>
		</content>
	</item>
	<item>
		<content>
			<name><![CDATA[Node 2]]></name>
		</content>
	</item>
	<item>
		<content>
			<name><![CDATA[Node 3]]></name>
		</content>
	</item>
</root>
実行結果


こんなかんじでXMLファイルから生成することも可能です！

JSONを使用したツリー生成方法

HTML
<div id = "jsonTree"></div>

生成先のidを用意します。

JavaScirpt
$(function () {

	$("#jsonTree").jstree({
		"json_data" : {
			"ajax" : {
				"url" : "jsonData.json"
			}
		},
		"plugins" : [ "themes", "json_data" ]
	});

});
JSONデータ

jsonData.jsonの内容：

[
	{"data" :"親ノードからの〜", "children" : [
			{ "data" : "子ノードだよ！"}
	],"state" : "open"}
]
実行結果


jsonデータに「"state" : "open"」を追加した為、
開いた状態でツリーが表示されました。



最後に

いかがでしたか？

今回は本当に基礎的な部分しか記載していないので、応用的なことは書いていませんが、
今後時間があれば書いていこうと思います。


以上、酢ダコ@infiniでした！