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

子网格中的“包含”列在编辑行时显示一个复选框。

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

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

仓库行包含值从“是”更改为“否”：减去仓库中的数量从父行的数量开始。
仓库行包含值从“否”更改为“是”：将仓库行中的数量添加到父行中的数量。

我不确定在提交保存之前如何在子网格行中获取Include单元格的值。我还不确定在子网格行保存发生后我将在什么事件中触发对父行的更新。

这是我到目前为止的代码：

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

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

要实施此要求，您可以使用aftersavefunc的{{1}}回调。在开始editRow之前，您可以保存editRow的旧值：

included

然后您可以通过指定其他var origIncluded = grid.jqGrid('getCell', lastSelection, 'included');回调来呼叫editRow。

在此之前，我建议您将aftersavefunc子网格列编辑为可添加属性productId：

editrules: {edithidden: true}

结果，{ label: 'Product ID', name: 'productId', width: 75, editable: true, hidden: true, editrules: { edithidden: true } }的值将包含在已发布的数据中。 productId的调用可以简化为以下内容：

editRow

如果它不完全符合您的需要，那么您可以轻松地将上述代码修改为您需要的代码。

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

1 个答案: