如何使用jqGrid计算客户端上的Total列？

Question

我想用jqGrid实现一个简单的电子表格。这些都是网格列：

ID | Name | LastName | Data1 | Data2 | Total（总计将数据1 +数据2）

我的JavaScript代码如下所示：

$(function() {  
var lastsel; 

     jQuery("#my_excel_grid").jqGrid({ 

      url:'data_excel.php', 
      datatype: "json", 
      colNames:['id','name', 'lastname', 'data1','data2','total'], 
      colModel:[ 
       {name:'id',index:'id', width:55, sortable:false}, 
       {name:'name',index:'name', width:90}, 
       {name:'lastname',index:'lastname', width:100}, 
       {name:'data1',index:'data1', width:80, align:"right", editable:true}, 
       {name:'data2',index:'data2', width:80, align:"right", editable:true},  
       {name:'total',index:'total', width:80,align:"right", 
         formatter: function (cellvalue, options, rowObject) 
          { 
           // Harcoded index won't work in the real life excel grid 
           //  since the columns will be populated dynamically 
           return parseInt(rowObject[3]) + parseInt(rowObject[4]); 
           } 
       },  
      ], 
      rowNum:10, 
      rowList:[10,20,30], 
      pager: '#my_excel_pager', 
      sortname: 'id', 
      sortorder: "desc", 
      caption:"Excel",   
      editurl:"data_excel.php?op=edit",   

      onSelectRow: function(id) { 
        if (id && id !== lastsel) { 
         jQuery('#my_excel_grid').restoreRow(lastsel); 
         jQuery('#my_excel_grid').editRow(id, true); 
         lastsel = id; 
        } 
        }, 

      beforeSubmitCell: function(rowid, celname, value, iRow, iCol) { alert("beforeSubmitCell"); }, 
      afterSaveCell: function (rowid, celname, value, iRow, iCol) { alert("afterSaveCell"); }, 

     }); }); 

我遇到的问题是，beforeSubmitCell和afterSaveCell未被调用（我没有收到警报消息），所以我无法在Total列中写入新值。顺便说一句editurl url是虚拟的，它不会返回任何东西（我也尝试设置'clientArray'没有成功）。

那么，我该如何计算客户端的总列？

FYI：这个想法是使用external "Save" button保存网格并动态填充列，可见here和here

Answer 1

的jqGrid有三个editing modes，您可以使用：inline editing，form editing和cell editing。如果您使用editRow和restoreRow这意味着您使用the inline editing mode。仅在单元格编辑模式下才使用afterSaveCell和beforeSubmitCell事件。

所以你需要做的是

1. 从jqGrid的定义中删除未使用的beforeSubmitCell和beforeSubmitCell事件。
2. 在editRow调用中添加其他参数。您需要使用aftersavefunc参数。而不是jQuery('#my_excel_grid').editRow(id, true);你可以使用jQuery(this).jqGrid('editRow', id, true, null, null, 'clientArray', {}, function(rowid,issuccess){alert(rowid);});