关于jquery:BeforeSubmit

BeforeSubmit & ClearAfterAdd Events not firing

我调整了这个链接本地表单编辑演示和 jqGrid 4.4.1 以适应我的解决方案,但是我更改了 CloseAfterAdd:false 并添加了 ClearAfterAdd:truebeforeSubmit: CheckValid。但是,这两个事件都没有触发以实现我的目标。我的目标是在使用回车键作为保存键添加记录时保持对话框表单打开,并在保存后清除表单。其次验证 CheckValid 函数中的一组相关字段。请有人指出我做错了什么。谢谢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
function checkvalue(value, colname) { alert(value || colname); return [true,""]; }
        var vlcontractor, field2, field3, field4, vlBuckid, vlHospid, myCustomCheck, myCustomCheck2;
        myCustomCheck = function (value, colname) {
            switch (colname) {
                case 'Contractor':
                    vlcontractor = value;
                    break;
                case 'Company Name':
                    field2 = value;
                    break;
                case 'Project End Date':
                    field3 = value;
                    break;
                default:
                    break;
            }

            if (vlcontractor =="Yes" && (field2 == undefined || field3 == undefined))
            { return [false,"Company/State ID/End Date is needed for a Contractor"]; }

            if (vlcontractor != undefined  && field2 != undefined) {
                // validate the fields here
                return [false,"some error text"];
            } else {
                //alert('we are good');
                return [true];
            }
        };
        myCustomCheck2 = function (value, colname) {
            switch (colname) {
                case 'BUCK ID':
                    vlBuckid = value;
                    break;
                case 'Hospital ID':
                    vlHospid = value;
                    break;
            }
            if ((vlBuckid == undefined && vlHospid == undefined) || (vlBuckid == '' && vlHospid == ''))
            { return [false,"A BuckID or Hospital ID is required."]; }
            else { return [true]; }
        }

        $(function () {
            var lastSel,
            mydata = '',
                grid = $("#list"),
                getColumnIndex = function (columnName) {
                    var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                    for (i = 0; i < l; i++) {
                        if ((cm[i].index || cm[i].name) === columnName) {
                            return i; // return the colModel index
                        }
                    }
                    return -1;
                },
                CheckValid = function (postdata, formid) {
                    alert(postdata);
                    return false;
                },
                onclickSubmitLocal = function (options, postdata) {
                    var $this = $(this), grid_p = this.p,
                        idname = grid_p.prmNames.id,
                        grid_id = this.id,
                        id_in_postdata = grid_id +"_id",
                        rowid = postdata[id_in_postdata],
                        addMode = rowid ==="_empty",
                        oldValueOfSortColumn,
                        new_id,
                        tr_par_id,
                        colModel = grid_p.colModel,
                        cmName,
                        iCol,
                        cm;

                    // postdata has row id property with another name. we fix it:
                    if (addMode) {
                        // generate new id
                        new_id = $.jgrid.randId();
                        while ($("#" + new_id).length !== 0) {
                            new_id = $.jgrid.randId();
                        }
                        postdata[idname] = String(new_id);
                    } else if (typeof postdata[idname] ==="undefined") {
                        // set id property only if the property not exist
                        postdata[idname] = rowid;
                    }
                    delete postdata[id_in_postdata];

                    // prepare postdata for tree grid
                    if (grid_p.treeGrid === true) {
                        if (addMode) {
                            tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id';
                            postdata[tr_par_id] = grid_p.selrow;
                        }

                        $.each(grid_p.treeReader, function (i) {
                            if (postdata.hasOwnProperty(this)) {
                                delete postdata[this];
                            }
                        });
                    }

                    // decode data if there encoded with autoencode
                    if (grid_p.autoencode) {
                        $.each(postdata, function (n, v) {
                            postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
                        });
                    }

                    // save old value from the sorted column
                    oldValueOfSortColumn = grid_p.sortname ==="" ? undefined : grid.jqGrid('getCell', rowid, grid_p.sortname);

                    // save the data in the grid
                    if (grid_p.treeGrid === true) {
                        if (addMode) {
                            $this.jqGrid("addChildNode", new_id, grid_p.selrow, postdata);
                        } else {
                            $this.jqGrid("setTreeRow", rowid, postdata);
                        }
                    } else {
                        if (addMode) {
                            // we need unformat all date fields before calling of addRowData
                            for (cmName in postdata) {
                                if (postdata.hasOwnProperty(cmName)) {
                                    iCol = getColumnIndex.call(this, cmName);
                                    if (iCol >= 0) {
                                        cm = colModel[iCol];
                                        if (cm && cm.formatter ==="date") {
                                            postdata[cmName] = $.unformat.date.call(this, postdata[cmName], cm);
                                        }
                                    }
                                }
                            }
                            $this.jqGrid("addRowData", new_id, postdata, options.addedrow);
                        } else {
                            $this.jqGrid("setRowData", rowid, postdata);
                        }
                    }

                    if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
                        // close the edit/add dialog
                        $.jgrid.hideModal("#editmod" + grid_id, {
                            gb:"#gbox_" + grid_id,
                            jqm: options.jqModal,
                            onClose: options.onClose
                        });
                    }

                    if (postdata[grid_p.sortname] !== oldValueOfSortColumn) {
                        // if the data are changed in the column by which are currently sorted
                        // we need resort the grid
                        setTimeout(function () {
                            $this.trigger("reloadGrid", [{ current: true}]);
                        }, 100);
                    }

                    // !!! the most important step: skip ajax request to the server
                    options.processing = true;
                    $('#gridData').val(JSON.stringify(grid_p.data));
                    return {};
                },
                editSettings = {
                    //recreateForm: true,
                    jqModal: false,
                    reloadAfterSubmit: false,
                    closeOnEscape: true,
                    savekey: [true, 13],
                    closeAfterEdit: true,
                    beforeSubmit: CheckValid,
                    onclickSubmit: onclickSubmitLocal
                },
                addSettings = {
                    //recreateForm: true,
                    jqModal: false,
                    beforeSubmit: CheckValid,
                    reloadAfterSubmit: false,
                    savekey: [true, 13],
                    closeOnEscape: true,
                    closeAfterAdd: true,
                    clearAfterAdd: true,
                    onclickSubmit: onclickSubmitLocal
                },
                delSettings = {
                    // because I use"local" data I don't want to send the changes to the server
                    // so I use"processing:true" setting and delete the row manually in onclickSubmit
                    onclickSubmit: function (options, rowid) {
                        var $this = $(this), grid_id = $.jgrid.jqID(this.id), grid_p = this.p,
                            newPage = grid_p.page;

                        // reset the value of processing option to true to
                        // skip the ajax request to 'clientArray'.
                        options.processing = true;

                        // delete the row
                        $this.jqGrid("delRowData", rowid);
                        if (grid_p.treeGrid) {
                            $this.jqGrid("delTreeNode", rowid);
                        } else {
                            $this.jqGrid("delRowData", rowid);
                        }
                        $.jgrid.hideModal("#delmod" + grid_id, {
                            gb:"#gbox_" + grid_id,
                            jqm: options.jqModal,
                            onClose: options.onClose
                        });

                        if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                            if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                                // if after deliting there are no rows on the current page
                                // which is the last page of the grid
                                newPage--; // go to the previous page
                            }
                            // reload grid to make the row from the next page visable.
                            $this.trigger("reloadGrid", [{ page: newPage}]);
                        }

                        return true;
                    },
                    processing: true
                },
                initDateEdit = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: 'dd-M-yy',
                            //autoSize: true,
                            showOn: 'button',
                            changeYear: true,
                            changeMonth: true,
                            showButtonPanel: true,
                            showWeek: true
                        });
                    }, 100);
                },
                initDateSearch = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: 'dd-M-yy',
                            //autoSize: true,
                            //showOn: 'button', // it dosn't work in searching dialog
                            changeYear: true,
                            changeMonth: true,
                            showButtonPanel: true,
                            showWeek: true
                        });
                    }, 100);
                };
            grid.jqGrid({
                datatype: 'local',
                data: mydata,
                //colNames: [/*'Inv No', */'Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                colNames: ['Emp/Stu ID', 'Last Name, First Name', 'BUCK ID', 'Hospital ID', 'Contractor', 'Company-Name', 'State ID', 'Project End Date'],
                colModel: [
                        { name: 'empstuid', index: 'empstuid', editable: true, width: 80, editrules: { required: false }, editoptions: { maxlength: 10 } },
                        { name: 'lastFirst', index: 'lastFirst', editable: true, width: 180, editrules: { required: true} },
                        { name: 'buckid', index: 'buckid', editable: true, width: 120, editrules: { custom: true, custom_func: myCustomCheck2 } },
                        { name: 'hospid', index: 'hospid', editable: true, width: 120, editrules: { custom: true, custom_func: myCustomCheck2 } },
                        {
                            name: 'contractor', index: 'contractor', editable: true, edittype: 'checkbox',
                            editoptions: { value:"Yes:No" }, width: 70, editrules: { custom: true, custom_func:myCustomCheck }
                        },
                        { name: 'compname', index: 'compname', editable: true, width: 110, editrules: { custom: true, custom_func:myCustomCheck } },
                        { name: 'stateid', index: 'stateid', editable: true, width: 80, editrules: { custom: true, custom_func: myCustomCheck } },
                        { name: 'enddate', index: 'enddate', editable: true, width: 110, editrules: { custom: true, custom_func: myCustomCheck } }
                ],
                altRows: true,
                rowNum: 10,
                rowList: [10, 20],
                pager: '#pager',
                gridview: true,
                rownumbers: true,
                autoencode: true,
                ignoreCase: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                footerrow: true,
                emptyrecords:"There are **no records added",
                caption: '',
                height: '100%',
                editurl: 'clientArray',
                ondblClickRow: function (rowid, ri, ci) {
                    var $this = $(this), p = this.p;
                    if (p.selrow !== rowid) {
                        // prevent the row from be unselected on double-click
                        // the implementation is for"multiselect:false" which we use,
                        // but one can easy modify the code for"multiselect:true"
                        $this.jqGrid('setSelection', rowid);
                    }
                    $this.jqGrid('editGridRow', rowid, editSettings);
                },
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        // 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
                        if (typeof lastSel !=="undefined") {
                            $(this).jqGrid('restoreRow', lastSel);
                        }
                        lastSel = id;
                    }
                }
            }).jqGrid('navGrid', '#pager', {edit:false,add:true, del:true, search:false, refresh:false}, editSettings, addSettings, delSettings,
                { multipleSearch: true, overlay: false,
                    onClose: function (form) {
                        // if we close the search dialog during the datapicker are opened
                        // the datepicker will stay opened. To fix this we have to hide
                        // the div used by datepicker
                        $("div#ui-datepicker-div.ui-datepicker").hide();
                    }
                });

回调 beforeSubmit 确实被触发,但仅在成功验证的情况下。

您使用自定义验证的方式是错误的。例如,如果您检查 contractor 值,如果公司已满,您将收到 "Company/State ID/End Date is needed for a Contractor" 错误消息事件。问题是您在 'compname' 列验证期间在 myCustomCheck 内部设置的变量 field2 将在 'contractor' 验证后设置,其中将使用 field2

如果您需要实现多个字段的自定义验证,您最好使用 beforeCheckValues 回调。回调将在所有其他验证之前调用。它得到所有字段作为输入的 postdata 。因此,您可以轻松验证数据。回调可以没有任何 return(或使用没有任何值的 return;)。您可以为一列添加具有 custom: true, custom_func 的验证规则。如果在 beforeCheckValues 回调中发现验证错误,您可以在验证函数内部返回 [false, errorMessage]

此外,我不建议您在 $(function () {...}); 之外声明任何函数或变量。您应该将所有代码放在其中。这样你会减少全局变量的数量。