如何在输入按下时将jqgrid内联编辑中的任何逻辑添加到saveRow？

Question

我想计算jqgrid中输入的总数。 尝试在用户按Enter键时捕获jqgrid的enter键事件以保存编辑行但不能这样做。

以下是我的jqgrid（MarksTbl）列的代码段

 colModel: [
              { name: 'Id', index: 'Id', hidden: true },
              { name: 'Maths', index: 'Maths', hidden: true },
              { name: 'Eng', index: 'Eng', editable: true },
              { name: 'Sci', index: 'Sci', editable: true },
              { name: 'TotalMarks', index: 'TotalMarks'}
           ]

要调用行编辑，我正在调用＆＃39; editRow＆＃39; on＆＃39; onSelectRow＆＃39;。  要求我想要计算总数（即数学+英语+科学数据，无论用户输入的是什么），并在“总计标记”中设置结果。出售已保存的行

我尝试过使用key = true，甚至尝试绑定＆＃39; OnEnter＆＃39;在 here上提到的网格事件。

不知道怎样才能实现这个功能（只需计算按下输入的总数来保存记录，在总单元格中设置相应的值）..如果@Oleg可以指导我这些将会有很大的帮助。

Answer 1

使用有列的网格，这是一个常见的情况。所以我试着对你的问题做出详细的回答。

首先，您可以通过以下简单方式实现您的要求：您可以使用editRow的aftersavefunc选项在行修改后进行一些自定义操作 。例如，您可以重新计算"TotalMarks"列的新值，并使用setRowData作为参数显式调用{TotalMarks: newValue}。

另一方面，通常在"TotalMarks"列上使用custom formatter来制作“虚拟”列，其值不在源数据中，但是哪个值将根据其他列的值。在这种情况下，您只需定义相应的自定义格式化程序，如果使用本地数据类型，则定义自定义sorttype（请参阅the answer，this one和this one）。如果您使用数据编辑，那么您不应忘记定义unformat（unformatter function）。

The following demo演示了这种方法。它有"total"列，其内容计算为"amount"和"tax"列的内容之和。输入数据不包含"total"列的任何值。列"total"是可编辑的，但由于editoptions: { disabled: "disabled" }选项，用户无法直接更改值：

"total"的相应定义是

{ name: "total", width: 60, template: numberTemplate,
    sorttype: function (cellValue, rowObject) {
        return parseFloat(rowObject.amount) + parseFloat(rowObject.tax);
    },
    formatter: function (cellValue, options, rowObject) {
        var total = parseFloat(rowObject.amount) + parseFloat(rowObject.tax);
        return $.fn.fmatter.call(this, "currency", total, options);
    },
    unformat: function (cellValue, options, cell) {
        // make copy of options
        var opt = $.extend(true, {}, options);

        // change opt.colModel to corresponds formatter: "currency"
        opt.colModel.formatter = "currency";
        delete opt.colModel.unformat;

        // unformat corresponds to formatter "currency"
        return $.unformat.call(this, cell, opt);
    },
    editoptions: { disabled: "disabled" } }

顺便说一句，我使用以下onSelectRow代码实现内联编辑：

onSelectRow: function (rowid) {
    var $self = $(this),
        // savedRows array is not empty if some row is in inline editing mode
        savedRows = $self.jqGrid("getGridParam", "savedRow");
    if (savedRows.length > 0) {
        $self.jqGrid("restoreRow", savedRows[0].id);
    }
    $self.jqGrid("editRow", rowid, { keys: true });
}

如何看到代码不会像the well known code example中那样使用任何lastSel变量。如果在一个HTML页面上使用多个可编辑网格，这可能很实用。

如果您不想让列"total"可编辑，可以使用aftersavefunc强制重新计算total：

onSelectRow: function (rowid) {
    var $self = $(this),
        // savedRows array is not empty if some row is in inline editing mode
        savedRows = $self.jqGrid("getGridParam", "savedRow");
    if (savedRows.length > 0) {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        $self.jqGrid("restoreRow", savedRows[0].id);
    }
    $self.jqGrid("editRow", rowid, {
        keys: true,
        aftersavefunc: function (rowid) {
            var $this = $(this),
                rowObject = $this.jqGrid("getGridParam", "datatype") === "local" ?
                    $this.jqGrid("getLocalRow", rowid) :
                    {
                        amount: $this.jqGrid("getCell", rowid, "amount"),
                        tax: $this.jqGrid("getCell", rowid, "tax")
                    };
            // one ca call setRowData below with two properties
            // only which are required for
            $this.jqGrid("setRowData", rowid, {
                amount: rowObject.amount,
                tax: rowObject.tax,
                total: "dummy"
            });
        }
    });
}

列"total"有editable: false属性而不是editoptions: { disabled: "disabled" }，编辑看起来更舒服