Ajaxの習作：MSDNのツリー（ぽい物）を実現する。

フェーズ２

　JSON形式のデータを使う（スクリプトに埋め込む）

ツリーデータは、HTMLに埋め込んでも実現できるのですが、スマートではありません。
htmlファイルとは別のファイルにツリーデータだけを格納して置く方が使い勝手が良くなります。

ツリー状のデータを扱えるデータ形式と言うと、XMLが第一に思い浮かぶ事でしょう。
Ajaxは、XMLを扱い易いのですが、しかし、ツリーデータとしてはちょっと大袈裟です。
JavaScriptと親和性の高いJSONがあります。JSONは、軽量で加工がしやすいので、JSONを使用します。
JSONデータの説明は、ここを参照してください。

本フェーズでは、ツリーデータをhtmlファイルに埋め込みます。（初めに書いたことはどこへ行ったのかなぁ？きっとフェーズ３に行ったに違いない。）
別ファイルを読み込むのは一手間必要ですので、今回は埋め込みと言うことで・・・。
と、その前にツリーを表示するためのデータの設計をします。
ツリーに最低限必要なものとは、

要素の構造的には、１つの要素とその子の要素（複数）。一番上の要素は１つのみ。
１つの要素には、表示名称、リンク先。

といったところでしょうか。
これをJSON形式で記述すると以下のようになります。

{"text":"トップページ", "url":"top.html","child":[
	{"text":"子１", "url":null, "child":[
		{"text":"孫１１", "url":grandchild11.html, "child":null},
		{"text":"孫１２", "url":null, "child":[
			{"text":"ひ孫１２１", "url":great-grandchild121,html, "child":null}
		]}
	]},
	{"text":"子２", "url":null, "child":[
		{"text":"孫２１", "url":grandchild21,html, "child":null},
		{"text":"孫２２", "url":null, "child":[
			{"text":"ひ孫２２１", "url":great-grandchild221,html, "child":null}
		]}
	]}
]}

上記のデータをツリーにして見ます。今回は、＋/－記号のところでツリーの展開・格納を出来るようにします。

ソースは、以下になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax Tree</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 language="javascript">
<!--
var listContents = {
"text":"トップページ", "url":"top.html","child":[
	{"text":"子１", "url":null, "child":[
		{"text":"孫１１", "url":"grandchild11.html", "child":null},
		{"text":"孫１２", "url":null, "child":[
			{"text":"ひ孫１２１", "url":"great-grandchild121.html", "child":null}
		]}
	]},
	{"text":"子２", "url":null, "child":[
		{"text":"孫２１", "url":"grandchild21.html", "child":null},
		{"text":"孫２２", "url":null, "child":[
			{"text":"ひ孫２２１", "url":"great-grandchild221.html", "child":null}
		]}
	]}
]};

function changeContent(tURL){
	parent.main.location.href=tURL;
}
function changeDiv(tName, tMsg)
{
	if(document.all || document.getElementById) {
		if(document.all) {
			document.all(tName).innerHTML=tMsg;
		} else {
			document.getElementById(tName).innerHTML=tMsg;
		}
	} else {
		if(document.layers) {
			with(document.layers(tName)) {
				document.open();
				document.write(tMsg);
				document.close();
			}
		}
	}
}

function getDiv(tName)
{
	var obj=null;
	if(document.all || document.getElementById) {
		if(document.all) {
			obj = document.all.item(tName);
		} else {
			obj = document.getElementById(tName);
		}
	} else {
		if(document.layers) {
			obj = document.layers(tName);
		}
	}
	return obj;
}
function exMenu(tName)
{
	var i;
	tMenu = getDiv(tName).style;
	if (tMenu.display=="none") {
		tMenu.display = "block";
		changeDiv(tName + "_", "－");
	} else {
		tMenu.display = "none";
		changeDiv(tName + "_", "＋");
	}
}

function writeList(objList, level, pareContName, bIsEdge) {
	var i;
	var len=0;
	var contentsName='';
	var objChildList=null;
	var id;
	var contentsName

	document.write('<p class="nowrap">');
	if(level > 1){
		for(i=1;level>i;i++){
			if(!bIsEdge[i]){
				document.write('│');
			}else{
				document.write('　');
			}
		}
	}
	if(level>0){
		if(!bIsEdge[level]){
			document.write('├');
		}else{
			document.write('└');
		}
	}

	contentsName=objList.text;
	id=pareContName+'_'+contentsName;

	if(objList.child!=null) {
		objChildList=objList.child;
		document.write('<a class="brunch" onclick="exMenu(\''+id+'\')"><span class="brunch" id="'+id+'_'+'">');
		document.write('－</span></a>');
	} else {
		document.write('<span class="nobrunch">・</span>');
	}
	if(objList.url!=null){
		document.write(' <a class="nowrap" href="'+objList.url+'")">'+contentsName+'</a><br>');
	}else{
		document.write(' '+contentsName+'<br>');
	}
	document.write('</p>');

	if(objChildList!=null){
		document.write('<div class="nowrap" id="'+id+'" style="DISPLAY:block">');
		len=objChildList.length;
		var childID;
		for(i=0;len>i;i++){
			bIsEdge[level+1]=(len-1==i);
			childID=id;
			this.writeList(objChildList[i],level+1,childID,bIsEdge);
		}
		document.write('</div>');
	}
}
// -->
</script>
</head>
<script langage="javascript">
var bIsEdge=new Array();
bIsEdge[0]=true;
writeList(listContents, 0, "", bIsEdge);
</script>
</body>
</html>

フェーズ２は以上でおしまい。次回フェーズ３ではJSONデータを動的に読み込みます。