HARD DAY'S NIGHT別館

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

jqGrid インライン編集データ送信 サンプル

グリッドのセルの内容を編集して確定した時点でサーバーへポストする方法をご紹介します。

セルをクリックしてデータを入力し、「Enter」キー押下するか、
他のセルをクリックするとセルの内容を jqgrid_postrow.php(ソース)へポストします。
このサンプルでは、「メモ」に入力された内容を送信し、ポストされた内容をテキストとして表示するだけですが、 実際のアプリではデータベースへ書き込みします。

コード


jQuery(document).ready(function()
{
    // ユーザー設定 - ユーザー一覧
    jQuery("#list").jqGrid({
        url:'jqgrid_getdata.php?datatype=json',
        datatype: "json",
        colNames:['ID', '名前', 'フリガナ', '電話番号1', '電話番号2', '役割', '更新日'],
        colModel:[ {index:'id', name:'id', width: '60', align: 'center', editable:true, editoptions:{size:8} },
                   {index:'name', name:'name', width: '110', editable:true, editoptions:{size:15} },
                   {index:'name_furigana', name:'name_furigana', width: '110', editable:true, editoptions:{size:15} },
                   {index:'tel_no1', name:'tel_no1', width: '70', align: 'center', editable:true, editoptions:{size:11} },
                   {index:'tel_no2', name:'tel_no2', width: '70', align: 'center', editable:true, editoptions:{size:11} },
                   {index:'role', name:'role', width: '60', align: 'center', editable:true, edittype:"select", editoptions:{value:"0:スタッフ;9:管理者"}, formatter:'select' },
                   {index:'modified', name:'modified', width: '100', align: 'center', editable:false },
                 ],
        multiselect: false,
        autoencode: true,
        cellEdit: true,
        cellsubmit: 'remote',
        cellurl: 'jqgrid_postrow.php',
        afterSubmitCell: function(serverStatus, rowid, cellname, value, iRow, iCol) {
            // ポストされた内容をサーバーがリターンするのでそれを表示
            alert(serverStatus.responseText);

            var result = true;
            if (result)
            {
                return [true,""];
            }
            else
            {
                // ポップアップでエラーを表示
                return [false,"エラーの内容をここに"];
            }
        },
        height:'200',
		width:'600',
        sortname: 'id',
        sortorder: "ASC",
        caption: 'ユーザー一覧'
    });
});
	

HTMLコード


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

関連リンク