【问题标题】:How to add any logic on the jqgrid inline edit to saveRow on enter press?如何在输入时将 jqgrid 内联编辑上的任何逻辑添加到 saveRow?
【发布时间】:2014-07-23 08:43:28
【问题描述】:

我想在 jqgrid 中计算输入时的总数。 当用户按回车键保存编辑行但无法保存时,尝试捕获 jqgrid 的回车键事件。

这是我的 jqgrid (MarksTbl) 列的代码 sn-p

 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”销售中

我尝试过使用 key=true,甚至尝试将“OnEnter”事件绑定到 here 上提到的网格。

不知道如何实现此功能(只需按回车计算总数以保存记录在总单元格中设置相应的值)。如果@Oleg您能指导我这些将非常有帮助。

【问题讨论】:

  • 你到底在做什么? “总数”在哪里?它是网格的一列吗?它是网格页脚中的值吗?...editRow 支持 keys 选项,您可以将其设置为 true,但您应该发布 如何使用内联编辑(您是否调用 @ 987654326@直接在onSelectRow例如?你用inlineNav吗?你用formatter: "actions"吗?)。正确的文本没有提供您的实施的任何细节,它对您所做的事情和您想要做的事情的描述不够清楚。对不起。
  • @Oleg 感谢您的回复......我真的很抱歉我第一次明确表示......我已经根据您的需要更新了问题可以请通过它并提供帮助那..如果您能告诉我如何动态地获得总成绩,这也会有所帮助..是否有可能发生单元格更改事件或类似事件。

标签: jquery jqgrid


【解决方案1】:

在有列的网格中工作,它依赖于另一个列,这是常见的情况。所以我试着对你的问题做出详细的回答。

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

另一方面,通常在"TotalMarks" 列上使用custom formatter 来制作“虚拟”列,哪个值不在源数据中,但哪个值将根据其他列的值计算出来.如果您只需要定义相应的自定义格式化程序,并且如果您使用本地数据类型,请定义自定义sorttype(请参阅the answerthis onethis 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 });
}

如何看到代码不使用任何lastSel 变量,如the well known code example。如果在一个 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" },编辑看起来更舒服

【讨论】:

  • 感谢您的快速回复...我真的很感谢您的帮助 如果它解决了我的问题会尝试并更新您..
  • 非常感谢@Oleg 它对我有用......它也消除了我的大部分疑虑...... :)
  • 我一直在寻找的一个答案是......在这种情况下有什么方法可以验证总列......因为我想确保总数必须大于某个水平...... .在保存任何特定记录之前。 @Oleg 很抱歉为此打扰您。
  • @Rekha:如果您只需将 fixed 限制设置为total,那么您可以使用editrulesminValuemaxValue 或使用custom: truecustom_func。您还可以在total 列中监视change 事件(在editoptions 中使用dataEvents)并用ui-state-error 类标记输入(如here用户更改它.如果您需要验证多个字段(依赖字段)会很困难,但即使这样也是可能的。
  • 实际上我所说的“总计”字段是一个不可编辑的字段,它的值是根据其他字段的计算来设置的。因此,我在验证它时遇到了困难...因为我无法通过设置 editrule 属性来设置自定义验证。那么我怎样才能通过将总列保持为上述示例描述的不可编辑来实现相同的效果。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-05-17
  • 2012-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多