ウィキっとく？

DataTable

最終更新：2008年11月01日 18:51

wikittoku

- view

管理者のみ編集可

javascriptで表（データテーブル）を表示する（Yahoo UI Library: DataTable（2.6.0））
- サンプル
  - 事前準備
- 逆引き

javascriptで表（データテーブル）を表示する（Yahoo UI Library: DataTable（2.6.0））

Yahoo UI LibraryのDataTableライブラリ -- http://developer.yahoo.com/yui/datatable/
データはYahoo UI LibraryのDataSourceを使用する。

サンプル

簡単なサンプル

事前準備

必要ライブラリの読み込み（使用する機能によって増減します）

<!-- 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のスタイル指定
```
<body class="yui-skin-sam">
```

表を置く場所指定
```
<div id="myDataTable"></div>
```

データソースなどの準備

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);
});

逆引き

ソートさせたい。

カラム定義設定箇所で sortable:true を指定

var myColumnDefs = [
	{key:"name", label:"名前", sortable:true},
	{key:"kokugo", label:"国語"},
	{key:"sugaku", label:"数学"},
	{key:"rika", label:"理科"},
	{key:"shakai", label:"社会"},
	{key:"eigo", label:"英語"}
];

数値を数値でソートさせるにはデータソースのresponseSchema設定箇所で parser:"number" を指定すること。
指定しないと文字列ソートされる。

カラムの幅を調整できるようにしたい。

カラム定義設定箇所で resizeable:true を指定

var myColumnDefs = [
	{key:"name", label:"名前", resizeable:true},
	{key:"kokugo", label:"国語"},
	{key:"sugaku", label:"数学"},
	{key:"rika", label:"理科"},
	{key:"shakai", label:"社会"},
	{key:"eigo", label:"英語"}
];

指定しても動かない場合、dragdropライブラリを追加してるか確認

数値を桁区切りしたい。

カラム定義設定箇所で formatter:"number" を指定

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を使用する。

var oConfigs = {
	paginator: new YAHOO.widget.Paginator({
		rowsPerPage: 30
	})
};
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);

paginatorライブラリ,cssを追加する必要がある。

マウスオーバーで行をハイライトさせたい。

var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);

行を選択状態にしたい。

1行選択

var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.set("selectionMode", "single");
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);

複数行選択可

var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);