如何在Enter按下时在jqgrid内联编辑上向saveRow添加任何逻辑? [英] How to add any logic on the jqgrid inline edit to saveRow on enter press?

问题描述

我想在jqgrid中计算回车总次数. 试图捕获当用户按下Enter键以保存编辑行但无法保存时的jqgrid的enter键事件.

I want to calculate the total on enter press in jqgrid. Tried to capture the enter key event of the jqgrid when the user presses enter to save the editing row but not able to do so.

这是我的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". 要求是我要计算总数(即，Maths + Eng + Sci，无论用户输入什么内容)，并将其结果设置在已保存行的"TotalMarks"卖出中

To invoke row editing i am calling the 'editRow' on 'onSelectRow'. The requirment is i want to calculate the total(ie. Maths+Eng+Sci whatever the users input is) and set the result of it in 'TotalMarks' sell of saved row

我尝试使用key = true，甚至尝试将'OnEnter'事件绑定到

I have tried using the key=true, even tried to bind the 'OnEnter' event to the grid mentioned over here.

不知道如何实现此功能(只需按Enter即可计算总和，以将记录集保存到总单元格中的相应值).如果@Oleg可以指导我，将对您有很大帮助.

Not knowing how can achieve this feature(just calculate the total on press enter to save record set the corresponding value in total cell).. It would be great help if @Oleg you can guide me on these.

推荐答案

使用带有列的网格(这取决于另一列)是常见的情况.因此，我尝试对您的问题进行详细的回答.

Working with grids where there is column, which depends from another one, is common situation. So I try to make detailed answer on your question.

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

First of all you can implement your requirement in the following simple way: you can use aftersavefunc option of editRow to make some custom actions after the row have been modified. For example you can recalculate new value for "TotalMarks" column and explicitly call setRowData with {TotalMarks: newValue} as parameter.

另一方面，通常使用自定义格式化程序在"TotalMarks"列上创建虚拟"列，其值不在源数据中，但仅根据其他列的值计算得出.在这种情况下，您只需定义相应的自定义格式化程序，如果使用本地数据类型，则定义自定义sorttype(请参见答案，这和这个).如果您使用数据编辑功能，则不要忘记定义unformat(取消格式化功能).

On the other side it's good in general to use custom formatter on "TotalMarks" column to make "virtual" column which value is not in the source data, but which value will be just calculated based on the value of other columns. In the case you need just define the corresponding custom formatter and, if you use local datatype, define custom sorttype (see the answer, this one and this one). If you use editing of data then you should don't forget to define unformat (unformatter function).

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

The following demo demonstrates the approach. It have "total" column which content calculated as the sum of content of "amount" and "tax" columns. The input data don't contains any value for "total" column. The column "total" is editable, but because of editoptions: { disabled: "disabled" } option the user can't change the value directly:

"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的以下代码来实现内联

By the way, I used the following code of onSelectRow to implement inline editing:

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 });
}

如何看到代码不使用lastSel变量="nofollow noreferrer">众所周知的代码示例.如果在一个HTML页面上使用多个可编辑的网格，这可能是实用的.

How one can see the code don't use any lastSel variable like in the well known code example. It could be practical in case of usage multiple editable grids on one HTML page.

如果不想使"total"列完全可编辑，则可以使用aftersavefunc强制重新计算total:

If one don't want to make the column "total" editable at all one can use aftersavefunc to force recalculation of the 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" }，并且编辑看起来更舒适

The column "total" has editable: false property instead of editoptions: { disabled: "disabled" } and the editing looks more comfortable

这篇关于如何在Enter按下时在jqgrid内联编辑上向saveRow添加任何逻辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！