HARD DAY'S NIGHT別館

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

jqGrid 行データ編集サンプル

jqGrid はグリッド内のデータを直接編集する機能を持っています。

HTML テーブルと Javascript で表内にテキストボックスを表示させて入力しているこちらのサンプルと比べると、大変楽に実現できるので便利な機能です

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

editoptions: {maxlength:50} ・・・入力最大文字数
editable:true               ・・・この列を編集可能にする
cellEdit: true              ・・・グリッドのセル編集を可能にする
cellsubmit: 'clientArray'   ・・・入力したデータをグリッド内に保持
				

また、行データの編集/送信には「関連リンク」のサンプルをご覧ください。

コード


jQuery(document).ready(function()
{
	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:"クリックして名前を入れてください。"}
	];

    jQuery("#list").jqGrid({
        editurl: 'clientArray',
        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,
        autoencode: true,
        cellsubmit: 'clientArray',
        rowNum: 20,
        sortname: 'rid',
        sortorder: "ASC",
        multiselect: true,
        caption: '製品一覧'
    }); 
});
	

HTMLコード


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

関連リンク