超簡単サンプル

javascript jqGrid

http://www.trirand.com/jqgrid/jqgrid.html:サンプルサイト で、「ほうほう、こんなことができるのか」とjqGridの凄さにびっくりしたかもしれないけど、「一体どうやって使うのよ？これ」と最初はかなり戸惑ってしまうので、まずは超簡単なサンプルを用意してみた。

適当なファイル名(c:\jqGrid\sample.html)で保存してください。文字コードはUTF-8にしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/i18n/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function()
{
	jQuery("#list").jqGrid({
		datatype: "local",
		colNames:['ID', '名前'],
		colModel:[
			{name:'id'},
			{name:'name'},
		],
		caption: '配列をグリッド表示する'
	});
	var mydata = [
			{id:"1",name:"test" },
			{id:"2",name:"test2"},
			{id:"3",name:"test3"},
			{id:"4",name:"test" },
			{id:"5",name:"test2"},
			{id:"6",name:"test3"},
			{id:"7",name:"test" },
			{id:"8",name:"test2"},
			{id:"9",name:"test3"},
		];
	for(var i=0;i<=mydata.length;i++)
		jQuery("#list").addRowData(i+1,mydata[i]);
});
</script>
</head>
<body>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

</body>
</html>