グリッド行を選択、解除した時のイベントを捕捉する

javascript jqGrid

行をクリックした時に何かしたい、という要望は必ずあると思うので、そのサンプルです。

<!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>行クリックイベント捕捉サンプル</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">
function show_row(id)
{
	"cb_jqg";
	var r = $("#list").getRowData(id);
	alert("番号、名前：" + r.employee_no + ", " + r.name);
}

jQuery(document).ready(function()
{
	jQuery("#list").jqGrid({
		datatype: "local",
		colNames:['従業員番号', '名前'],
		colModel:[
			{name:'employee_no', editable:true},
			{name:'name'       , editable:true},
		],

		// 行クリックの際のイベントを捕捉する
		// クリックされた行IDが渡されてくる
		// 複数行選択の場合は第2引数にチェックした時(true)か、解除した時(false)かが渡されてくる
		// ただし、全選択、全解除の場合は、このイベントは呼ばれないので注意する
		onSelectRow: function(id, b_check)
		{
			alert(b_check ? "選択されました" : "解除されました");
			show_row(id);
		},

		// 全選択、全解除の場合に呼ばれる
		// 第1引数は、全行ID
		// 第2引数は、チェック時true、解除時false
		onSelectAll: function(ids, b_check)
		{
			alert(b_check ? "全行選択されました。" + ids : "全行解除されました。" + ids );
		},

		multiselect: true,
		caption: '行クリックイベントを捕捉する'
	});

	var mydata = [
		{employee_no:"1",name:"test1"},
		{employee_no:"2",name:"test2"},
		{employee_no:"3",name:"test3"},
	];

	for(var i=0;i<=mydata.length;i++)
		jQuery("#list").addRowData(undefined,mydata[i]);
});
</script>
</head>
<body>

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

</body>
</html>