HARD DAY'S NIGHT別館

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

jqGrid 複数行選択サンプル

jqGrid は複数選択を許可する multiselect オプションを true にセットすると、行頭にチェックボックスを表示して、グリッド内のデータ行を複数選択できます。

このサンプルは、選択されている行の内容を取得してメッセージボックスに表示します。 ちなみに並べ替えは先頭列の番号を降順で初期表示しています。

ボタンをクリックすると選択したデータを取得して表示します:

コード


function onClickDisplay() {
	// 選択行の行IDを配列で取得
	jQuery('#list').getGridParam('selarrrow');
	var selrows = jQuery('#list').getGridParam('selarrrow');
	var msg = "";

	if (selrows.length > 0)
	{
		for (var i = 0; i < selrows.length; i++)
		{
			// 選択行
			var row = $('#list').getRowData(selrows[i]);
			msg += row.music_name;
			msg += "\r\n";
		}
	}
	else
	{
		msg = "行を選択してください。";
	}
	alert(msg);
}

jQuery(document).ready(function()
{
    $("input:submit, a, button", ".toolbar").button();	// jQuery UI Widget Button.

    var mydata = [
        {seq:"1", music_name:"Death On Two Legs"},
        {seq:"2", music_name:"Lazing On A Sunday Afternoon"},
        {seq:"3", music_name:"I'm In Love With My Car"},
        {seq:"4", music_name:"You are my best friend"},
        {seq:"5", music_name:"'39"},
        {seq:"6", music_name:"Sweet Lady"},
        {seq:"7", music_name:"Seaside Rendezvous"},
        {seq:"8", music_name:"The Prophet's Song"},
        {seq:"9", music_name:"Love Of My Life"},
        {seq:"10", music_name:"Good Company"},
        {seq:"11", music_name:"Bohemian Rhapsody"},
        {seq:"12", music_name:"God Save The Queen"}
    ];

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['順番', '曲名'],
        colModel:[
            {index:'seq', name:'seq', align:'right', resizable:true, width:40, sorttype:'integer' },
            {index:'music_name', name:'music_name', resizable:true}
        ],
        width: '400',
        height: 'auto',
        sortname: 'seq',
        sortorder: "desc",
        rowNum: 12,
        multiselect: true,
        caption: 'A Night At Opera'
    }); 
});
	

HTMLコード


<table id="list">
</table>
<div class="toolbar">
ボタンをクリックすると選択したデータを取得して表示します:<button onclick="onClickDisplay()">選択行を表示</button>
</div>