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





yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[google]
claudebot
24/03/29 22:21:03
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube