DataTable Control: Textual Data Over XHR（その１）

Ajax YUI Javascript Mashup XHR DataTable

JSON、XMLに続き、このExampleでは、TextデータをConnection Managerを経由で取得して、以下のようなテーブルを作成する。

YUIのExampleでは、2つの表が1つのExampleで示されているが、（ソースが煩雑になるため）一つずつ分けたサンプルとする。

表を見ると、先のJSON、XMLのサンプルで利用したYAHOO! Local Searchから取得したデータと同じになっているが、データは以下に示すテキスト形式であり、HTTPサーバー配下に配置する（このデータはYUI2.6のDownloadファイルの/datatable/assets/php下にある）。したがって、PHPプログラムのようなProxyプログラムを介すことなく、データを取得する。

Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA--
Pizza Depot|919 E Duane Ave|Sunnyvale|(408) 245-7760|3.5|http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--
Pizza Hut|464 N Mathilda Ave|Sunnyvale|(408) 735-1900|2.5|http://local.yahoo.com/details?id=21340811&stx=pizza&csz=Sunnyvale+CA&ed=syVWvq160Szz0Q60Q8N7uetWGoUIbThLIdulmQLubJ29CuU7wpxDvDxrLF4md791a4jW7kNRr9eSVQ--
Giovannis Pizzeria|1127 N Lawrence Expy|Sunnyvale|(408) 734-4221|4.5|http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi
Round Table Pizza|415 N Mary Ave|Sunnyvale|(408) 733-1365|5|http://local.yahoo.com/details?id=21329046&stx=pizza&csz=Sunnyvale+CA&ed=OkhHFa160Sx2UXqpaqXDZAGyyKWrCO9wfqP24Mur1nNB2pqgQsi3DQxeSEK_Uj9fxQN4zNax
Vitos Famous Pizza|1155 Reed Ave|Sunnyvale|(408) 246-8800|4.5|http://local.yahoo.com/details?id=21332026&stx=pizza&csz=Sunnyvale+CA&ed=QTqeMK160Sx0Mril0Jnu_RK0RF4vTvEspLb2s60hJTic2.RapYE82B6edOm18LAox7KOqkw-
Round Table Pizza|101 Town And Countr|Sunnyvale|(408) 736-2242|3|http://local.yahoo.com/details?id=21340803&stx=pizza&csz=Sunnyvale+CA&ed=SiKr2K160SwJxDEvf_eAwROvFMpfCIqsVX3dSyYtvj6HomUPpdS92g9AIoaoZNtg.WNSGcT4hpk1JxxT
Round Table Pizza|860 Old San Francisco Rd|Sunnyvale|(408) 245-9000|3|http://local.yahoo.com/details?id=21340791&stx=pizza&csz=Sunnyvale+CA&ed=NF3MAq160SzKHt2S1yk7tJKtIMvbW44yNlckp8Y5veL7w8DWvagJYLH2tGehl1cPcLGbR4kzMTi4cf1U7iP6YA--
Domino's Pizza|992 W El Camino Real|Sunnyvale|(408) 736-3666|4|http://local.yahoo.com/details?id=21341882&stx=pizza&csz=Sunnyvale+CA&ed=_tzLZq160SyF.4GddMA07QiACQkYc84nqI0j3hvsAcfMemwlBCiezUltSm8_ppCH1Bo8SlklBj1QhuRp
Little Caesars Pizza|1039 Sunnyvale Saratoga Rd|Sunnyvale|(408) 245-0607|3|http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ

見ての通り、デリミッター（フィールドの区切り文字）はパイプ（"|"）となっている。

これまでのExampleと基本的には同じ（DataSourceが一種のDAOとなって、データ形式の違いを隠蔽している）なので、説明は不要と思われる。

以下にJavascriptを含む、HTMLの全文を示す。
上のTextデータ（text_proxy.txt）は、HTMLを配置したディレクトリ下のdataディレクトリにおいている。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="scripts/yui/connection/connection-min.js"></script> 
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datatable/datatable-min.js"></script> 

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}
</style>

<script type="text/javascript"> 
YAHOO.util.Event.addListener(window, "load", function() {

	YAHOO.example.XHR_Text = function() {

    	// カスタムフォーマッターの定義
    	// elCell; td、oRecord; レコードオブジェクト、sData: ※１でkey定義した変数値
        var formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "<a href='" + oRecord.getData("Url") + "' target='_blank'>" + sData + "</a>";
        };
 
        var myColumnDefs = [
            // ※１
            {key:"Name", sortable:true, formatter:formatUrl},
            {key:"Phone"},
            {key:"City"},
            {key:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
 
        ];
 
        var myDataSource = new YAHOO.util.DataSource("data/text_proxy.txt");
        myDataSource.responseSchema = {
            // 行区切り
            recordDelim: "\n",
            // フィールド区切り
            fieldDelim: "|",
            fields: ["Name","Address","City","Phone","Rating","Url"]
        };
 
        var myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs,
                myDataSource, {caption:"Example: XHRでテキストデータを取得する"});

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>textデータを取得して、テーブルに表示します。</p>
<div id="text"></div>
</div>
</body> 
</html>