ダイアログとの連携

javascript jqGrid

jQueryUI のダイアログユーティリティーとの連携サンプルです。
ボタンを押すとうにょ〜んとダイアログが出てきてグリッドが表示されます。
チェックボックスをチェックして「選択」ボタンを押すと、ダイアログが消えて、元の画面に選択された情報が表示されます。

注意点としては

  • 表示はしないけど、データとして持っておきたいパラメータを hidden:true としてjqGridを構築する
  • ダイアログのボタンを押した時に実行される関数内で、コールバック関数を呼ぶようにしています。グローバル変数を使いたくないので、ダイアログの option パラメータに「__on_close_callback」という元々はありもしないパラメータ名で使用してます。Javascriptのこういういい加減なところは、便利ですね。後で地獄を見ることになる可能性が高いのですが・・(^^;
<!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="src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery.searchFilter.css" />

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

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.js"></script>
<script type="text/javascript" src="js/i18n/jquery-ui-i18n.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 on_close_callback(selected_rows)
{
	if( !selected_rows ) return;

	if( selected_rows.length <= 0 )
	{
		alert("選択してください");
		return false;
	}
	else
	{
		var t = "選択された行は<br>";
		for( var i=0; i<selected_rows.length; ++i )
		{
			var r = $("#list").getRowData(selected_rows[i]);
			t += "<br>" + "番号、名前、隠しID：" + r.employee_no + ", " + r.name + ", " + r.hidden_id;
		}
		t += "<br><br>です";

		$("#result").html(t);
	}
}

jQuery(document).ready(function()
{
	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		show: "drop",
		hide: "drop",
		closeOnEscape: true,
		height: 500,
		width:  500,
		modal: true,
		buttons: {
			'選択': function()
			{
				var rows = $("#list").getGridParam("selarrrow");
				var callback_func = $(this).dialog("option", "__on_close_callback");

				if( callback_func )
				{
					if( callback_func(rows)!==false ) $(this).dialog('close');
				}
				else
				{
					$(this).dialog('close');
				}
			},
			'キャンセル': function()
			{
				$(this).dialog('close');
			}
		},
		open: function()
		{
			jQuery("#list").jqGrid({
				datatype: "local",
				colNames:['従業員番号', '名前', '隠しID'],
				colModel:[
					{name:'employee_no', editable:true},
					{name:'name'       , editable:true},
					{name:'hidden_id'  , hidden:true},
				],
				multiselect: true,
				caption: 'ダイアログ'
			});

			// クリアしておかないと以前の状態が残ってしまう
			jQuery("#list").clearGridData();
			jQuery("#list").resetSelection();

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

			for(var i=0;i<=mydata.length;i++)
				jQuery("#list").addRowData(undefined,mydata[i]);
		},
		close: function()
		{
		}
	});

	$('#show_dialog_button').click(function()
	{
		$('#dialog').dialog("option", "__on_close_callback", on_close_callback);
		$('#dialog').dialog('open');
	});
});
</script>
</head>
<body>

<div id="dialog" title="従業員選択">
	<p>選択してください</p>
	<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
</div>

<button id="show_dialog_button">ダイアログ表示</button>

<div id="result"></div>

</body>
</html>