Yahoo! YUI DataTableでXMLを表示する方法
スポンサーリンク
Yahoo!のYUIライブラリのDataTableを使ってみた。
DataTableを使うと、JavaScriptの配列やJSON、XMLなどを簡単にテーブルに整形することができる。
表示するXML
表示する項目
上記のXMLの item の title,link,pubDate を表示する。
テーブルの見出し部分の表示名(label)とタグ(key)対応付けをする(しないと、keyがそのまま表示される)。
sortableをtrueに指定すると、そのカラムでソートすることができる。
レスポンス形式はXML(YAHOO.util.DataSource.TYPE_XML)を指定する。
resultNodeは、"item"を指定する(XMLによる)。
XMLから抜き出すフィールドを fields に指定する。今回は、title,link,pubDateの３つ。
asyncRequestでXMLデータを取得する。第２引数がXMLへのパスになる。
サンプルコード
非常に簡単にXMLをキレイに表示できる。
参考
http://developer.yahoo.com/yui/datatable/
DataTableを使うと、JavaScriptの配列やJSON、XMLなどを簡単にテーブルに整形することができる。
表示するXML
<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:blogChannel="http://backend.userland.com/blogChannelModule"> <channel> <title>Yahoo!ニュース・トピックス - コンピュータ</title> <link>http://dailynews.yahoo.co.jp/fc/computer/</link> <description>Yahoo! JAPANのニュース・トピックスで取り上げている最新の見出しを提供しています。</description> <language>ja</language> <pubDate>Tue, 09 Oct 2007 22:21:55 +0900</pubDate> <item> <title>「iPhoneロックは違法」と提訴</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/computer/iphone/</link> <pubDate>Tue, 09 Oct 2007 21:02:03 +0900</pubDate> <enclosure url="http://i.yimg.jp/images/icon/photo.gif" /> </item> <item> <title>Google、ビデオ版AdSense開始</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/computer/internet_advertisement/</link> <pubDate>Tue, 09 Oct 2007 14:41:12 +0900</pubDate> </item> <item> <title>KDDI 100万人に通信料誤請求</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/economy/kddi/</link> <pubDate>Tue, 09 Oct 2007 21:53:31 +0900</pubDate> </item> <item> <title>ニコニコブックマーク早くも終了</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/computer/social_bookmark/</link> <pubDate>Tue, 09 Oct 2007 14:31:15 +0900</pubDate> <enclosure url="http://i.yimg.jp/images/icon/photo.gif" /> </item> <item> <title>「ネットで個人写真集」が人気</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/computer/digital_images/</link> <pubDate>Tue, 09 Oct 2007 11:03:13 +0900</pubDate> </item> <item> <title>4万円切る廉価版PS3発売へ</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/entertainment/play_station_3/</link> <pubDate>Tue, 09 Oct 2007 20:25:35 +0900</pubDate> <enclosure url="http://i.yimg.jp/images/icon/photo.gif" /> </item> <item> <title>空気読む力 テストで数値化</title> <link>http://rd.yahoo.co.jp/rss/l/topics/topics/*http://dailynews.yahoo.co.jp/fc/computer/internet/</link> <pubDate>Mon, 08 Oct 2007 22:30:42 +0900</pubDate> </item> </channel> </rss>
表示する項目
上記のXMLの item の title,link,pubDate を表示する。
テーブルの見出し部分の表示名(label)とタグ(key)対応付けをする(しないと、keyがそのまま表示される)。
sortableをtrueに指定すると、そのカラムでソートすることができる。
var myColumnDefs = [
{key:"title",label:"タイトル", sortable: true },
{key:"link",label:"リンク" },
{key:"pubDate",label:"日時", sortable: true }
];
レスポンス形式はXML(YAHOO.util.DataSource.TYPE_XML)を指定する。
resultNodeは、"item"を指定する(XMLによる)。
XMLから抜き出すフィールドを fields に指定する。今回は、title,link,pubDateの３つ。
this.myDataSource = new YAHOO.util.DataSource(xmlDoc);
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
this.myDataSource.responseSchema = {
resultNode: "item",
fields: ["title","link","pubDate"]
};
asyncRequestでXMLデータを取得する。第２引数がXMLへのパスになる。
this.getXML = YAHOO.util.Connect.asyncRequest("GET",
"yui-DataTable.xml",
this.connectionCallback);
サンプルコード
<!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>Yahoo! UI Library: DataTable</title>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.3.1/build/datatable/assets/skins/sam/datatable.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/datasource/datasource-beta-min.js"></script>
<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) -->
<script type="text/javascript" src="http://www.json.org/json.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>
<!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/dragdrop/dragdrop-min.js"></script>
<!-- OPTIONAL: Calendar (enables calendar editors) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/calendar/calendar-min.js"></script>
<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/datatable/datatable-beta-min.js"></script>
</head>
<body class="yui-skin-sam">
<h1>YUI DataTableの使い方</h1>
<p>
2007/10/09 に
http://dailynews.yahoo.co.jp/fc/computer/rss.xml
から取得したXMLデータ。
</p>
<div id="myContainer"></div>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Local_XML = new function() {
this.connectionCallback = {
success: function(o) {
var xmlDoc = o.responseXML;
var myColumnDefs = [
{key:"title",label:"タイトル", sortable: true },
{key:"link",label:"リンク" },
{key:"pubDate",label:"日時", sortable: true }
];
this.myDataSource = new YAHOO.util.DataSource(xmlDoc);
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
this.myDataSource.responseSchema = {
resultNode: "item",
fields: ["title","link","pubDate"]
};
this.myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, this.myDataSource);
},
failure: function(o) {
}
};
this.getXML = YAHOO.util.Connect.asyncRequest("GET",
"yui-DataTable.xml",
this.connectionCallback);
};
});
</script>
</body>
</html>
非常に簡単にXMLをキレイに表示できる。
参考
http://developer.yahoo.com/yui/datatable/
スポンサーリンク
スポンサーリンク
いつもシェア、ありがとうございます！
もっと情報を探しませんか？
関連記事
最近の記事
- パナソニック ジェットウォッシャードルツ EW-DJ61-Wのホースの修理
- LinuxセキュリティモジュールIntegrity Policy Enforcement
- アマゾンのEcho Show 5を買ったのでレビューします
- アマゾンのサイバーマンデーはAlexa Echo Show 5が安い
- Android スマートフォン OnePlus 7T と OnePlus 7の違い
- Android スマートフォン OnePlus 7 をAndroid10にアップデートしてみた
- クレジットカードのバーチャルカードの比較のまとめ
- 活動量計 Xiaomi Mi Band 4を買ってみたのでレビュー
- Android スマートフォン OnePlus 7 のレビュー
- AliExpressでスマートフォンを買い物してみた
- パソコンのホコリ対策 レンジフードフィルターと養生テープ
- 80PLUS GOLDのPC電源ユニットAntec NeoEco 750 Goldのレビュー
- イギリスの付加価値税 VAT は払い戻しを受けられる
- イギリスのロンドンでスーツケースなど荷物を預けられる場所は
- イギリスのロンドンで地下鉄やバスに乗るならオイスターカードを使おう
- イギリスのヒースロー空港からロンドン市内への行き方
- 航空便でほかの航空会社に乗り継ぎがある場合のオンラインチェックイン
- SFC会員がANA便ではなくベトナム航空のコードシェアを試して解ったこと
- ベトナムの入国審査でeチケットの掲示が必要だった話
- シアトルの交通ICカードはオルカカード（Orca)です
人気のページ
- Windows7 IME 辞書ツールで単語の登録に失敗しました
- C言語 popen()でコマンドを実行して出力を読み込む
- Windows7で休止状態にする方法
- CentOS MySQLの起動、停止、再起動
- loggerコマンドでsyslogにエラーを出力する方法
- パソコンパーツの買取をしてくれる店のまとめ
- Java Mapの使い方 get(),put(),remove(),size(),clear()
- 楽天のRポイントカードを作ってみた
- iPhone 5 から iPhone 6 に乗り換えたのでレビュー
- netstatコマンドのステータスの意味
スポンサーリンク
過去ログ
2020 : 01 02 03 04 05 06 07 08 09 10 11 122019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12