jqgrid：当保存子网格中的行时更新父行

Question

我正在使用jqgrid 4.8.2。我有一个产品数量总计的父网格。我已经配置了一个子网格（作为网格），它将显示每个拥有该产品的仓库的可用数量。例如：

ID Category Name   Quantity 
1  Beverages Steeleye Stout  1000 

    WHSE ID Whse Name Quantity Include? 
    1   London   50  Yes 
    2   Manchester  75   No 

当编辑行时，子网格中的包含列显示复选框。

当编辑子网格中的任何仓库行时，我需要更新父行中的“数量”单元格。子网格行中唯一可用的编辑方式是将“包含”值更改为“是”或“否”。

不知何故，我需要在编辑前在仓库行（在子网格中）中捕获包含值，被保存，对父行的数量执行适当的更新。例如：

1. 仓库行包含值从是更改为否：从父行中的数量减去仓库行中的 数量。
2. 仓库行包含值从No更改为Yes：将仓库行中的数量添加到父行中的数量。

我不知道如何在提交保存之前获取子网格行中的包含单元格的值。我也不确定在子网格行保存发生后，我会触发更新到父行的事件。

这里是我的代码至今：

var lastSelection; 

$(document).ready(function() { 

    $("#jqGrid").jqGrid({ 
    url: 'servlet/getData', 
    datatype: "json", 
    editurl: "servlet/updateProduct", 
    page: 1, 
    colModel: [ 
     { label: 'ID', name: 'productId', width: 75, key: true }, 
     { label: 'Category', name: 'categoryName', width: 90 }, 
     { label: 'Name', name: 'productName', width: 100 }, 
     { label: 'Country', name: 'country', width: 80 }, 
     { label: 'Price', name: 'price', width: 80 }, 
     { label: 'Qty', name: 'quantity', width: 80 }, 
     { label: 'Included?', name: 'included', width: 80, 
       editable: true, 
       edittype: "checkbox", 
       editOptions: {value:"Yes:No"} } 
    ], 
    viewrecords: true, 
    onSelectRow: function (rowid) { 
     var grid = $('#jqGrid'); 
     if (rowid && rowid !== lastSelection) { 
      grid.jqGrid('restoreRow', lastSelection); 
      lastSelection = rowid; 
     } 
     grid.jqGrid('editRow', lastSelection, {keys: true, 
      extraparam : { 
       home: "livonia", 
      } 
     } 
     ); 

    }, 
    width: 780, 
    height: 200, 
    rowNum: 10, 
    pager: "#jqGridPager", 

    subGrid: true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
     var lastSelection; 

     var grid = $('#jqGrid'); 
     var row = grid.getRowData(row_id); 
     var productId = row.productId; 

      var subgrid_table_id = subgrid_id + "_table"; 
      var subgrid_pager_id = subgrid_id + "_pager"; 

      jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>" + 
        "<div id='" + subgrid_pager_id + "'></div>"); 

      jQuery("#"+subgrid_table_id).jqGrid({ 
       url: 'servlet/getProductWarehouses?q=2&id=' + row_id + '&productId=' + productId, 
       datatype: "json", 
       editurl: "servlet/updateProductWarehouse", 
       page: 1, 
       colModel: [ 
        { label: 'Product ID', name: 'productId', width: 75, key: false, hidden: true }, 
        { label: 'Whse ID', name: 'whseId', width: 60, key: true }, 
        { label: 'Whse Name', name: 'whseName', width: 90 }, 
        { label: 'Qty', name: 'quantity', width: 50 }, 
        { label: 'Included?', name: 'included', width: 60, 
        editable: true, 
        edittype: "checkbox", 
        editOptions: {value:"Yes:No"} } 
       ], 
      viewrecords: true, 

      onSelectRow: function (rowid) { 
       var grid = $(this); 
       if (rowid && rowid !== lastSelection) { 
        grid.jqGrid('restoreRow', lastSelection); 
        lastSelection = rowid; 
       } 
       grid.jqGrid('editRow', lastSelection, {keys: true, 
        extraparam : { 
         productId: function(){ 
          var row = grid.getRowData(lastSelection); 
          var temp = row['productId']; 
          return temp; 
         }, 
        } 
       } 
       ); 

      }, 

       height: '100%', 
       width: 600, 
       rowNum: 5, 
      pager: "#" + subgrid_pager_id 

      }); 
     } 

}); 


}); 

我想我需要使用saveRow的方法，但我不知道何时调用它，或者如何让单元格的值，我需要做父行更新。我怎么做到这一点？

Answer 1

如果我正确理解你的问题，你需要能够保存列的子网格的原始状态编辑一排子网格。保存行更改后，要调整父行的quantity列的值。

要实现这个需求，你可以使用aftersavefunc回调editRow。在开始之前，editRow可以保存的included旧值：

var origIncluded = grid.jqGrid('getCell', lastSelection, 'included'); 

，那么你可以通过指定其他aftersavefunc回调的调用editRow。

在此之前，我会建议你做次网格可编辑的productId列，并添加属性editrules: {edithidden: true}：

{ label: 'Product ID', name: 'productId', width: 75, 
    editable: true, hidden: true, editrules: { edithidden: true } } 

由于结果productId值将被包含在发布的数据。如果它不正是你所需要的，那么你可以很容易修改上面的代码，你需要什么

grid.jqGrid('editRow', lastSelection, { 
    keys: true, 
    aftersavefunc: function (rowid, jqXHR, savedData) { 
     if (savedData.included !== origIncluded) { 
      var $mainGrid = $("#jqGrid"), 
       subgridQuantity = parseFloat(grid.jqGrid('getCell', rowid, 'quantity')), 
       mainGridQuantity = parseFloat($mainGrid.jqGrid('getCell', row_id, 'quantity')); 
      mainGridQuantity += savedData.included === 'Yes' ? 
       subgridQuantity : -subgridQuantity; 
      $mainGrid.jqGrid('setCell', row_id, 'quantity', mainGridQuantity); 
     } 
    } 
}); 

：中editRow呼叫可以归纳为以下。