保存新行时 JqGrid 基本网格示例错误

Question

我正在使用 jqGrid Demos 中的基本网格示例:

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" />

但是网格无法正常工作，因为:

• 保存新行后，该行将保持选中状态，我无法选择其他行。
• 当我取消编辑某行时，它会删除其他几行。
• 当我第二次点击时 添加新行按钮时，Google Chrome 调试器控制台显示错误:Uncaught TypeError: Cannot read property 'name' of undefined

我几乎可以肯定它与新的行 ID 有关，但经过 2 天的尝试，我希望得到一点帮助，提前致谢

Answer 1

您向 addRow 传递了错误的参数。来自 jqGrid documentation for addRow :

Calling convention:

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

where parameters is a object and has the following default values:

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

此外，您每次都需要将 rowID 设置为等于新值。您可以显式执行此操作，也可以将其设置为未定义，让 jqGrid 为每个新行分配一个随机 ID。

---

例如:

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

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