SQLの窓

2013年11月21日


jQuery でとりあえず実装する Google Visualization DataTable Class ( 後でプラグイン化予定 )

たぶん全くはやらない  Google Visualization ですが、ただデータをテーブル表示したいだけならこんなにいいものは無いと思うのですが。( しかも Google ドキュメント参照できるんですよ )
<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}
.myHeader {
	color:#FFFFFF;
	background: #000000;
	padding: 7px;
	border: solid #303030 1px;
}
.myCell {
	padding: 7px;
	border: solid #303030 1px;
}
</style>

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table'] });
$(function(){
	var data;
	var visualization;

	data = new google.visualization.DataTable();

	data.addColumn('string', 'プロパティ');
	data.addColumn('string', '内容');

	var row = 0;
	for (var key in window.navigator) {
		data.addRow();
		data.setCell(row, 0, key+"" );
		data.setCell(row, 1, window.navigator[key]+"" );
		row++;
	}

	visualization = new google.visualization.Table($("#table_area")[0]);
	visualization.draw(data,		{
		cssClassNames: {
			tableCell: 'myCell',
			headerCell: 'myHeader'
		},
		width: '600px'
	});
});

</script>
<div id="table_area"></div>

▼ navigator オブジェクトのプロパテイの一覧です( タイトルクリックでソート )


posted by at 03:43 | Google | このブログの読者になる | 更新情報をチェックする