「javascript/Yahoo UI Library/DataTable」の編集履歴（バックアップ）一覧はこちら
「javascript/Yahoo UI Library/DataTable」(2008/11/01 (土) 18:51:45) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#contents
* javascriptで表（データテーブル）を表示する（Yahoo UI Library: DataTable（2.6.0））
- Yahoo UI LibraryのDataTableライブラリ -- [[http://developer.yahoo.com/yui/datatable/:http://developer.yahoo.com/yui/datatable/]]
- データはYahoo UI LibraryのDataSourceを使用する。
** サンプル
- 簡単なサンプル
#html2(){{{
<div id="myDataTable"></div>
}}}
*** 事前準備
- 必要ライブラリの読み込み（使用する機能によって増減します）
#highlight(html){{
<!-- Dependencies -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
}}
- bodyのスタイル指定
#highlight(html){{
<body class="yui-skin-sam">
}}
- 表を置く場所指定
#highlight(html){{
<div id="myDataTable"></div>
}}
- データソースなどの準備
#highlight(linenumber,javascript){{
YAHOO.util.Event.onDOMReady(function() {
//データ
var myData = [
{name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
{name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
{name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
{name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
{name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
];
//データソース
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
{key:"kokugo", parser:"number"},
{key:"sugaku", parser:"number"},
{key:"rika", parser:"number"},
{key:"shakai", parser:"number"},
{key:"eigo", parser:"number"}
]
};
//以下データテーブルの処理記述・・・
//データテーブル
var myColumnDefs = [
{key:"name", label:"名前"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
});
}}
#javascript(){{
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator-min.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(function() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stylesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
//データ
var myData = [
{name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
{name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
{name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
{name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
{name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
];
//データソース
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
{key:"kokugo", parser:"number"},
{key:"sugaku", parser:"number"},
{key:"rika", parser:"number"},
{key:"shakai", parser:"number"},
{key:"eigo", parser:"number"}
]
};
//データテーブル
var myColumnDefs = [
{key:"name", label:"名前"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
});
-->
</script>
}}
** 逆引き
*** ソートさせたい。
- カラム定義設定箇所で &color(red){sortable:true}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", sortable:true},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- 数値を数値でソートさせるにはデータソースのresponseSchema設定箇所で&color(red){parser:"number"};を指定すること。&br;指定しないと文字列ソートされる。
*** カラムの幅を調整できるようにしたい。
- カラム定義設定箇所で &color(red){resizeable:true}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", resizeable:true},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- 指定しても動かない場合、dragdropライブラリを追加してるか確認
*** 数値を桁区切りしたい。
- カラム定義設定箇所で &color(red){formatter:"number"}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", formatter:"number"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- formatterオプションは他にも"button"、"checkbox"、"currency"、"date"、etc..などの設定値がある。また、独自のフォーマットも作成できる。
*** ページ繰り機能をつけたい。
- YAHOO.widget.Paginatorを使用する。
#highlight(linenumber,javascript){{
var oConfigs = {
paginator: new YAHOO.widget.Paginator({
rowsPerPage: 30
})
};
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
}}
-- paginatorライブラリ,cssを追加する必要がある。
*** マウスオーバーで行をハイライトさせたい。
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
}}
*** 行を選択状態にしたい。
- 1行選択
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
myDataTable.set("selectionMode", "single");
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
}}
- 複数行選択可
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
}}
#contents
* javascriptで表（データテーブル）を表示する（Yahoo UI Library: DataTable（2.6.0））
- Yahoo UI LibraryのDataTableライブラリ -- [[http://developer.yahoo.com/yui/datatable/:http://developer.yahoo.com/yui/datatable/]]
- データはYahoo UI LibraryのDataSourceを使用する。
** サンプル
- 簡単なサンプル
#html2(){{{
<div id="myDataTable"></div>
}}}
*** 事前準備
- 必要ライブラリの読み込み（使用する機能によって増減します）
#highlight(html){{
<!-- Dependencies -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
}}
- bodyのスタイル指定
#highlight(html){{
<body class="yui-skin-sam">
}}
- 表を置く場所指定
#highlight(html){{
<div id="myDataTable"></div>
}}
- データソースなどの準備
#highlight(linenumber,javascript){{
YAHOO.util.Event.onDOMReady(function() {
//データ
var myData = [
{name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
{name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
{name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
{name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
{name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
];
//データソース
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
{key:"kokugo", parser:"number"},
{key:"sugaku", parser:"number"},
{key:"rika", parser:"number"},
{key:"shakai", parser:"number"},
{key:"eigo", parser:"number"}
]
};
//以下データテーブルの処理記述・・・
//データテーブル
var myColumnDefs = [
{key:"name", label:"名前"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
});
}}
#javascript(){{
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator-min.js"></script>
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(function() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stylesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
//データ
var myData = [
{name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
{name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
{name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
{name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
{name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
];
//データソース
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
{key:"kokugo", parser:"number"},
{key:"sugaku", parser:"number"},
{key:"rika", parser:"number"},
{key:"shakai", parser:"number"},
{key:"eigo", parser:"number"}
]
};
//データテーブル
var myColumnDefs = [
{key:"name", label:"名前"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
});
-->
</script>
}}
** 逆引き
*** ソートさせたい。
- カラム定義設定箇所で &color(red){sortable:true}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", sortable:true},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- 数値を数値でソートさせるにはデータソースのresponseSchema設定箇所で&color(red){parser:"number"};を指定すること。&br;指定しないと文字列ソートされる。
*** カラムの幅を調整できるようにしたい。
- カラム定義設定箇所で &color(red){resizeable:true}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", resizeable:true},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- 指定しても動かない場合、dragdropライブラリを追加してるか確認
*** 数値を桁区切りしたい。
- カラム定義設定箇所で &color(red){formatter:"number"}; を指定
#highlight(linenumber,javascript){{
var myColumnDefs = [
{key:"name", label:"名前", formatter:"number"},
{key:"kokugo", label:"国語"},
{key:"sugaku", label:"数学"},
{key:"rika", label:"理科"},
{key:"shakai", label:"社会"},
{key:"eigo", label:"英語"}
];
}}
-- formatterオプションは他にも"button"、"checkbox"、"currency"、"date"、etc..などの設定値がある。また、独自のフォーマットも作成できる。
*** ページ繰り機能をつけたい。
- YAHOO.widget.Paginatorを使用する。
#highlight(linenumber,javascript){{
var oConfigs = {
paginator: new YAHOO.widget.Paginator({
rowsPerPage: 30
})
};
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
}}
-- paginatorライブラリ,cssを追加する必要がある。
*** マウスオーバーで行をハイライトさせたい。
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
}}
*** 行を選択状態にしたい。
- 1行選択
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.set("selectionMode", "single");
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
}}
- 複数行選択可
#highlight(linenumber,javascript){{
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
}}
表示オプション
横に並べて表示：
変化行の前後のみ表示：
