2

我正在使用jqGrid Demos中的 Basic Grid 示例：

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

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

  • 保存新行后，它保持选中状态，我无法选择其他行。
  • 当我取消对一行的编辑时，它会删除其他几行。
  • 当我第二次单击添加新行按钮时，谷歌浏览器调试器控制台显示错误：未捕获的类型错误：无法读取未定义的属性“名称”

我几乎可以肯定它与新的行 ID 有关，但经过 2 天的尝试，我将不胜感激，在此先感谢

4

1 回答 1

2

您将错误的参数传递给addRow. 来自jqGrid 文档addRow：

调用约定：

jQuery("#grid_id").jqGrid('addRow',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 回答