jquery - 如何在 jqgrid 内联编辑上添加任何逻辑以在按下回车键时保存行？

Question

我想计算 jqgrid 中按下回车键时的总数。 try catch 用户按 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'}
           ]

为了调用行编辑，我在“onSelectRow”上调用“editRow”。 要求是我想计算总计(即数学+工程+科学，无论用户输入是什么)并将其结果设置在保存行的“TotalMarks”销售中

我尝试过使用 key=true，甚至尝试将“OnEnter”事件绑定(bind)到 here 中提到的网格。 .

不知道如何实现此功能(只需按 Enter 键计算总计以保存记录并在总计单元格中设置相应的值)..如果 @Oleg 你可以指导我这些，那将是很大的帮助。

Answer 1

使用存在列(依赖于另一个列)的网格是常见情况。所以我尝试对你的问题做出详细的回答。

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

另一方面，一般来说使用 custom formatter 是很好的。在“TotalMarks”列上创建“虚拟”列，该列的值不在源数据中，但该值将根据其他列的值进行计算。在这种情况下，您只需定义相应的自定义格式化程序，如果您使用本地数据类型，请定义自定义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”}并且编辑看起来更多舒适