Реализовать удаление в jQgrid
Я начинаю в jqGrid, я хочу реализовать Удалить Actin в jqGrid Я пишу этот код для заполнения jqGrid
$(function () {
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'TransportType', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: 490,
colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
colModel: [
{ name: 'TRANSPORT_ID', width: 100, sortable: true, editable: true },
{ name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
{ name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
{ name: 'REMARK', width: 100, sortable: true, editable: true }
],
gridview: true,
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pager',
sortname: 'TRANSPORT_ID',
viewrecords: true,
sortorder: 'ASC',
caption: '',
rownumbers: true
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
{ height: 300, width: 300, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Update", reloadAfterSubmit: false },
{ height: 400, width: 500, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Insert", reloadAfterSubmit: false },
{ url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Delete", reloadAfterSubmit: false },
{ multipleSearch: true, overlay: false, width: 460 });
и в jQGridHandler я пишу этот код
case "TransportType":
var transport = new TransportTypesBusiness();
TRANSPORT_TYPES transportItem;
switch (request.QueryString["Action"])
{
case "Fill":
string numberOfRows = request["rows"];
string pageIndex = request["page"];
int totalRecords = 0;
output = transport.BuildJQGridResults(Int32.Parse(numberOfRows), Int32.Parse(pageIndex), totalRecords);
response.Write(output);
break;
case "FillDrop":
output = transport.BuildJQGridResults();
response.Write(output);
break;
case "Insert":
transportItem = new TRANSPORT_TYPES {
TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
REMARK = request["REMARK"].ToString()
};
bool isInsert = transport.AddNew(transportItem);
break;
case "Update":
transportItem = new TRANSPORT_TYPES {
TRANSPORT_ID = int.Parse(request["TRANSPORT_ID"].ToString()),
TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
REMARK = request["REMARK"].ToString()
};
bool isUpdate = transport.Update(transportItem);
break;
case "Delete":
bool isDelete =
transport.Delete(
transport.Find(c => c.TRANSPORT_ID == int.Parse(request["TRANSPORT_ID"].ToString())));
break;
}
Когда я удаляю запись, я не могу получить request["TRANSPORT_ID"].ToString() значение.
Пожалуйста, помогите мне. Спасибо всем
РЕДАКТИРОВАТЬ 1: я редактировать сценарий из этого
$(function () {
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'TransportType', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: 490,
colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
colModel: [
{ name: 'TRANSPORT_ID', key: true,,hidden:true, editable:false },
{ name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
{ name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
{ name: 'REMARK', width: 100, sortable: true, editable: true }
],
cmTemplate: { width: 100, editable: true },
prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
deloper: 'Delete', id: 'STATUS_ID'
},
gridview: true,
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pager',
sortname: 'TRANSPORT_ID',
viewrecords: true,
sortorder: 'ASC',
caption: '',
rownumbers: true
});
$.extend($.jgrid.edit, {
editData: { ActionPage: 'StatusType' },
savekey: [true, 13],
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
reloadAfterSubmit: false,
recreateForm: true
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
{ height: 300, width: 300 },
{ height: 400, width: 500 },
{},
{ width: 460 });
и в обработчике для получения
ActionPage написать этот код
HttpRequest request = context.Request;
string ss = request["ActionPage"].ToString();
сетка сначала загружает данные, но при нажатии на кнопку редактирования появляется ошибка.
1 ответ
Я полагаю, что причина вашей проблемы в том, что вы заполняете строки строки сетки некорректно. Возможно, вы правильно заполняете идентификаторы строк сетки, но просто не используете информацию.
По тому, как вы используете Action параметр со значением "Insert", "Update" а также "Delete", С другой стороны уже есть стандартный параметр oper который будет отправлен на сервер (см. здесь) во время редактирования строки. Значение oper Параметр будет "добавить", "изменить" и "del". Поэтому я не вижу необходимости использовать дополнительные Action параметр во время редактирования. Я рекомендую вам просто проверить на ценность oper параметр вместо.
Если вам нравится иметь другое имя и значения oper Параметр, вы можете использовать параметр prmNames jqGrid для изменения значений по умолчанию:
prmNames: { oper: "Action", editoper: "Update", addoper: "Insert", deloper: "Delete" }
Я не вижу никакого смысла в использовании ActionPage=TransportType дополнительный параметр, который вы используете во всех URL. Если вам требуется предоставить тот же URL "jQGridHandler.ashx" для каких-то других целей вы можете использовать editurl: "jQGridHandler.ashx" и добавить ActionPage=TransportType часть URL-адресов с помощью postData, editData а также delData параметры.
Точно так же с oper параметр еще один параметр с именем id будет отправлено на сервер во время операций редактирования. Так что вы можете использовать request["TRANSPORT_ID"] на стороне сервера. Если вы предпочитаете другое имя (я не вижу, чтобы оно действительно требовалось), вы можете добавить id: "TRANSPORT_ID" недвижимость в prmNames, Это решит вашу главную проблему.
Поэтому, если вы не хотите вносить какие-либо изменения в код сервера, вы можете просто сделать следующее на стороне клиента.
$(function () {
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
editurl: 'jQGridHandler.ashx',
postData: { ActionPage: 'TransportType', Action: 'Fill' },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: "auto",
colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
colModel: [
{ name: 'TRANSPORT_ID', key: true },
{ name: 'TRANSPORT_NAME', width: 200 },
{ name: 'TRANSPORT_ABBR' },
{ name: 'REMARK' }
],
cmTemplate: {width: 100, editable: true},
prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
deloper: 'Delete', id: 'TRANSPORT_ID'
},
gridview: true,
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pager',
sortname: 'TRANSPORT_ID',
viewrecords: true,
sortorder: 'ASC',
rownumbers: true
});
$.extend($.jgrid.edit, {
editData: { ActionPage: 'TransportType' },
savekey: [true, 13],
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
reloadAfterSubmit: false,
recreateForm: true
});
$.extend($.jgrid.del, {
delData: { ActionPage: 'TransportType', Action: 'Delete' },
reloadAfterSubmit: false,
closeOnEscape: true
});
$.extend($.jgrid.search, {
multipleSearch: true,
recreateFilter: true,
overlay: false
});
grid.jqGrid('navGrid', '#pager', {},
{ height: 300, width: 300, editData: { ActionPage: 'TransportType', Action: 'Update' } },
{ height: 400, width: 500, editData: { ActionPage: 'TransportType', Action: 'Insert' },
afterSubmit: function (response) {
return [true, '', response.responseText];
}},
{},
{ width: 460 }
);
});
Я добавил некоторые дополнительные настройки и использовал cmTemplate изменить значения по умолчанию (см. здесь) для colModel Предметы.
Еще одна важная вещь в вашем коде, которая создает проблему. Ты используешь reloadAfterSubmit: false установка. В случае, если важно вернуть id на новый созданный элемент в ответе от сервера на "Insert" операция. Так что использовать следует использовать response.Write(output); написать в теле ответа сервера свой идентификатор. Кроме того, вам нужно использовать afterSubmit (см. ответ), чтобы получить новый идентификатор из ответа сервера и переслать его в jqGrid:
grid.jqGrid('navGrid', '#pager', {},
{ height: 300, width: 300, editData: {ActionPage: 'TransportType', Action: 'Update'} },
{ height: 400, width: 500, editData: {ActionPage: 'TransportType', Action: 'Insert'},
afterSubmit: function (response) {
return [true, '', response.responseText];
}},
{},
{ width: 460 }
);
ОБНОВЛЕНО: Вы можете скачать демонстрационный проект отсюда.