jqgrid 如何在内联保存命令中使用 jquery blockUI 插件
jqgrid How to use jquery blockUI plugin in inline Save command
我有一个 jQGrid，它利用内联和表单编辑，并使用 blockUI 来显示 'Please wait while your request is processed.'
我想要的是知道在哪里捕获单击 'Save' 图标时触发的事件（在请求发送到服务器之前），以便我可以使用 blockUI。
这是我的 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)
}
});
}
});
感谢任何帮助。
非常感谢
我建议您使用内联编辑的 beforeSaveRow 回调。因为 formatter: "actions" 没有你可以使用 $.jgrid.inlineEdit:
$.extend(true, $.jgrid.inlineEdit, {
beforeSaveRow: function (options, rowid) {
// the callback can return false to break saving
return true;
}
});
$("#UserGrid").jqGrid({
...
});
回调将应用于所有个网格。如果您只需要为页面上的特定网格使用 beforeSaveRow，您应该在 beforeSaveRow 回调中测试网格的 ID（this.id 或 this.p.id）。
我有一个 jQGrid，它利用内联和表单编辑，并使用 blockUI 来显示 'Please wait while your request is processed.' 我想要的是知道在哪里捕获单击 'Save' 图标时触发的事件（在请求发送到服务器之前），以便我可以使用 blockUI。
这是我的 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)
}
});
}
});
感谢任何帮助。 非常感谢
我建议您使用内联编辑的 beforeSaveRow 回调。因为 formatter: "actions" 没有你可以使用 $.jgrid.inlineEdit:
$.extend(true, $.jgrid.inlineEdit, {
beforeSaveRow: function (options, rowid) {
// the callback can return false to break saving
return true;
}
});
$("#UserGrid").jqGrid({
...
});
回调将应用于所有个网格。如果您只需要为页面上的特定网格使用 beforeSaveRow，您应该在 beforeSaveRow 回调中测试网格的 ID（this.id 或 this.p.id）。