ツリー関数のクラス化

注意

本クラスは、十分なテストを行っていません。また、エラー周りの実装は検討していません。

正常ケースを確認した環境は、IE6 for Windows、FireFox for Linuxです。

本プログラムは、高橋登史朗さま作成の jslb_ajax.js と拙作のkotatucommon1.jsが必要です。
jslb_ajax.jsについては、高橋登史朗さまのホームページ http://jsgt.org/mt/01/ を参照してください。

本プログラムは、商用利用および改造を自由に行ってくださってもかまいません。ただし、Ajaxの更なる発展のため、改造したソースは公開してください。利用・改造の連絡は不要です。なお、本プログラムの利用によりあなた、またはあなたの周囲に損害が発生しても、当方は一切関知しません。

Download

ツリークラス：kotatutree.js
共通関数：kotatucommon1.js
CSSファイル：kotatu.css

関数

init

全パラメータ（setParamで設定する項目）およびツリーデータ（setTreeDataで設定した内容）を初期化。
すでにツリーを構築している場合も、（createTree()で最後に設定したタグに対して）そのツリーを消す。

clear

ツリーデータ（setTreeDataで設定した内容）を初期化。
すでにツリーを構築している場合も、（createTree()で最後に設定したタグに対して）そのツリーを消す。

setParam(JSON object/JSON URL)

ツリーのパラメータを設定する。以下のいずれかを設定する。

JSON形式のデータを返すURL
JSON形式のデータ

設定できるパラメータを以下に示す。

パラメータ名	データ型	説明
name	string	ツリー固有の名称を設定。展開格納点の<div><span>タグに付与するIDの先頭につける。IDが重複する（複数ツリーオブジェクトを作成するときなど）場合、適当な名称を入力する。
imgflag	boolean	子要素の展開格納マークにアイコンを使用するときに設定する。未設定またはfalseを指定したとき、showmark・hiddenmarkパラメータを使用する。trueを指定したとき、showimg・hiddenimgパラメータに指定したアイコンを使用する。
showmark	string	子要素を展開するときのマークを設定する。テキストを設定できる。デフォルト'－'
hiddenmark	string	子要素を格納するときのマークを設定する。テキストを設定できる。デフォルト'＋'
showimg	string	子要素を展開するときのマークを設定する。アイコンのURIを設定できる。
hiddenmark	string	子要素を格納するときのマークを設定する。アイコンのURIを設定できる。
showflag	boolean	全展開格納点に対して初期状態での展開格納を設定できる。trueの場合展開、falseの場合格納する。
idtype	number	展開格納するときに子要素を囲む<div>タグおよび展開格納点＋／－を囲む<span>に設定するIDの付け方を指定する。0を指定した場合、設定した順番を元に命名する。0以外の場合、表示名を元に命名する。先頭にトップオブジェクトID＋nameパラメータの値を付加し、各レベルのID・表示名の間に、'_'を付与する。例： <トップオブジェクトID>_<nameパラメータの値>_9_9 <トップオブジェクトID>_<nameパラメータの値>_xxxx_yyyy

setLinkScript(ScriptName)

ツリーのリンクに指定したURL（setTreeData()で指定したJSONデータの"url"の値）を、onclickで表示する際に実行する関数名を指定する。
この関数は、ツリーのリンクをクリックしたときに、JSONデータの"url"の値を渡す。
この関数名を指定しなかった場合、hrefに"url"の値を設定する。

setProgress(ProgressObject)

子要素を動的ローディングするときに、プログレスメッセージを行うオブジェクトを指定する。動的ローディング開始時にprog_startメソッドを実行し、終了時にprog_stopメソッドを実行する。
オブジェクトを指定しなかった（デフォルト状態の）場合、プログレスメッセージオブジェクトを使用しない。
想定しているオブジェクトは、jsgt_progressbar002.jsのjsgt_ProgressBarである。
jsgt_ProgressBarについては、高橋登史朗さまのホームページ JavaScript++かも日記を参照のこと。

setTreeData(JSON Data/JSON URL)

ツリーの要素群を設定する。以下のいずれかを設定する。

JSON形式のデータを返すURL（テキスト）
JSON形式のデータ

１つのレベルの要素を以下に示す。
パターン１： {"text":表示名,"url":表示名のリンク先,showflag:true/false,"child":[１レベルの要素(複数設定可)]}
パターン２： {"text":表示名,"url":表示名のリンク先,showflag:true/false,"childurl":[１レベルの要素のURL(複数設定可)]}

パラメータ名	データ型	説明
text	string	ツリー要素の表示名
url	string	表示名のリンク先URL。リンク先を指定しない場合は、<a>タグを指定しない。>
showflag	boolean	初期時の展開・格納状態を指定する。未設定およびtrueの場合、展開状態にする。falseの場合、格納状態にする。
child	string(リスト)/null	子の要素をリストで指定する。子要素がない場合は、nullを指定する。
childurl	string(リスト)	動的ローディングを行うツリーデータのURLをリストで指定する。

詳細説明：

urlパラメータ

showflagパラメータ

childパラメータ

childurlパラメータ

