问题
I have a jQGrid that utilizes both inline and form editing and uses blockUI to show a 'Please wait while your request is processed.' What i want is to know where to catch the event that is fired when the 'Save' icon is clicked (before the request is sent to the server) so I can use blockUI.
This is my jQGrid:
$(document).ready(function() {
$("#<%= txtFromDate.ClientID %>").datepicker({ dateFormat: "dd/mm/yy" });
$("#<%= txtToDate.ClientID %>").datepicker({ dateFormat: "dd/mm/yy" });
//document.getElementById('Form').setAttribute('autocomplete', 'on');
var filterList = "{ \"groupOp\": \"AND\", \"rules\": [{ \"field\": \"FromDate\", \"op\": \"cn\", \"data\":\"" + FromDateCtrl.val() + "\"},{ \"field\": \"ToDate\", \"op\": \"cn\", \"data\":\"" + ToDateCtrl.val() + "\"}] }";
$("#UserGrid").jqGrid({
url: "/DesktopModules/UsersAdmin/Services/UsersAdminService.svc/GetAllUsers",
datatype: "json",
contentType: "application/json; charset=utf-8",
mtype: "POST",
serializeRowData: function(postdata) {
$(this).block(
{
message: "<h5>Saving the data...</h5>"
});
return postdata;
},
//ajaxRowOptions: {
// beforeSend: function () {
// $(this).block(
// {
// message: "<h5>Saving the data...</h5>"
// });
// }
//},
height: "auto",
colNames: [
"Edit | Delete",
"MemberId",
"FirstName",
"LastName",
"Password",
"ConfirmPassword",
"CompanyName",
"ContactEmail",
"RegisteredDate",
"MemberApproved",
"MemberApprovedDate",
"FranchiseeDocumentStatus",
"FranchiseeDocumentSentDate",
"FranchiseeStatus"
],
colModel: [
{
name: "EditAction",
width: 60,
fixed: true,
search: false,
sortable: false,
resize: false,
formatter: "actions",
formatoptions: {
keys: false,
editbutton: true,
delbutton: true,
editformbutton: false,
editOptions: {
},
onSuccess: function(response) {
if (response.status === 200) {
$("#dialog-confirm").dialog({
resizable: true,
height: 175,
width: 325,
modal: true,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$("#UserGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after edit
var sel_id = $("#UserGrid").jqGrid("getGridParam", "selrow");
var value = $("#UserGrid").jqGrid("getCell", sel_id, "MemberId");
$("#UserGrid").jqGrid("setGridParam", { MemberId: value });
return [false];
} else {
return [true];
}
},
afterSubmit: function(response, postdata) {
var sel_id = $("#UserGrid").jqGrid("getGridParam", "selrow");
var value = $("#UserGrid").jqGrid("getCell", sel_id, "MemberId");
if (response.responseText == "") {
$("#UserGrid").jqGrid("setGridParam", { MemberId: value });
$("#UserGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after edit
return [true, ""];
} else {
$("#UserGrid").jqGrid("setGridParam", { MemberId: value });
$("#UserGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after edit
divloading.css("display", "none");
return [false, response.responseText];
//Captures and displays the response text on th Edit window
}
},
extraparam: {
oper: "edit",
MemberId: function() {
var sel_id = $("#UserGrid").jqGrid("getGridParam", "selrow");
var value = $("#UserGrid").jqGrid("getCell", sel_id, "MemberId");
$("#UserGrid").jqGrid("setColProp", "Password", { editrules: { required: false } });
$("#UserGrid").jqGrid("setColProp", "ConfirmPassword", { editrules: { required: false } });
return value;
}
},
url: "/DesktopModules/UsersAdmin/Services/JQGridHandler.ashx"
}
},
{ name: "MemberId", index: "MemberId", width: 30, title: false, search: true, sortable: true, editable: false },
{ name: "FirstName", index: "FirstName", width: 60, title: false, search: true, sortable: true, editable: true },
{ name: "LastName", index: "LastName", width: 60, title: false, search: true, sortable: true, editable: true },
{ name: "Password", index: "Password", width: 60, title: false, search: true, sortable: true, edittype: "password", hidden: true, editable: true, editrules: { edithidden: true, required: false } },
{ name: "ConfirmPassword", index: "ConfirmPassword", width: 60, title: false, search: true, sortable: true, edittype: "password", hidden: true, editable: true, editrules: { edithidden: true, required: false, custom: true, custom_func: checkpassmatch } },
{ name: "CompanyName", index: "CompanyName", width: 80, title: false, search: true, sortable: true, editable: true },
{ name: "ContactEmail", index: "ContactEmail", width: 80, title: false, search: true, sortable: true, editable: true },
{ name: "RegisteredDate", index: "RegisteredDate", width: 40, title: false, search: true, sortable: true, editable: false, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d M Y" } },
{ name: "MemberApproved", index: "MemberApproved", width: 40, editable: true, align: "center", edittype: "checkbox", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: true }, title: false, search: true, sortable: true, stype: "select", searchoptions: { sopt: ["eq"], value: "true:Checked;false:Unchecked" } },
{ name: "MemberApprovedDate", index: "MemberApprovedDate", width: 40, title: false, search: true, searchoptions: { sopt: ["cn"] }, sortable: true, editable: false, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d M Y" } },
{ name: "FranchiseeDocumentStatus", index: "FranchiseeDocumentStatus", width: 40, editable: true, align: "center", edittype: "checkbox", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: true }, title: false, search: true, sortable: true, stype: "select", searchoptions: { sopt: ["eq"], value: "true:Doc sent;false:Doc not sent" } },
{ name: "FranchiseeDocumentSentDate", index: "FranchiseeDocumentSentDate", width: 40, title: false, search: true, sortable: true, editable: false, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d M Y" } },
{ name: "FranchiseeStatus", index: "FranchiseeStatus", width: 40, title: false, search: true, sortable: true, editable: true, edittype: "select", editoptions: { value: "Their Solicitor:Their Solicitor;Our Solicitor:Our Solicitor;Franchisee:Franchisee" }, stype: "select", searchoptions: { sopt: ["eq"], value: "Their Solicitor:Their Solicitor;Our Solicitor:Our Solicitor;Franchisee:Franchisee" } }
],
pager: "#UserGridPager",
rowNum: 10,
rowList: [10, 20, 30, 40, 50, 75, 100],
viewrecords: true,
jsonReader: {
repeatitems: false,
id: "MemberId"
},
sortname: "MemberId",
sortorder: "desc",
loadui: "block",
autowidth: true,
altclass: "odd",
altRows: true,
//multiselect: true,
caption: "Users Management",
editurl: "/DesktopModules/UsersAdmin/Services/JQGridHandler.ashx",
toppager: true,
postData: {
filters: filterList
},
beforeRequest: addDateTimeParams,
onSelectRow: function(id) {
$("#" + id + "_" + "FirstName").attr("disabled", true);
$("#" + id + "_" + "LastName").attr("disabled", true);
$("#" + id + "_" + "CompanyName").attr("disabled", true);
$("#" + id + "_" + "ContactEmail").attr("disabled", true);
//$("#UserGrid").jqGrid("saveRow", id,
//{
// aftersavefunc: function(response) {
// $(this).block({ message: "<h4>Saving the data...</h4>" });
// },
// errorfunc: function(response) {
// $(this).block({ message: "<h4>Saving the data...</h4>" });
// },
// successfunc: function(response) {
// $(this).block({ message: "<h4>Saving the data...</h4>" });
// }
//});
},
aftersavefunc: actionAfterSave,
errorfunc: actionOnError
});
$("#UserGrid").jqGrid("filterToolbar", { stringResult: true });
function actionAfterSave() {
alert("asdsadsad");
//$(this).unblockUI();
};
function actionOnError() {
alert("asdsadsad");
//$(this).unblockUI();
};
//Form pop-up edit
$("#UserGrid").jqGrid("navGrid", "#UserGridPager",
{
add: true,
edit: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
refresh: true,
closeAfterAdd: true,
closeAfterEdit: true
},
{
//EDIT portion
//Can also set the width and height of the editing window as below commented way
//height: 300,
//width: 400,
//top: 50,
//left: 100,
//dataheight: 280,
closeAfterAdd: true,
closeAfterEdit: true,
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmodUserGrid");
dlgDiv[0].style.top = "50%";
dlgDiv[0].style.left = "50%";
$("#tr_FirstName", form).hide();
$("#tr_LastName", form).hide();
$("#tr_Password", form).hide();
$("#tr_ConfirmPassword", form).hide();
$("#tr_CompanyName", form).hide();
$("#tr_ContactEmail", form).hide();
$("#UserGrid").jqGrid("setColProp", "Password", { editrules: { required: false } });
$("#UserGrid").jqGrid("setColProp", "ConfirmPassword", { editrules: { required: false } });
},
onclickSubmit: function(params, posdata) {
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
dlgDiv.css("height", 220);
dlgDiv.append(divloading);
divloading.css("display", "block");
},
afterSubmit: function(response, postdata) {
if (response.responseText == "") {
$(this).jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after edit
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
dlgDiv.css("width", 300);
dlgDiv.css("height", 220);
divloading.css("display", "none");
return [true, ""];
} else {
$(this).jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after edit
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
divloading.css("display", "none");
dlgDiv.css("width", 300);
dlgDiv.css("height", 220);
return [false, response.responseText];
//Captures and displays the response text on th Edit window
}
},
editData: {
MemberId: function() {
var sel_id = $("#UserGrid").jqGrid("getGridParam", "selrow");
var value = $("#UserGrid").jqGrid("getCell", sel_id, "MemberId");
return value;
}
}
},
{
//ADD portion
closeAfterAdd: true, //Closes the add window after add
closeAfterEdit: true,
beforeShowForm: function(form) {
$("#tr_FirstName", form).show();
$("#tr_LastName", form).show();
$("#tr_Password", form).show();
$("#tr_ConfirmPassword", form).show();
$("#tr_CompanyName", form).show();
$("#tr_ContactEmail", form).show();
$("#UserGrid").jqGrid("setColProp", "Password", { editrules: { required: true } });
$("#UserGrid").jqGrid("setColProp", "ConfirmPassword", { editrules: { required: true } });
},
onclickSubmit: function(params, posdata) {
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
dlgDiv.css("height", 380);
dlgDiv.append(divloading);
divloading.css("display", "block");
},
afterSubmit: function(response, postdata) {
if (response.responseText == "") {
$(this).jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after Add
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
dlgDiv.css("width", 306);
dlgDiv.css("height", 320);
divloading.css("display", "none");
return [true, ""];
} else {
$(this).jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid"); //Reloads the grid after Add
var dlgDiv = $("#editmodUserGrid");
var divloading = $("#progressDialog");
divloading.css("display", "none");
dlgDiv.css("width", 306);
dlgDiv.css("height", 320);
return [false, response.responseText];
}
}
},
{
//DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
drag: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "") {
$("#UserGrid").trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText];
} else {
$(this).jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
return [true, response.responseText];
}
},
delData: {
MemberId: function() {
var sel_id = $("#UserGrid").jqGrid("getGridParam", "selrow");
var value = $("#UserGrid").jqGrid("getCell", sel_id, "MemberId");
return value;
}
}
},
{
//SEARCH
multipleSearch: true,
closeOnEscape: true
}).jqGrid("navButtonAdd", "#UserGridPager", {
caption: "Choose Columns",
title: "Choose Columns",
onClickButton: function() {
$("#UserGrid").jqGrid("columnChooser");
},
position: "last"
});
//function myformat(cellvalue, options, rowObject) {
// //return cellvalue + ' ' + rowObject.Date + ' ' + rowObject.Status;
// //return cellvalue + ' ' + rowObject.MemberApproved + ' ' + rowObject.MemberApprovedDate;
// var dateString = rowObject.MemberApprovedDate.substr(6);
// var currentTime = new Date(parseInt(dateString));
// var month = currentTime.getMonth() + 1;
// var day = currentTime.getDate();
// var year = currentTime.getFullYear();
// var date = day + "/" + month + "/" + year;
// var strelement = "";
// if (rowObject.MemberApproved) {
// strelement = '<input type=checkbox checked=checked value=true>';
// } else {
// strelement = '<input type=checkbox value=false>';
// }
// return strelement + ' ' + date;
//}
function addDateTimeParams() {
var filter = $.parseJSON($("#UserGrid").jqGrid("getGridParam").postData.filters);
if (filter == null) {
filter = eval("(" + filterList + ")"); //JSON.stringify(filterList);
}
var rules = filter.rules;
var foundFromDate = false;
var foundToDate = false;
for (var i = 0; i < rules.length; i++) {
if (rules[i].field == "FromDate") {
rules[i].data = FromDateCtrl.val();
foundFromDate = true;
} else if (rules[i].field == "ToDate") {
rules[i].data = ToDateCtrl.val();
foundToDate = true;
}
}
if (!foundFromDate) {
filter.rules.push({ "field": "FromDate", "op": "cn", "data": FromDateCtrl.val() });
}
if (!foundToDate) {
filter.rules.push({ "field": "ToDate", "op": "cn", "data": ToDateCtrl.val() });
}
$("#UserGrid").jqGrid("setGridParam", {
postData: {
filters: JSON.stringify(filter)
}
});
}
});
Any helps is appreciated. Many thanks
回答1:
I would recommend you to use beforeSaveRow callback of inline editing. Because formatter: "actions" don't have it you can use $.jgrid.inlineEdit:
$.extend(true, $.jgrid.inlineEdit, {
beforeSaveRow: function (options, rowid) {
// the callback can return false to break saving
return true;
}
});
$("#UserGrid").jqGrid({
...
});
The callback will be applied for all grids. If you need to use the beforeSaveRow only for specific grid on the page you should test the id of the grid (this.id or this.p.id) inside of beforeSaveRow callback.
来源：https://stackoverflow.com/questions/28301859/jqgrid-how-to-use-jquery-blockui-plugin-in-inline-save-command