JS : Google Visualization : Table : 最も基本的なテーブルの作成

  JavaScriptで作成する HTML 上の DataGrid



複数選択が可能ですが、1行のみの選択というオプションはありません
オペレーションミスをできるかぎり避けるように作成する必要のある
ローカルのアプリケーションの場合は、1行のみの選択したほうが良いのですが、

WEB上では、目的さえはっきりしておればあまり気にする必要は無いと思います。

セル内に HTML を埋め込む事ができますので、純粋にテーブルの代わりに使うといいと思います

※ タイトルをクリックするとデータがそのカラムでソートされます
( 選択状態は維持されます )







  ソースコード



  
<!--
  Google API の基本部分
  まずこれがロードされないと、google. のメソッドが動作できない
-->
<script	type="text/javascript"
	src="http://www.google.com/jsapi"
	charset="utf-8"
></script>


<!--
  Google API のパーツ部分
  一つのScriptセクションで実行する事
  でないと同一セクションではロードされる前の記述となります
-->
<script type="text/javascript">
// ここでは使っていませんが、prototype.js を適用
google.load("prototype", "1.6.1.0");
// バージョン1の、table パッケージを使用
google.load('visualization', '1', { packages: ['table'] });
</script>


<!--
  Google API のユーザ部分
-->
<script type="text/javascript">
google.setOnLoadCallback(createMyTable);

var data;
var visualization;

// *********************************************************
// テーブルの作成
// ( setOnLoadCallback で、onload イベントに追加されます )
// *********************************************************
function createMyTable() {

	// テーブル用データ作成
	data = new google.visualization.DataTable();

	// カラム作成
	// 第1引数はデータ型
	// 'string' 'number' 'boolean' 'date' 'datetime' 'timeofday'
	// string を使うのが無難
	// 第2引数は表示タイトル( 省略可 )
	// 第3引数は ID ( 省略可/使用しなくても使えます )
	data.addColumn('string');
	data.addColumn('string', '内容');

	var key;
	var row = 0;
	for (key in window.navigator) {
		// 一行追加
		data.addRow();
		// 1カラム目に プロパティ名を追加
		// ( 最後の +"" で文字列に変換 )
		data.setCell(row, 0, key+"" );
		// 2カラム目に プロパティの値を追加
		// ( 最後の +"" で文字列に変換 )
		data.setCell(row, 1, window.navigator[key]+"" );
		row++;
	}

	// テーブル作成
	visualization = 
		new google.visualization.Table(
			document.getElementById('table_area')
		);

	// テーブルにデータを適用
	visualization.draw(data);

}
</script> 
</head>

<body>

<div id="table_area" style='width:650px;'></div>
  


Google の API ドキュメント
Google Visualization API Reference











  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