createTree(TopObject/TopDivObjectName)

引数で指定したトップオブジェクトに、setTreeDataメソッドで指定した要素データをツリー状にして、子要素として追加する。
引数に指定できる値を以下に示す。

TopObject

TopDivObjectName

show

設定したツリーを表示する。トップオブジェクトのstyleのdisplayにblockを設定。

hide

設定したツリーを非表示にする。トップオブジェクトのstyleのdisplayにnoneを設定。

シーケンス

以下の順に実行する。

ツリーオブジェクト生成
setParam
setTreeData,setLinkScript,setProgress
createTree
show
hide/clear/init

実行例

ツリーオブジェクトの使用例を以下に示します。

１階層のツリー（ツリーデータを動的に読み込む）を表示する

１階層のツリーを表示します。
ついでなので、ツリーデータに初期展開・格納を行うshowflagパラメータを設定します。テスト１は、showflagパラメータにtrue（初期展開）を設定しています。設定しない場合はtrueがデフォルトです。
テスト２は、showflagパラメータにfalse（初期格納）を設定しています。

テスト１（１階層のツリー　初期展開）

テスト２（１階層のツリー　初期格納）

以下のhtmlファイルを用意します。

<html>
<head>
<script type="text/javascript" src="./ajax/lib/jslb_ajax.js"></script>
<script type="text/javascript" src="./kotatutree.js"></script>
<script type="text/javascript" src="./kotatucommon.js"></script>
<script language="javascript">
<!--
function changeContent(tURL){
parent.main.location.href=tURL;
}
var tree1=new kotatutree();
// -->
</script>
</head>
top1<br>
<div id='top1'></div>
<script language="javascript">
<!--
tree1.setTreeData('./contents_forobj.list');
tree1.createTree('top1');
tree1.show();
document.write("<textarea rows=10 cols=80>" + tree3.createTreeData + "</textarea>");
// -->
</script>
</body>
</html>

テストデータは、以下になります。テスト１とテスト２の違いは、１行目（トップのデータになります。）のshowflagが未設定（デフォルト：true）かfalseかになります。
テスト１データ

{"text":"テスト２","url":"test4_1.html","child":[
	{"text":"コンテンツ１","url":"test4_1.html","child":null},
	{"text":"コンテンツ２","child":null},
	{"text":"コンテンツ３","url":"test4_3.html","child":null}
]}

テスト２データ

{"text":"テスト１","url":"test4_1.html","showflag":false,"child":[
	{"text":"コンテンツ１","url":"test4_1.html","child":null},
	{"text":"コンテンツ２","child":null},
	{"text":"コンテンツ３","url":"test4_3.html","child":null}
]}

２階層以上のツリー（ツリーデータを埋め込む）を表示する

ツリーデータの１階層目のchildパラメータをArrayにして、２階層以下のツリーデータを設定します。
今度は、別ファイルではなくhtmlに埋め込んでみます。

テスト３（２階層以上のツリー（ツリーデータをHTMLファイルに埋め込む））

テスト３のJavaScript

