我是jqGrid中的初学者,我想在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 });
并在获取的处理程序中
操作页面 编写此代码
HttpRequest request = context.Request;
string ss = request["ActionPage"].ToString();
网格首先加载数据,但单击编辑按钮时出错。
我想你问题的根源是你没有正确填充网格的行。可能您确实正确填充了网格行的 ID,但只是不使用这些信息。
顺便说一下,您将Action
参数与值 "Insert"
、 "Update"
和 "Delete"
一起使用。另一方面,已经有标准参数oper
将在行编辑期间发送到服务器(见此处)。oper
参数的值将为"添加"、"编辑"和"del"。因此,我认为在编辑过程中无需使用额外的Action
参数。我建议您只测试oper
参数的值。
如果你想要oper
参数的另一个名称和值,你可以使用 jqGrid 的 prmNames 选项来更改默认值:
prmNames: { oper: "Action", editoper: "Update", addoper: "Insert", deloper: "Delete" }
我认为您在所有 URL 中使用的ActionPage=TransportType
附加参数的使用没有任何意义。如果您确实需要出于其他目的共享相同的 URL "jQGridHandler.ashx"
,您可以使用 editurl: "jQGridHandler.ashx"
并使用 postData
、 editData
和 delData
参数将ActionPage=TransportType
部分添加到 URL。
与oper
参数相同,在编辑操作期间,另一个名为 id
的参数将被发送到服务器。因此,您可以在服务器端使用request["TRANSPORT_ID"]
。如果您更喜欢另一个名称(我看不出它真的是必需的),您可以在prmNames
中添加id: "TRANSPORT_ID"
属性。它将解决您的主要问题。
因此,如果您不想在服务器代码中进行任何修改,您可以在客户端执行以下操作
$(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
设置。在这种情况下,请务必在"Insert"
操作时从服务器响应中返回新创建项的id
。所以使用应该使用response.Write(output);
在服务器响应的正文中写下id。此外,您需要使用 afterSubmit
(请参阅答案)从服务器响应中获取新 id 并将其转发到 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 }
);
更新:您可以从此处下载演示项目。