我一直在寻找答案已经有一段时间了,但找不到一个足以回答我问题的答案...
我有一个JQ Grid,它同时利用了内联和表单编辑功能,并在服务器执行任务时使用blockUI来显示“工作中”消息。
这对于表单编辑/添加/删除非常有用,因为我将onclickSubmit用作blockUI,将afterSubmit用作unblockUI。
问题来了,因为我无法在内联编辑中找到执行此操作的方法。任何人都可以建议实现此目标的方法吗?
我想知道的是单击“保存”图标时(在将请求发送到服务器之前)在哪里捕获触发的事件,以便可以阻止UI:
以及从服务器发回响应时在哪里捕获触发的事件。
一定有一种使用“ editRow”或“ saveRow”的方法,如下所示,但是我无法确定在何处以及在哪些情况下放置此类命令。
Olegs回应后编辑
我应该在哪里调用“ editRow”功能?
如果我使用onSelectRow,它将在选择行时对其进行操作-这将更改网格的行为-因为它现在在“操作”列中未显示“保存”按钮。
我可以在哪里放置“ editRow”调用,以便在选择“内联”编辑图标时将其触发?
$(document).ready(function() {
$('#jpgCustomers').jqGrid({
//url from wich data should be requested
url: '@Url.Action("Customers")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
serializeRowData: function(postData) {
$.blockUI({message: ("#working")});
return postData;
},
//columns model
//columns names
colNames: ['No.', 'Name', 'FullName', 'Description', 'Enabled', 'Email Address', 'Phone', 'Pager', 'Fax', 'Comments', ' '],
colModel: [
//displayed Columns
{ name: 'Number', index: 'Number', align: 'center', width: 40, editable: false, search: false },
{ name: 'LogonName', index: 'LogonName', align: 'left', width: 80, editable: true, search: true, stype: 'text', editrules: { required: true } },
{ name: 'FullName', index: 'FullName', align: 'left', width: 200, editable: true, search: true, stype: 'text', editrules: { required: true } },
{ name: 'Description', index: 'Description', align: 'left', width: 300, editable: true, search: true, stype: 'text' },
{ name: 'Enabled', index: 'Enabled', align: 'center', width: 80, editable: true, formatter: SFTPEnabledFormatter, unformat: SFTPEnabledUnformatter, edittype: 'select', editoptions: { value: '-2:Inherited;0:Disabled;1:Enabled' }, search: true, stype: 'select', searchoptions: { value: "-1:All;-2:Inherited;1:Enabled;0:Disabled" } },
//Hidden Columns
{ width: 60, name: 'Email', index: 'Email', hidden: true, editable: true, editrules: { required: true, edithidden: true }, editype: 'email' },
{ width: 60, name: 'Phone', index: 'Phone', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
{ width: 60, name: 'Pager', index: 'Pager', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
{ width: 60, name: 'Fax', index: 'Fax', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
{ width: 120, name: 'Comments', index: 'Comments', align: 'left', hidden: true, editable: true, editrules: { required: false, edithidden: true }, edittype: 'textarea', editoptions: { rows: '3', cols: '60' } },
//Action column
{
name: 'myac',
width: 80,
fixed: true,
sortable: false,
resize: false,
editable: false,
search: false,
formatter: 'actions',
formatoptions: {
onSuccess: function(response) {
debugger;
$.unblockUI();
var jsonResponse = $.parseJSON(response.responseText);
if (jsonResponse.State != 'Success') {
return [false, jsonResponse.ResponseMessage];
} else {
return [true];
} },
onError :function(rowid, response, textStatus) {
debugger;
$.unblockUI();
},
keys: true,
delOptions: {
url: encodeURI('@Url.Action("DeleteCustomer")'),
onclickSubmit: function(params, posdata) {
$.blockUI({message: ("#working")});
},
afterSubmit: function(response, postData) {
$.unblockUI();
var jsonResponse = $.parseJSON(response.responseText);
if (jsonResponse.State != 'Success') {
return [false, jsonResponse.ResponseMessage];
} else {
return [true];
}
},
beforeShowForm: function(form) {
var dlgDiv = $("#delmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
var sel_id = $("#DelData>td:nth-child(1)").text();
$("td.delmsg", form).html("Delete User <b>" + $("#jpgCustomers").jqGrid('getCell', sel_id, 'LogonName') + "</b>?");
}
}
}
}
],
reloadAfterSubmit: true,
//pager for grid
pager: $('#jpgpCustomers'),
//number of rows per page
rowNum: @(Model.RowsInCustomerGrid),
//initial sorting column
sortname: 'FullName',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%',
//where to go on submit of edit/add
editurl: encodeURI('@Url.Action("EditCustomer")'),
//subgrid
});
});
最佳答案
例如,您可以使用jqGrid的serializeRowData
回调或使用ajaxRowOptions.beforeSend
调用blockUI
/ block
,然后再将请求发送到服务器。例如,您可以添加到jqGrid选项列表
serializeRowData: function (postdata) {
$(this).block({message: "<h1>Saving the data...</h1>"});
return postdata;
}
要么
ajaxRowOptions: {
beforeSend: function () {
$("#grid").block({message: "<h1>Saving the data...</h1>"});
}
}
您必须同时在
unblockUI
(或unblock
)和aftersavefunc
中调用successfunc
/ errorfunc
。