カスタム列のサンプル

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)
{
	var r = $("#list").getRowData(id);
	alert("番号、名前：" + r.employee_no + ", " + r.name);
}

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

		// カスタム列に、ボタンを配置し
		// ボタンを押したら、その行のデータを表示するようにする
		gridComplete: function()
		{
			var ids = jQuery("#list").getDataIDs();
			for(var i=0; i<ids.length; ++i)
			{
				var button_tag = "<button onclick=\"show_row(" + ids[i] + ");\">表示</button>";
				jQuery("#list").setRowData(ids[i],{custome: button_tag})
			}
		},

		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>