jqgrid - 添加新行并禁用 restoreRow 功能

Question

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

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

我的代码是从咖啡脚本生成的

$("#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 事件处理程序，它处理both Enter 和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，而是在编辑行中的所有<input> 和<select> 字段上注册您自己的keydown 处理程序。您可以在 oneditfunc 回调中执行此操作。请参阅 jqGrid 使用的 keydown 处理程序的 the source code。如果是e.keyCode === 13，您只需拨打saveRow。所需的rowid 可以从外部范围获取（如果您在oneditfunc 内部执行此操作）或从e.target 获取它：$(e.target).closest("tr.jqgrow").attr("id")。

另一种选择：您可以在调用addRowData ($("#" + dataIds[dataIds.length - 1]).addClass("jqgrid-new-row")) 后直接将jqgrid-new-row 之类的类（这是addRow 方法使用的类）添加到行（<tr>）。您应该将afterrestorefunc 回调添加到您调用的editRow。在afterrestorefunc 内部，您可以测试该行是否具有jqgrid-new-row 类并在案例中调用delRowData 行。 顺便说一下，如果您添加带有jqgrid-new-row 名称的类（或使用addRow 而不是addRowData），那么restoreRow 将自动删除已取消的行（请参阅@987654323 @)。

如果上面的代码仅在编辑新添加的行时有效，您甚至可以无条件地执行此操作，而无需对 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
    }
});