如何在jqgrid上实现编辑和删除?
下面是我的JQGrid代码,它可以很好地加载网格、分页和排序 现在,我需要添加-编辑和删除功能 我在谷歌上发现,要在导航栏中启用“编辑”和“删除”选项, 我希望它是这样的——用户点击“a href”链接,它应该调用javascritp函数和rowID。你能告诉我,我如何添加超链接并点击它允许调用functino如何在jqgrid上实现编辑和删除?,jqgrid,jqgrid-formatter,mvcjqgrid,Jqgrid,Jqgrid Formatter,Mvcjqgrid,下面是我的JQGrid代码,它可以很好地加载网格、分页和排序 现在,我需要添加-编辑和删除功能 我在谷歌上发现,要在导航栏中启用“编辑”和“删除”选项, 我希望它是这样的——用户点击“a href”链接,它应该调用javascritp函数和rowID。你能告诉我,我如何添加超链接并点击它允许调用functino $('#CategoriesGrdList').jqGrid({ ajaxGridOptions: { error: functi
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
//public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
postData: { categoryId: 1 },
//postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'Code', index: 'Code', width: 170 },
{ name: 'Description', index: 'Description', width: 170 },
{ name: 'IsActive', index: 'IsActive', width: 170 }
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 40,
rowList: [3, 3, 3],
width: '525',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
});
注:
根据以下评论之一的建议,
在下栏添加:
{
name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
},
onSuccess: function (jqXHR) {
// the function will be used as "succesfunc" parameter of editRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
alert("in onSuccess used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\n\nWe can verify the server response and return false in case of" +
" error response. return true confirm that the response is successful");
// we can verify the server response and interpret it do as an error
// in the case we should return false. In the case onError will be called
return true;
},
onError: function (rowid, jqXHR, textStatus) {
// the function will be used as "errorfunc" parameter of editRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
// and saveRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
alert("in onError used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\nstatus=" + jqXHR.status +
"\nstatusText" + jqXHR.statusText +
"\n\nWe don't need return anything");
},
afterSave: function (rowid) {
alert("in afterSave (Submit): rowid=" + rowid + "\nWe don't need return anything");
},
afterRestore: function (rowid) {
alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
},
delOptions: {
// because I use "local" data I don't want to send the changes to the server
// so I use "processing:true" setting and delete the row manually in onclickSubmit
onclickSubmit: function (rp_ge, rowid) {
// we can use onclickSubmit function as "onclick" on "Delete" button
alert("The row with rowid=" + rowid + " will be deleted");
// reset processing which could be modified
rp_ge.processing = true;
// delete row
$(this).delRowData(rowid);
$("#delmod" + $(this)[0].id).hide();
if ($(this)[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
$(this).trigger("reloadGrid", [{ page: $(this)[0].p.page }]);
}
return true;
},
processing: true // !!! the most important step for the "local" editing
// skip ajax request to the server
}
}
}
现在,问题是:
在何处指定控制器的调用操作?
点击编辑,什么也没发生,我想调用我自己的控制器的动作,弹出我自己的对话框,而不是jqgrid对话框
请指导我。我看到您正在使用MVC,这就是我的做法,这可能与您的做法不同,但我喜欢这样做。基本上,您可以指定在控制器中编辑、添加和删除的方式,然后使用“url:”/YourController/YourActionMethod/”告诉网格在哪里查看。您可以设置许多不同的选项,例如标题、宽度等
你指的是哪个“a href”链接?你发布的代码不包含任何你选择的
(内联编辑、表单编辑或单元格编辑)?你写的是“调用JavaScript函数和rowID”,但如果您将服务器上的数据保存在数据库中,则应将数据发送到服务器。不是吗?我还没有添加“a href”。但是,col model
中会有额外的列,其中应该包含“delete”图像图标。单击图像图标,它应该调用javascript函数和主键,这样我就可以对服务器进行ajax调用,从数据库中删除行,然后刷新网格。请建议实现这一目标的最佳方法。同样,点击编辑链接,我需要打开一个对话框来保存数据。你知道从3.8.2版本开始的jqGrid中存在的formatter:“actions”
?看见它允许创建编辑/删除/保存/取消按钮,在内部使用内联编辑或表单编辑。可以使用formatoptions
将相应的选项转发到editRow
/editGridRow
和delGridRow
。看见通过编辑方法发布到服务器的数据在documation中进行了描述。好的,我已经添加了您在该链接上建议的操作列。现在,如何提供-URL(控制器和操作),它将实际删除记录,然后重新加载网格?你没有发布新代码。您使用格式化程序的哪些选项:“操作”
?您是使用formatoptions:{editformbutton:true}
来使用表单编辑还是使用默认的内联编辑?文档中描述了编辑功能发布的数据。例如,您可以看到Delete发送的参数。最重要的是id
参数,它是要删除行的rowid。如果正确填充网格,则id值足以删除该行。编辑后将重新加载网格。谢谢。但根据提供的设计,我需要添加内联图像按钮,并需要弹出编辑对话框,而不是内联编辑。单击“内联图像”按钮后执行删除操作。@Dhaval我知道了,我还没有尝试内联编辑,因此无法在这方面帮助您,对不起。现在,我甚至无法选择行。。。单击导航栏上的“编辑”图标时,所选行不存在。
}).navGrid('#CategoriesGrdPager', { cloneToTop: true, search: false },
{
url: '/YourController/EditCategories/',
editCaption: 'Edit Post',
closeAfterEdit: true,
closeOnEscape: true,
dataheight: 1150,
top: 25,
left: 50,
width: 900,
},//edit options
{
url: '/YourController/AddCategories/',
addCaption: 'New Post',
closeAfterAdd: true,
closeOnEscape: true,
dataheight: 1150,
top: 25,
left: 50,
width: 900,
},//add options
{
url: '/YourController/DeleteCategories/',
caption: 'Delete Post',
closeOnEscape: true,
}//delete options
);