DataTable Control: Textual Data Over XHR（その２）
このExampleでは、下の図のようなテーブルを作成する。
この図を見る限りにおいて、「DataTable Control: Textual Data Over XHR（その１）」と違いがないが、HTTPサーバー下におくTextファイルに、以下のような見出し行が入っている。よく見かけるパターンである。
Restaurant|Location|Town|Telephone|Stars|Url 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で例示されているのだが、簡単な解法がとられている。要は、
- columnヘッダー（見出し）はscript上で定義してしまい、取り出したデータの1行目は、「テーブルをレンダリングする前に」取り除いてしまう。
としている。
この「テーブルをレンダリングする前に」というところで、DataSourceの.doBeforeCallbackというコールバックを利用する。具体的には、この部分は以下のようなコードとなっている。
myDataSource.doBeforeCallback
= function(oRequest, oFullResponse, oParsedResponse) {
oParsedResponse.results.shift();
return oParsedResponse;
};
ここで、oParsedResponse.resultsの内容は、parseされて
[
{Url => Url
, Stars => Stars, Telephone => Telephone, Town => Town, Location => Location, Restaurant => Restaurant},
{Url => http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA--
, Stars => 4, Telephone => (408) 732-3030, Town => Sunnyvale, Location => 615 Caliente Dr, Restaurant => Domino's Pizza},
{Url => http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--
, Stars => 3.5, Telephone => (408) 245-7760, Town => Sunnyvale, Location => 919 E Duane Ave, Restaurant => Pizza Depot},
{Url => http://local.yahoo.com/details?id=21340811&stx=pizza&csz=Sunnyvale+CA&ed=syVWvq160Szz0Q60Q8N7uetWGoUIbThLIdulmQLubJ29CuU7wpxDvDxrLF4md791a4jW7kNRr9eSVQ--
, Stars => 2.5, Telephone => (408) 735-1900, Town => Sunnyvale, Location => 464 N Mathilda Ave, Restaurant => Pizza Hut},
{Url => http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi
, Stars => 4.5, Telephone => (408) 734-4221, Town => Sunnyvale, Location => 1127 N Lawrence Expy, Restaurant => Giovannis Pizzeria},
{Url => http://local.yahoo.com/details?id=21329046&stx=pizza&csz=Sunnyvale+CA&ed=OkhHFa160Sx2UXqpaqXDZAGyyKWrCO9wfqP24Mur1nNB2pqgQsi3DQxeSEK_Uj9fxQN4zNax
, Stars => 5, Telephone => (408) 733-1365, Town => Sunnyvale, Location => 415 N Mary Ave, Restaurant => Round Table Pizza},
{Url => http://local.yahoo.com/details?id=21332026&stx=pizza&csz=Sunnyvale+CA&ed=QTqeMK160Sx0Mril0Jnu_RK0RF4vTvEspLb2s60hJTic2.RapYE82B6edOm18LAox7KOqkw-
, Stars => 4.5, Telephone => (408) 246-8800, Town => Sunnyvale, Location => 1155 Reed Ave, Restaurant => Vitos Famous Pizza},
{Url => http://local.yahoo.com/details?id=21340803&stx=pizza&csz=Sunnyvale+CA&ed=SiKr2K160SwJxDEvf_eAwROvFMpfCIqsVX3dSyYtvj6HomUPpdS92g9AIoaoZNtg.WNSGcT4hpk1JxxT
, Stars => 3, Telephone => (408) 736-2242, Town => Sunnyvale, Location => 101 Town And Countr, Restaurant => Round Table Pizza},
{Url => http://local.yahoo.com/details?id=21340791&stx=pizza&csz=Sunnyvale+CA&ed=NF3MAq160SzKHt2S1yk7tJKtIMvbW44yNlckp8Y5veL7w8DWvagJYLH2tGehl1cPcLGbR4kzMTi4cf1U7iP6YA--
, Stars => 3, Telephone => (408) 245-9000, Town => Sunnyvale, Location => 860 Old San Francisco Rd, Restaurant => Round Table Pizza},
{Url => http://local.yahoo.com/details?id=21341882&stx=pizza&csz=Sunnyvale+CA&ed=_tzLZq160SyF.4GddMA07QiACQkYc84nqI0j3hvsAcfMemwlBCiezUltSm8_ppCH1Bo8SlklBj1QhuRp
, Stars => 4, Telephone => (408) 736-3666, Town => Sunnyvale, Location => 992 W El Camino Real, Restaurant => Domino's Pizza},
{Url => http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ
, Stars => 3, Telephone => (408) 245-0607, Town => Sunnyvale, Location => 1039 Sunnyvale Saratoga Rd, Restaurant => Little Caesars Pizza}
]という配列となるので、shiftでこの最初の要素を取り除いてしまう。
以下にJavascriptを含む、HTMLの全文を示す。
上のTextデータ（text_with_headers_proxy.txt；ダウンロードファイルの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:"Restaurant", sortable:true, formatter:formatUrl}, {key:"Location"}, {key:"Town"}, {key:"Stars", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; var myDataSource = new YAHOO.util.DataSource("data/text_with_headers_proxy.txt"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; myDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Restaurant","Location","Town","Telephone","Stars","Url"] }; // Upgrade note: As of 2.5.0, the second argument is the full type-converted // response from the live data, and not the unconverted raw response // CallBackを呼ぶ（テーブル作成の）前に、oParsedResponse.resultsは配列型で戻ってくるので、その第一要素を除いてしまう。 myDataSource.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse) { oParsedResponse.results.shift(); return oParsedResponse; }; myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs, myDataSource, {caption:"Example: 最初の行が見出しの場合"}); 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>
