ツールバーを表示する

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()
{
	// 現在選択中の行を表示する
	var id = $("#list").getGridParam("selrow");
	if(id)
	{
		var r = $("#list").getRowData(id);
		alert("番号、名前：" + r.employee_no + ", " + r.name);
	}
	else
		alert("選択されてません");
}

function redraw_selection_num()
{
	// グリッドが選択されると、選択した行数を表示する
	var n = $("#list").getGridParam("selarrrow").length;
	$("#select_count").text(n);
}

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

		onSelectRow: function(id, b_check)
		{
			redraw_selection_num();
		},

		onSelectAll: function(ids, b_check)
		{
			redraw_selection_num();
		},

		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]);

	// toolbar の id 属性は以下のようになる
	// ・top or bottom の場合：t_{グリッドID}
	// ・bothの場合
	//   - 上のツールバー    ：t_{グリッドID}
	//   - 下のツールバー    ：tb_{グリッドID}
	$("#t_list").append("<div id=\"select_count\">0</div>");

	$("#tb_list").append("<button id=\"show_button\">ポチ</button>");
	$("#show_button").click(show);
});
</script>
</head>
<body>

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

</body>
</html>