HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid 選択ラジオボタンサンプル - カスタムフォーマット版

jqGrid 選択ラジオボタンサンプル」は、ラジオボタンの表示を gridComplete イベントで一括してグリッドに表示させていました。

その後の調査で、カスタムフォーマットを利用して同様のことができることがわかりましたので試して見ました。

グリッドにセルの内容をカスタム表示する場合の参考になると思います。

コード


function selRow(id) {
	if (id) {
		$("#list").jqGrid('setSelection', id);
	}
}

jQuery(document).ready(function()
{
	var mydata = [
		{seq:"1", music_name:"The Only One"},
		{seq:"2", music_name:"Take Me Back"},
		{seq:"3", music_name:"This Time"},
		{seq:"4", music_name:"Straight From The Heart"},
		{seq:"5", music_name:"Cuts Like A Knife"},
		{seq:"6", music_name:"I'm Ready"},
		{seq:"7", music_name:"What's It Gonna Be"},
		{seq:"8", music_name:"Don't Leave Me Lonely"},
		{seq:"9", music_name:"Let Him Know"},
		{seq:"10", music_name:"The Best Was Yet To Come"},
	];

	jQuery("#list").jqGrid({
        data: mydata,
		datatype: "local",
		colNames:['', '順番', '曲名'],
		colModel:[
			{index:'rb', name:'rb', align:'center', width:10, formatter:rbtnFmatter},
			{index:'seq', name:'seq', align:'right', resizable:true, width:25, sorttype:'integer' },
			{index:'music_name', name:'music_name', resizable:true}
		],
		// 行の選択でラジオボタンも選択
		onSelectRow: function(id)
		{
			// 現在の選択行を取得
			var row = $("#list").jqGrid('getGridParam', 'selrow');
			// 行IDを取得
			var ids = $("#list").jqGrid('getDataIDs');
			for (var i = 0; i < ids.length; i++) {
				if (row == ids[i])
					break;	// 行IDが一致したので抜ける
			}
			if (i < ids.length) {
				id = i + 1;
				var obj = document.getElementById("rbtn" + id);
				if(obj)
					obj.checked = true;
			}
		},
		width: '400',
		height: 'auto',
		sortname: 'seq',
		sortorder: "asc",
		rowNum: 10,
		multiselect: false,
		caption: 'Cuts Like a Knife'
	});	
});

// 行頭にラジオボタンをつける
// 参考: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
//
function rbtnFmatter(cellvalue, options, rowObject)
{
	var rbtn = '<input type="radio" name="rbtn" id="rbtn' + options['rowId'] + '" ' +
					'onclick="selRow(\'' + options['rowId'] + '\')"/>';
	return rbtn;
}
	

HTMLコード


<table id="list">
</table>
	

関連リンク