HARD DAY'S NIGHT別館

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

jqGrid コンボボックス サンプル

jqGrid 行データ編集サンプル」はグリッドのセルに直接値を入力しました。

このサンプルでは、セルの値を入力するのにコンボボックスを表示して入力を選択出来るようにします。 評価の列のセルをクリックするとコンボボックスが表示されて選択できるようになります。

ポイントは以下のコード部分です:

edittype:"select", // edittype を select とする
editoptions:{value:"1:☆;2:☆☆;3:☆☆☆;4:☆☆☆☆"},
             sortable:false } // editoptions でコンボボックスの表示内容を指定
				

コード


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

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['順番', '曲名', '評価'],
        colModel:[
            {index:'seq', name:'seq', align:'right', resizable:true, width:15, sorttype:'integer' },
            {index:'music_name', name:'music_name', resizable:true, width:50,
             editable:true, editoptions:{maxlength: 30 } },
            {index:'rate', name:'rate', resizable:false, width:20,
             editable:true,
             edittype:"select", // edittype を select とする
             editoptions:{value:"1:☆;2:☆☆;3:☆☆☆;4:☆☆☆☆"},
                          sortable:false } // editoptions でコンボボックスの表示内容を指定
        ],
        width: '400',
        height: 'auto',
        cellEdit: true,
        autoencode: true,    // データをエンコード
        sortname: 'seq',
        cellsubmit: 'clientArray',
        sortorder: "asc",
        rowNum: 10,
        multiselect: false,
        caption: 'Cuts Like a Knife'
    }); 
});
	

HTMLコード


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

関連リンク