如何使用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);});