[javascript] brownie-json-dom.js サンプル
先日のJSONオブジェクトツリーからHTMLを生成するサンプルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>brownie-json-dom.js sample</title>
<style type="text/css"><!--
table.software-list {
border-collapse: collapse;
empty-cells: show;
}
th {
background: Menu;
border: 1px solid black;
}
td {
border: 1px solid black;
}
--></style>
<script language="javascript" type="text/javascript" src="../js/prototype.js" ></script>
<script language="javascript" type="text/javascript" src="../js/brownie-json-dom.js" ></script>
<script language="javascript" type="text/javascript" ><!--
Event.observe( window, "load", function() {
var tableData = [
{ id: 1, name: "Firefox1.0.7", descriptions: "ブラウザ。デバッグに便利" },
{ id: 2, name: "J2SE 1.4.2", descriptions: "java使ってますからね" },
{ id: 3, name: "Apache 2.0.5２", descriptions: "Subversionにも使ってます" }
];
var tableJsonDom = { tagName: "table", className:"software-list", body: [
{ tagName: "thead", body: [
{ tagName: "tr", style: "text-align:center", body: [
{ tagName: "th", body: "id" },
{ tagName: "th", body: "name" },
{ tagName: "th", body: "descriptions" }
] }
] },
{ tagName: "tbody", body: [] }
] };
for(var i = 0; i < tableData.length; i++) {
var rowData = tableData[i];
var tr = { tagName: "tr", body: [
{ tagName: "td", style:"text-align:right", width:"20px", body: rowData.id },
{ tagName: "td", style:"text-align:left", width:"100px", body: rowData.name },
{ tagName: "td", style:"text-align:left", body: rowData.descriptions }
] };
tableJsonDom.body[1].body.push(tr);
}
var builder = new JsonDomBuilder("body", document);
var tableElement = builder.execute( tableJsonDom );
$("softwareList").appendChild( tableElement );
}, false);
--></script>
</head>
<body>
<div id="softwareList"></div>
</body>
</html>tableDataというテーブルの元データがあったとして、こいつをtableで表現したい場合には上記のように書けます。
まずtableJsonDomというテーブルの固定部をJSONで定義しておいて、for文でそのtbodyの部分に、tableDataの各データを行として追加していきます。んで、JsonDomBuilderを生成してtableDataについて実行。出来上がったTABLE要素をsoftwareListというDIV要素に挿入する、ということをやってます。
tableJsonDomの部分はHTMLで書いちゃっても全然OKですね。tbody要素にidを付けておいてそこにappendChildしてやれば同じですね。
実際のアプリケーションでは、tableDataはprorotype.jsのAjax.Requestとかjson-rpc-XXXとかで持ってくることになるでしょう。
