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

Question

我正在尝试使用 jqGrid 实现一个简单的电子表格。这些是网格列：

ID | Name | LastName | Data1 | Data2 | Total（总计为 Data1 + Data2）

我的 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' 没有成功）。

那么，如何计算客户端的 Total 列？

仅供参考：想法是使用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(this).jqGrid('editRow', id, true, null, null, 'clientArray', {}, function(rowid,issuccess){alert(rowid);}); 而不是 jQuery('#my_excel_grid').editRow(id, true);