HARD DAY'S NIGHT別館

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

jqGrid 選択ラジオボタンサンプル

jqGrid は、multiselect: true の場合は、チェックボックスを行頭に表示してくれますが、multiselect: false の場合は、単一行選択になりますが、特にラジオボタンを表示してくれたりしません。

実際、見た目だけの違いなので問題はないと思いますがやってみました。

このサンプルは、行頭にラジオボタンを表示して行選択でラジオボタンの選択状態が変わります。 また、ほかにもコントロールを表示する場合の参考になると思います。

コード


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},	//ラジオボタン
			{index:'seq', name:'seq', align:'right', resizable:true, width:25, sorttype:'integer' },
			{index:'music_name', name:'music_name', resizable:true}
		],
		// 行頭にラジオボタンをつける
		gridComplete: function() {
			var ids = $("#list").jqGrid('getDataIDs');
			for(var i = 0; i < ids.length; i++) {
				j = i + 1;
				var rbtn = '<input type="radio" name="rbtn" id="rbtn' + j + '" ' +
							'onclick="selRow(\'' + ids[i] + '\')">';
				$("#list").jqGrid('setRowData', ids[i], {rb:rbtn});
			}
		},
		// 行の選択でラジオボタンも選択
		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'
	});	
});
	

HTMLコード


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

関連リンク