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 回答