Hatena::ブログ(Diary)

株式会社アンフィニ 技術ブログ

2012-01-31

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

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

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


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


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


jsTree


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

f:id:infini-crew:20120131164326p:image

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

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

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

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

jQuery : http://jquery.com/


jsTreeで出来ること


・・・etc

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


使い方


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

f:id:infini-crew:20120131164327p:image

HTMLjQueryと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();
});

実行

f:id:infini-crew:20120130153153p:image

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

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

f:id:infini-crew:20120130153152p:image

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



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


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

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>


実行結果

f:id:infini-crew:20120130153151p:image
こんなかんじで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"}
]


実行結果

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



最後に


いかがでしたか?

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


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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/infini-crew/20120131/1327995929
リンク元