jqgrid-添加新行并禁用restoreRow功能 [英] jqgrid - Add new row and disable restoreRow function

问题描述

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

问题在于，添加新行后，我总是要在保存之前验证已编辑的行，但是ESC按钮会导致restoreRow. 对于由doubliClick进行的常规编辑原因，我想使用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中填写所有代码.

解决方案

我同意这是一个问题，因为选项keys: true注册了keydown事件处理程序，该处理程序同时处理两者 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处理程序.如果是e.keyCode === 13，则只需调用saveRow.所需的rowid可以从外部范围中获取(如果您在oneditfunc内部进行)，也可以从e.target中获取:$(e.target).closest("tr.jqgrow").attr("id").

另一个选择:您可以添加诸如jqgrid-new-row之类的类(这是)之后将rel ="nofollow"> addRow 方法添加到行(<tr>).您应该在调用的editRow中添加afterrestorefunc回调.在afterrestorefunc内部，您可以测试该行是否具有jqgrid-new-row类，并在这种情况下调用delRowData行. 顺便说一句，如果您添加具有jqgrid-new-row名称的类(或者使用addRow代替addRowData)，则删除的行将由restoreRow 自动完成(请参见代码片段).

如果上面的代码仅在编辑新添加的行的情况下有效，则您甚至可以无条件地对类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
    }
});
 

If I will add new row and I will enable automatic editing newly added row, then I want to perform validation and save row by ENTER button, BUT I don't want to restore row by ESC button. Because I set required: true by all fields and If newly added row will be to have empty at least one field, then ESC button (restoreRow) causes inconsistency my data, because will not be performed validation and newly added row will be to have empty fields. Although I set required: true.

The problem is that After added new row I always want to validate the edited row before saving, but ESC button causes restoreRow. For normal editing causes by doubliClick I want use ESC for restore row and ENTER for save row.

My code is generated from 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;
    }
};

If it will be necessary, I will fill all code in coffeescript.

解决方案

I agree that it's a problem because the option keys: true register keydown event handler which process both Enter and Esc. You can't just inform jqGrid to process Enter, but don't process Esc.

If you don't call restoreRow in your code then you could probably salve your problem by usage of beforeCancelRow callback which you could define in $.jgrid.inlineEdit.

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

The code above will don't allows restoreRow at all. You can modify the code by including some validations.

One more options which you have: don't use keys: true, but register your own keydown handler on all <input> and <select> fields in the editing row. You can do this inside of oneditfunc callback. See the source code of keydown handler used by jqGrid. You need just call of saveRow in case of e.keyCode === 13. The required rowid you can either get from the outer scope (if you do this inside of oneditfunc) or to get it from e.target: $(e.target).closest("tr.jqgrow").attr("id").

One more option: you can add some class like jqgrid-new-row (it's the class used by addRow method) to the row (<tr>) directly after call of addRowData ($("#" + dataIds[dataIds.length - 1]).addClass("jqgrid-new-row")). You should add afterrestorefunc callback to editRow which you call. Inside of the afterrestorefunc you can test whether the row has jqgrid-new-row class and call delRowData row in the case. By the way if you add the class with jqgrid-new-row name (or to use addRow instead of addRowData) then deleting of canceled row will be done automatically by restoreRow (see the code fragment).

You can even do this unconditionally without any tests for the class jqgrid-new-row if the above code work only in case of editing of new added row. So the call of editRow could be like below

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功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！