Question

如果我要添加新行并且我将启用自动编辑新添加的行，那么我想通过ENTER按钮执行验证并保存行，但我不想通过ESC按钮恢复行。因为我按所有字段设置required: true，如果新添加的行将至少有一个字段为空，则ESC按钮（restoreRow）会导致我的数据不一致，因为不会执行验证并且新添加行将有空字段。虽然我设置了required: true。

问题是添加新行后我总是想在保存之前验证编辑的行，但是ESC按钮会导致restoreRow。 正常编辑的原因是doubleliClick我希望使用ESC进行恢复行，使用ENTER进行保存行。

我的代码是从coffeescript生成的

$("#add-row").click((function(_this) {
  return function(e) {
    e.preventDefault();
    return _this.saveEditingRow(function() {
      var dataIds;
      _this.table.jqGrid("addRowData", void 0, "last");
      dataIds = _this.table.jqGrid("getDataIDs");
      if (dataIds.length > 0) {
        return _this.table.jqGrid("editRow", dataIds[dataIds.length - 1], {
          keys: true,
          url: "clientArray",
          aftersavefunc: function(rowId) {
            return retypeColumnValues.call(table, rowId);
          }
        });
      }
    });
  };
})(this));


Table.prototype.saveEditingRow = function(successfunc, errorfunc) {
    var i, result, savedRows, success, _i, _ref;
    savedRows = this.table.jqGrid("getGridParam", "savedRow");
    success = true;
    for (i = _i = 0, _ref = savedRows.length; _i < _ref; i = _i += 1) {
      if (savedRows.length > 0) {
        result = this.table.jqGrid("saveRow", savedRows[i].id, {
          url: "clientArray"
        });
        if (!result && success) {
          success = false;
        }
      }
    }
    if (success) {
      return typeof successfunc === "function" ? successfunc() : void 0;
    } else {
      return typeof errorfunc === "function" ? errorfunc() : void 0;
    }
};

如果有必要，我将填写coffeescript中的所有代码。

Answer 1

我同意这是一个问题，因为选项keys: true注册keydown事件处理程序处理 输入和 Esc 。您不能只通知jqGrid处理 Enter ，但不处理 Esc 。

如果您未在代码中致电restoreRow，那么您可以通过使用beforeCancelRow回调来解决问题，您可以在$.jgrid.inlineEdit中定义。

$.extend(true, $.jgrid.inlineEdit, {
    beforeCancelRow: function () { // the parameters options and rowid can be used
        return false;
    }
});

上面的代码根本不允许restoreRow。您可以通过包含一些验证来修改代码。

您还有一个选项：不要使用keys: true，而是在编辑行的所有keydown和<input>字段中注册您自己的<select>处理程序。您可以在oneditfunc回调中执行此操作。请参阅jqGrid使用的keydown处理程序的the source code。在saveRow的情况下，您只需拨打e.keyCode === 13即可。您可以从外部范围获取所需的rowid（如果您在oneditfunc内执行此操作）或从e.target获取$(e.target).closest("tr.jqgrow").attr("id")。

还有一个选项：您可以在调用jqgrid-new-row后直接向{（1}}方法）添加一些类<tr>（这是addRow方法使用的类）到行（addRowData）（$("#" + dataIds[dataIds.length - 1]).addClass("jqgrid-new-row")）。您应该将afterrestorefunc回调添加到您呼叫的editRow。在afterrestorefunc的内部，您可以测试行是否有jqgrid-new-row类，并在案例中调用delRowData行。 顺便说一下，如果您使用jqgrid-new-row名称添加该类（或使用addRow而不是addRowData），则restoreRow会自动删除已取消的行（见the code fragment）。

如果在编辑新添加的行的情况下，上述代码仅 ，则无需对类jqgrid-new-row进行任何测试即可无条件执行此操作。因此，editRow的调用可能如下所示

return _this.table.jqGrid("editRow", dataIds[dataIds.length - 1], { keys: true, url: "clientArray", aftersavefunc: function(rowId) { return retypeColumnValues.call(table, rowId); }, afterrestorefunc: function(rowId) { _this.table.jqGrid("delRowData", rowId); // delete after cancel editing } });

jqgrid - 添加新行并禁用restoreRow函数

1 个答案: