グリッド直接編集時にクエリパラメータを追加する

javascript jqGrid

次は、グリッド直接編集時にクエリパラメータをくっつける方法。

以下のサンプルでは、

param1 value1
param2 value2

というパラメータを追加したリクエストを送信するようになります。

<!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/grid.locale-jp.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
function begin_edit()
{
	// 保存ボタンを押せるようにし、編集ボタンを押せないようにする
	$("#btn1").attr("disabled",true);
	$("#btn2").attr("disabled",false);
}

function end_edit()
{
	// 保存ボタンを押せないようにし、編集ボタンを押せるようにする
	$("#btn1").attr("disabled",false);
	$("#btn2").attr("disabled",true);
}

jQuery(document).ready(function()
{
	jQuery("#list").jqGrid({
		datatype: "local",
		colNames:['従業員番号', '名前'],
		colModel:[
			{name:'employee_no', editable:true},
			{name:'name'       , editable: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]);

	// 編集中の行ID
	var editting_id = null;

	// 選択した行データを編集状態にする
	jQuery("#btn1").click( function()
	{
		var grid = jQuery("#list");
		editting_id = grid.getGridParam("selrow");
		if( !editting_id )
		{
			alert("選択されてません");
			return;
		}

		grid.editRow(editting_id); 
		begin_edit();
	});

	// 編集を保存する
	$("#btn2").click( function()
	{
		if( !editting_id ) return;

		extra_param = {param1 : "value1", param2 : "value2"};

		jQuery("#list").saveRow(editting_id,
		                        null, 
		                        location.href,
		                        extra_param );
		editting_id = null;
		end_edit();
	});

	end_edit();
});
</script>
</head>
<body>

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

<p><button id="btn1">選択中の行を編集する</button></p>
<p><button id="btn2">保存</button></p>

</body>
</html>