2

jqGridデモの基本グリッドの例を使用しています：

jQuery("#rowed1").jqGrid(
        {
            url : 'clientArray',
            datatype : "local",
            colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
                    'Total', 'Notes' ],
            colModel : [ {
                name : 'id',
                index : 'id',
                width : 55,
                editable : true,
                key: true
            }, {
                name : 'invdate',
                index : 'invdate',
                width : 90,
                editable : true
            }, {
                name : 'name',
                index : 'name',
                width : 100,
                editable : true
            }, {
                name : 'amount',
                index : 'amount',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'tax',
                index : 'tax',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'total',
                index : 'total',
                width : 80,
                align : "right",
                editable : true
            }, {
                name : 'note',
                index : 'note',
                width : 150,
                sortable : false,
                editable : true
            } ],
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            pager : '#prowed1',
            sortname : 'id',
            viewrecords : true,
            sortorder : "desc",
            editurl : "clientArray",
            caption : "Basic Example"
        });
jQuery("#rowed1").jqGrid('navGrid', "#prowed1", {
    edit : false,
    add : false,
    del : false
});

ユーザーが[編集]、[保存]、および[キャンセル]ボタンをクリックしたときに処理する次のイベント：

jQuery("#ed1").click(function() {
    var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    jQuery("#rowed1").jqGrid('editRow', id);
    this.disabled = 'true';
    jQuery("#sved1,#cned1").attr("disabled", false);
});
jQuery("#sved1").click(function() {

    var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    alert('id: ' + rowid);
    jQuery("#rowed1").jqGrid('saveRow', rowid , false );
    jQuery("#sved1,#cned1").attr("disabled", true);
    jQuery("#ed1").attr("disabled", false);
    jQuery("#aded1").attr("disabled", false);
    
});
jQuery("#cned1").click(function() {
    var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
    jQuery("#rowed1").jqGrid('restoreRow', id);
    jQuery("#sved1,#cned1").attr("disabled", true);
    jQuery("#ed1").attr("disabled", false);
    jQuery("#aded1").attr("disabled", false);
});

jQuery("#aded1").click(function() {
    jQuery("#rowed1").jqGrid('addRow',  'new');
    this.disabled = 'true';
    jQuery("#sved1,#cned1").attr("disabled", false);
});

そしてボタンのhtml：

 <input type="BUTTON" id="aded1"  value="Add Row" />
 <input type="BUTTON" id="ed1" value="Edit row 3" /> 
 <input type="BUTTON" id="sved1" disabled='true' value="Save row 3" /> 
 <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />

ただし、次の理由でグリッドが正しく機能していません。

  • 新しい行を保存した後も選択されたままになり、他の行を選択できません。
  • 行の編集をキャンセルすると、他のいくつかの行が削除されます。
  • [新しい行を追加]ボタンを2回クリックすると、google chromeデバッガコンソールに次のエラーが表示されます：Uncaught TypeError：Undefinedのプロパティ'name'を読み取れません

新しい行IDと関係があることはほぼ間違いありませんが、2日間試した後、少し助けていただければ幸いです。よろしくお願いします。

4

1 に答える 1

2

に間違ったパラメータを渡していますaddRow。のjqGridドキュメントからaddRow：

呼び出し規約：

jQuery("#grid_id").jqGrid('addRow',parameters);

ここで、parametersはオブジェクトであり、次のデフォルト値があります。

parameters =
{
  rowID : "new_row",
  initdata : {},
  position :"first",
  useDefValues : false,
  useFormatter : false,
  addRowParams : {extraparam:{}}
}

また、rowID毎回新しい値に等しく設定する必要があります。これを明示的に行うかundefined、jqGridが新しい各行にランダムなIDを割り当てるように設定することができます。

例えば：

jQuery("#aded1").click(function() { 
    var parameters = { 
          rowid : undefined, 
          initdata : {}, 
          position :"first", 
          useDefValues : false, 
          useFormatter : false, 
          addRowParams : {extraparam:{}} 
    };

    jQuery("#rowed1").jqGrid('addRow', parameters); 
});
于 2012-09-12T18:35:47.743 に答える