<script language="javascript">
<!--
var treedata=
{text:"テスト１",url:"test4_1.html",child:[
	{text:"コンテンツ１",url:"test1.html",child:[
		{text:"コンテンツ１",url:"test4_1.html",child:[
			{text:"コンテンツ１",url:"test4_1.html",child:null},
			{text:"コンテンツ１",url:"test4_1.html",child:null}
		]},
		{text:"コンテンツ１",url:"test4_1.html",showflag:false,child:[
			{text:"コンテンツ１",url:"test4_1.html",child:null},
			{text:"コンテンツ１",url:"test4_1.html",child:null}
		]}
	]},
	{text:"コンテンツ２",child":null},
	{text:"コンテンツ３",url:"test4_3.html",child:[
		{text:"コンテンツ１",url:"test4_1.html",child:[
			{text:"コンテンツ１",url:"test4_1.html",child:null},
			{text:"コンテンツ１",url:"test4_1.html",child:null}
		]},
		{text:"コンテンツ１",url:"test4_1.html",child:[
			{text:"コンテンツ１",url:"test4_1.html",child:null},
			{text:"コンテンツ１",url:"test4_1.html",child:null}
		]}
	]}
]}
var tree1=new kotatutree();
tree1.setTreeData(treedata);
tree1.createTree('top1');
tree1.show();
// -->
</script>

パラメータを設定する

テスト４（パラメータを設定する）

パラメータを設定します。また、１つの画面に２つのツリーを表示します。
上のツリーには、以下のパラメータを設定します。

name：'test41'

imgflag:false （展開格納点にマークを使用する）

showmark:'(ﾟ.ﾟ)/'

hiddenmark:'(-_-)'

showflag:false

idtype：0（設定した順番を元に命名）

下のツリーには、以下のパラメータを設定します。

name：'test42'

imgflag:true （展開格納点にイメージを使用する）

showimg：ひよこ誕生イメージ

hiddenmark：タマゴイメージ

showflag:true

idtype：1（設定した表示名を元に命名）

テスト４のJavaScript

<script language="javascript">
<!--
function changeContent(tURL){
alert(tURL);
	location.href=tURL;
	return false;
}

var tree41=new kotatutree();
tree41.setTreeData('./test4.list');
tree41.setLinkScript('changeContent');
var param={treename:'test41',imgflag:false,showmark:'(ﾟ.ﾟ)/',hiddenmark:'(-_-)',showflag:false,idtype:0};
tree41.setParam(param);
tree41.createTree('top41');

var tree42=new kotatutree();
tree42.setTreeData('./test4.list');
tree42.setLinkScript('changeContent');
tree42.setParam({treename:'test42',imgflag:true,showimg:'./img/open.gif',hiddenimg:'./img/close.gif',showflag:true,idtype:1});
tree42.createTree('top42');

tree41.show();
tree42.show();
// -->
</script>

ツリーに対する操作（全初期化・パラメータ初期化・ツリー生成・ツリー表示・非表示

テスト５（ツリーに対する操作を行う）
以下に示した全初期化・パラメータ初期化・ツリー生成・ツリー表示・非表示のメソッドをボタン押下により実行する。

init()
clear()
createTree('top5')
show()
hide()

ツリーのデータは、テスト３と同じ（外部からの読み込みに変更）。

ツリーを展開するとき、動的にツリーデータを読み込む

テスト６（子要素を動的に読み込む）
ツリーデータの子要素を示すのにchildurlパラメータを使用して、動的ローディングする要素データのURLを指定する。
また、動的ローディングを行っているときにプログレスバーを表示する。
プログレスバーは、高橋登史朗さま作成のjsgt_progressbar002.jsのjsgt_ProgressBarをsetProgressメソッドで設定する。

テスト６のhtmlファイルの内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>tree test6</title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./css/kotatu.css" type="text/css" title="Default">
<script type="text/javascript" src="./ajax/lib/jslb_ajax.js"></script>
<script type="text/javascript" src="./ajax/lib/jsgt_progressbar002.js" charset = "utf-8"></script>
<script type="text/javascript" src="./cgi/kotatutree.js"></script>
<script type="text/javascript" src="./cgi/kotatucommon1.js"></script>
</head>
<body class="contentslist">
<h1>子要素を動的に読み込む</h1>
<br>
<div id='top6'></div>
<script language="javascript">
<!--
function changeContent(tURL){
	location.href=tURL;
	return false;
}

test1 = new jsgt_ProgressBar();

var tree6=new kotatutree();
tree6.setTreeData('./test6.list');
tree6.setLinkScript('changeContent');
tree6.setProgress(test1);
tree6.createTree('top6');

tree6.show();

// -->
</script>
<br><li>上ツリー部分のhtmlソース</li><br>
<form name="testform">
<textarea rows=10 cols=40 name="testarea">
</textarea><br>
<INPUT TYPE="button" Value="更新" onClick="document.testform.testarea.value=window.document.documentElement.outerHTML;">
</form>

<script language="javascript">
<!--
document.testform.testarea.value=tree6.createTreeData;

// -->
</script>
</body>
</html>

要素データファイルを以下に示す。
test6.list

{"text":"テスト１","url":"test4_1.html","childurl":["test6_1.list","test6_2.list","test6_3.list"]}

test6_1.list

{"text":"コンテンツ１","url":"test4_1.html","childurl":["test6_1_1.list","test6_1_2.list"]}

test6_1_1.list

{"text":"コンテンツ１１","url":"test4_1.html","child":[
	{"text":"コンテンツ１１１","url":"test4_1.html","child":null},
	{"text":"コンテンツ１１２","url":"test4_1.html","child":null}
]}

test6_1_2.list

{"text":"コンテンツ１１","url":"test4_1.html","child":[
	{"text":"コンテンツ１１１","url":"test4_1.html","child":null},
	{"text":"コンテンツ１１２","url":"test4_1.html","child":null}
]}

test6_2.list

{"text":"コンテンツ２","child":null}

test6_3.list

{"text":"コンテンツ３","url":"test4_3.html","child":[
	{"text":"コンテンツ３１","url":"test4_1.html","child":[
		{"text":"コンテンツ３１１","url":"test4_1.html","child":null},
		{"text":"コンテンツ３１２","url":"test4_1.html","child":null}
	]},
	{"text":"コンテンツ３２","url":"test4_1.html","child":[
		{"text":"コンテンツ３２１","url":"test4_1.html","child":null},
		{"text":"コンテンツ３２２","url":"test4_1.html","showflag":false,"child":null}
	]}
]}

修正履歴

2006/05/01	リリース
2006/05/06	動的ローディングでの問題「childurlに複数設定すると、タグのidが重複する、および全て端になる」を解決しました。非同期でローディングしたのが問題でした。途中の要素を動的ローディングする場合は、同期でローディングするように修正しました。
2006/05/12	「１つのHTML中に２つ以上のオブジェクト作成すると最後のオブジェクトのみ生成される」問題を解決しました。非同期でローディングしたのが問題でした。途中の要素を動的ローディングする場合は、同期でローディングするように修正しました。（非同期でできるか検討中です。というか今の時点ではAJAXではないな。SJAX？）