複数グリッド表示サンプル

javascript jqGrid

1つの画面に複数グリッドを表示するサンプルです。

注意点

jqGrid が出力するHTMLは、一部の要素でid属性が重複してしまいます。ざっとソースを眺めたカンジで

などで重複しそうです。ただ、HTML的には不正なのですがまぁなんとか動いてくれていますので気にしないでいいカモしれません。

一部問題になるのは、jQueryでid属性セレクタを使用する際に、これらの重複した名前でアクセスする時なのですが、そんな時は、単にid属性名だけでアクセスすると、曖昧になってしまうので、ちゃんとどちらのグリッドの配下にあるやつかを指定すればなんとか思い通りに動きます。綱渡り的ですが・・(笑)

// 全選択チェックボックスのjQueryオブジェクトを取得する
var check_box = $("#cb_jqg", $("#gbox_{グリッド名}");

// チェックボックスをクリックする(jQueryイベントモデルとの親和性が悪いのか、ちょっと小細工が必要)
g2.attr("checked", !g2.attr("checked"));
g2.click();
g2.attr("checked", !g2.attr("checked"));


まぁ、そんなこんなで2つグリッドを表示するサンプルです。取り立てて大きな違いは無いですが、ちょっとした出来心(?)でjQuery Field Plug-inというやつを使用してみました。

チェックボックスをクリックする時、シフトキーを押しながらクリックすると、範囲指定して一気にチェックできるようになります。以下のサンプルでは1つ目のグリッドだけに適用してます。

<!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/jquery.field.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">
jQuery(document).ready(function()
{
	jQuery("#list1").jqGrid({
		datatype: "local",
		colNames:['従業員番号', '名前'],
		colModel:[
			{name:'employee_no', editable:true},
			{name:'name'       , editable:true},
		],
		multiselect: true,
		caption: 'グリッド１'
	});

	jQuery("#list2").jqGrid({
		datatype: "local",
		colNames:['従業員番号', '名前'],
		colModel:[
			{name:'employee_no', editable:true},
			{name:'name'       , editable:true},
		],
		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("#list1").addRowData(undefined,mydata[i]);
		jQuery("#list2").addRowData(undefined,mydata[i]);
	}

	$("input[type='checkbox']", $("#list1")).createCheckboxRange();
});
</script>
</head>
<body>

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

</body>
</html>