DataTable Control: Progressive Enhancement
このExampleは、「DataTable Control: Basic Example」をやった後では以下の意味だけ持つものと考えていいと思う。
- markupで記述したテーブル（tableタグ）から、下のようなテーブル表現を得る。
下の図は、YUIのExampleを
- 日付をmm/dd/yyyy形式から、yyyy/mm/ddに変えた
- 通貨記号を"$"(Dollar Mark)から、"¥"(Yen Mark)に変えた
ものである。
markupで記述したテーブルから、上のようなテーブルを得るには、
- tableをmarkupで記述する際に、見出し（theader）とボディー（tbody）を分ける。
- 以下のような書き方で、DataSourceの定義をする。
myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
（ここで、"account"とは、tableにつけたid）
- tableの各要素（td）を読み込む際に、フィールド名と、parserの指定をする。parserはカスタムで作成できる。
以下にJavascriptを含むHTMLの全文を示す。
テーブルの幅の変更（resize）を指定してみたが、このケースでは、効かないようである。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Ajax_Sampling</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/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/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; width: 560px; height: auto; border:1px dashed #999999; } /* custom styles for this example */ .yui-skin-sam .yui-dt-liner { white-space:nowrap; } </style> <script type="text/javascript"> YAHOO.namespace("EGP"); YAHOO.EGP.SimpleDataTable = function() { var myDataSource; var myDataTable; var myColumnDefs = [ {key:"due", label:"Due Date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true}, {key:"account", label:"Account Number", sortable:true, // TYPE_HTMLTABLEの場合、resizeが効かない？？ resizeable:true}, {key:"quantity", label:"Quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true}, {key:"amount", label:"Amount Due", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true} ]; // カスタム・パーサー // markupで ¥150.00 なっているものを、150.00のfloatに直す。 var parseNumberFromCurrency = function(sString) { // Remove dollar sign and make it a float return parseFloat(sString.substring(1)); }; return{ init: function() { myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts")); myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; // HTMLTABLEの頭からフィールド名をつけて、parseしてデータにする。 myDataSource.responseSchema = { fields: [{key:"due", parser:"date"}, {key:"account"}, {key:"quantity", parser:"number"}, // 上でprovateに定義しているカスタムパーサーを使う。 {key:"amount", parser:parseNumberFromCurrency} ] }; myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource, { caption:"Example: Progressively Enhanced Table from Markup", sortedBy:{key:"due",dir:"desc"}, // Yen markを出すには、、、、html表現でやっとでた。 currencyOptions:{prefix: "¥", decimalPlaces:2, decimalSeparator:".", thousandsSeparator:","}, // 年月日に変更 dateOptions:{format:"%Y/%m/%d", locale:"ja"} } ); }, // おまじない oDS: myDataSource, oDT: myDataTable }; }(); //DOMが完全にloadされたら、サンプルを初期化する。 YAHOO.util.Event.onDOMReady( //DomReadyイベントで発火するハンドラ YAHOO.EGP.SimpleDataTable.init, //ハンドラに渡すオブジェクト（関数） YAHOO.EGP.SimpleDataTable, //ハンドラは、上記のオブジェクトのスコープをもつ。 true ); </script> </HEAD> <BODY class="yui-skin-sam"> <div id="main"> <p> MarkupからDataTableを作るサンプルです。 </p> <div id="markup"> <table id="accounts"> <!-- theadはHTML_TABLEとして読み込まれない --> <thead> <tr> <th>Due Date</th> <th>Account Number</th> <th>Quantity</th> <th>Amount Due</th> </tr> </thead> <tbody> <tr> <td>1999/1/23</td> <td>29e8548592d8c82</td> <td>12</td> <td>¥150.00</td> </tr> <tr> <td>1999/5/19</td> <td>83849</td> <td>8</td> <td>¥60.00</td> </tr> <tr> <td>1999/8/9</td> <td>11348</td> <td>1</td> <td>¥34.99</td> </tr> <tr> <td>2000/1/23</td> <td>29e8548592d8c82</td> <td>10</td> <td>¥1.00</td> </tr> <tr> <td>2000/4/28</td> <td>37892857482836437378273</td> <td>123</td> <td>¥33.32</td> </tr> <tr> <td>2001/1/23</td> <td>83849</td> <td>5</td> <td>¥15.00</td> </tr> <tr> <td>2001/9/30</td> <td>224747</td> <td>14</td> <td>¥56.78</td> </tr> </tbody> </table> </div> </div> </BODY> </HTML>
