HARD DAY'S NIGHT別館

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

jqGrid グリッド内データをサーバーに送信 サンプル

jqGrid はグリッド内のデータを直接編集した後、それをサーバーへ送信する方法をご紹介します。

jqGrid 行データ編集サンプルのサンプルを応用してグリッドデータを送信してみます。
セルをクリックしてデータを入力し、「送信」ボタンをクリックすると選択した行の内容サーバーへ送信します。
送信されたデータは、jqgrid_postdata.php(ソース)で処理をします。このサンプルは送信された内容をテキストとして表示します。
実務ではデータベースへ書き込むなど処理します。

コード


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

    var mydata = [
        {rid:"1", model:"ZX-1", model_name:"クリックして名前を入れてください。"},
        {rid:"2", model:"AX-100", model_name:"クリックして名前を入れてください。"},
        {rid:"3", model:"T-1000", model_name:"クリックして名前を入れてください。"},
        {rid:"4", model:"T-1001", model_name:"クリックして名前を入れてください。"},
        {rid:"5", model:"T-1002", model_name:"クリックして名前を入れてください。"},
        {rid:"6", model:"T-1003", model_name:"クリックして名前を入れてください。"},
        {rid:"7", model:"T-1004", model_name:"クリックして名前を入れてください。"},
        {rid:"8", model:"T-1005", model_name:"クリックして名前を入れてください。"},
        {rid:"9", model:"T-1006", model_name:"クリックして名前を入れてください。"},
        {rid:"10", model:"T-1007", model_name:"クリックして名前を入れてください。"},
        {rid:"11", model:"T-1008", model_name:"クリックして名前を入れてください。"}
    ];
    
    var savedRow = null;
    var savedCol = null;

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['ID', '型式', '名称'],
        colModel:[
            {index:'rid', name:'rid', width:50 },
            {index:'model', name:'model', width:150, editable:true },
            {index:'model_name', name:'model_name', width:250, editoptions:{maxlength:50}, editable:true },
        ],
        beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
            // クリックされたセルを記録
            savedRow = iRow;
            savedCol = iCol;
        },
        width: 450,
        height: 'auto',
        cellEdit: true,
        autoencode: true,    // データをエンコード
        cellsubmit: 'clientArray',
        rowNum: 20,
        sortname: 'rid',
        sortorder: "ASC",
        multiselect: true,
        caption: '製品一覧'
    }); 

    $("#sendGrid").click(function() {
        // 未保存のセルを送信前に強制保存してしまう。
        if (savedRow && savedCol) {
            jQuery("#list").jqGrid('saveCell', savedRow, savedCol);
        }

        // グリッド内の選択されているデータを配列に取り込む
        var rowIds = $("#list").getGridParam('selarrrow');

        if (rowIds.length == 0) {
            alert("データを選択してください。");
            return false;
        }

        var ret = confirm("選択した内容をサーバー保存します。よろしいですか?");

        if (!ret) {
            return false;
        }

        var values = new Array();

        for (var i = 0; i < rowIds.length; i++) {
            var row = $('#list').getRowData(rowIds[i]);
            values[i] = new Array(row.model, row.model_name);
        }

        $.ajax({
            type: "POST",
            url: "jqgrid_postdata.php",
            async: false,
            data: {
                num:values.length,
                dat:values
            },
            success: function(data, dataType) {
                confirm("サーバーへ送信しました。送信された内容を表示しますか?");
                alert(data);
            },
            error: function(res, textStatus, xhr) {
                alert("サーバーとの通信に失敗しました。");
            },
            dataType: "text"
        });

        return true;
    })

    $("#sendGridAll").click(function() {
        // 送信前に編集内容を保存
        if (savedRow && savedCol) {
            jQuery("#list").jqGrid('saveCell', savedRow, savedCol);
        }

        var ret = confirm("内容をサーバー保存します。よろしいですか?");

        if (!ret) {
            return false;
        }

        // グリッド内の全データを配列に取り込む
        var rowIds = jQuery("#list").jqGrid('getDataIDs');

        var values = new Array();

        for (var i = 0; i < rowIds.length; i++) {
            var row = $('#list').getRowData(rowIds[i]);
            values[i] = new Array(row.model, row.model_name);
        }

        $.ajax({
            type: "POST",
            url: "jqgrid_postdata.php",
            async: false,
            data: {
                num:values.length,
                dat:values
            },
            success: function(data, dataType) {
                confirm("サーバーへ送信しました。送信された内容を表示しますか?");
                alert(data);
            },
            error: function(res, textStatus, xhr) {
                alert("サーバーとの通信に失敗しました。");
            },
            dataType: "text"
        });

        return true;
    })
});
	

HTMLコード


<table id="list">
</table>
<div class="toolbar">
	<button id="sendGrid" type="button">選択したデータを送信</button>
	<button id="sendGridAll" type="button">全データを送信</button>
</div>
	

関連リンク