beforeSubmit 事件到 jqgrid 自定义表单上的自定义按钮不起作用

Question

我正在使用 jqgrid 4.5.2 版本 Jquery-3.2.1.

在 jqgrid 中，代替编辑按钮（添加、编辑和删除）实现了自定义（添加、编辑和删除）按钮。现在单击自定义 add/edit 按钮会打开一个自定义表单。下面是自定义按钮的onclick事件。

这意味着我们用我们自己的自定义表单替换了 jqgrid 默认的 edit/add 表单。早些时候我们用 beforeSubmit 事件编写了一些验证，这些验证在 jqgrid 的默认（add/edit）形式下运行良好。现在我想对替换的自定义表单应用相同的验证。

function(myGrid){
  myGrid.getGridParam('dataGrid').openEditFormIndicator();
}(myGrid)

该自定义表单具有自定义提交和取消按钮。现在我想将 beforeSubmit 事件添加到此提交按钮。由于表单是自定义的，jqgrids 默认的 beforeSubmit 事件不起作用。

Add/Edit 表单由我们自己的框架构建，该框架基于 Java。这些表格完全独立于 jqgrid。我只是从 jqgrid 行（双击或单击编辑按钮）获取 id 并将其传递给模板，该模板从数据库中提取数据并形成行编辑表单。如果传递的 id 为空或未在 db 上找到，则使用相同的模板形成一个空的（添加）表单。

DataGrid.prototype.openEditFormIndicator = function() {
var id = this.grid.getGridParam('selrow')
if(!id) {
    var gridId = this.grid.attr('id');
    var idSelector = "#alertmod_" + gridId;
    $.jgrid.viewModal(idSelector, {
        gbox: "#gbox_" + $.jgrid.jqID(gridId),
        jqm: true
    });
    $(idSelector).find(".ui-jqdialog-titlebar-close").focus();
}
else {
    //openInteractiveForm('form_plugin_examples',this.options.formIndicatorId,'id',id,'true'); 
    var encodedPkId = encodeURIComponent(id);
    this.openFormIndicator('Id:' + encodedPkId + ',pkId:' + encodedPkId + ',Search:id%3A' + encodedPkId + ',IndicatorId:' + this.options.formIndicatorId + ',Debug:true' + ',FilterField:id,FilterValue:' + encodedPkId);
    // TODO width, length, position
}
};

DataGrid.prototype.openFormIndicator = function(optionsStr) {
  DialogBoxEdit.newWindow(this.options.formIndicatorId, optionsStr);
};

通过以上两个函数，在DialogBoxEditHandler.js中形成了add/edit形式。 js内部调用模板创建表单。

创建的表单包含以下两个按钮，我需要为其添加 beforeSubmit 事件。

<Button id="lnk-close" onclick="closeDialogBoxControl($(this).closest('form'));" class="btn-default">Close</Button>
<Button id="lnk-submit" onclick="save_form_data($(this).closest('form'),true,'72');MD.ui.reloadGrid();"  class="btn-primary ui-dialog-close">Save</Button>

Answer 1

看来你是第二次提这个问题了。 this is here

的文档

基本上在这种情况下，您需要定义该事件和 return 适当的数组。当您单击在 onclick 事件中定义的自定义按钮时，使用 link 中提供的帮助，您可以执行以下操作：

...
jQuery("#grid_id").jqGrid('editGridRow', rowid, {
    ...
    beforeSubmit : function( postdata, formid ) {
        if(someconditionOK) {
            return [true,''];
        } else {
            return [false,'Error submiting data'];
        }
    },
    ...
});

Answer 2

如果我们想使用 beforeSubmit 事件，我们必须使用内置的表单编辑 - 在所有其他情况下，该事件将不起作用 - 简而言之，我们需要在提交之前编写自己的自定义，以防使用我们自己的编辑表单.

beforeSubmit 事件到 jqgrid 自定义表单上的自定义按钮不起作用

beforeSubmit event to custom button on a custom form of jqgrid doesn't work

javascript

jquery

jqgrid