HARD DAY'S NIGHT別館

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

jqGrid グリッド行の追加・削除サンプル

jqGrid 行データ編集サンプルをもとに行の追加・削除を行う機能を実装しました。

    「追加」ボタンをクリックすると新しい行を追加します。
    「削除」ボタンをクリックすると選択した行を削除します。
			

コード


function addrow()
{
    // 現在の最大のID番号取得
    var arrrows = $("#list").getRowData();
    var max = 0;
    for (i = 0; i < arrrows.length; i++) {
        var cur = parseInt(arrrows[i].rid);
        if (max < cur) {
            max = cur;
        }
    }

    var tmpData = {
        rid: max + 1,
        model: "dummy",
        model_name: "クリックして名前を入れてください。"
    };

    $("#list").addRowData(undefined, tmpData);
}

function delrow()
{
    // 選択されている行ID配列の取得
    var arrrows = $("#list").getGridParam("selarrrow");

    if(arrrows.length == 0) {
        alert("削除する行を選択してください。");
    } else {
        // 選択行の削除
        // グリッドの下の方から削除していかないと、選択行すべて削除できない。
        // BUG: http://www.trirand.com/blog/?page_id=393/bugs/delrowdata-bug-on-grid-with-multiselect
        var len = arrrows.length;
        for(i = len-1; i >= 0; i--) {
            $("#list").delRowData(arrrows[i]);
        }
    }
}

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

    var mydata = [
        {rid:"1", model:"ZX-1", model_name:"クリックして名前を入れてください。"},
        {rid:"2", model:"AX-100", model_name:"クリックして名前を入れてください。"},
        {rid:"3", model:"T-1000", model_name:"クリックして名前を入れてください。"},
    ];

    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 },
        ],
        width: 450,
        height: 'auto',
        cellEdit: true,
        cellsubmit: 'clientArray',
        rowNum: 10,
        scroll:true,
        sortname: 'rid',
        sortorder: "ASC",
        multiselect: true,
        caption: '製品一覧'
    }); 
});
	

HTMLコード


<style>
.toolbar {
	margin: 5px 0;
	font-size: 0.8em;
}
</style>
<table id="list">
</table>
<div class="toolbar">
    <button type="button" onclick="addrow()">追加</button>
    <button type="button" onclick="delrow()">削除</button>
</div>
	

関連リンク