如何实现自定义jqGrid删除按钮？
我已将每行的删除按钮添加到我的jqGrid中。 现在我需要为这些按钮添加function。 每个按钮都必须删除它所在的行并从服务器中删除数据。 我怎样才能做到这一点？ 这是我到目前为止的代码：
var lastsel; jQuery(document).ready(function () { jQuery("#list").jqGrid({ url: '@Url.Action("Category1List")', datatype: 'json', mtype: 'GET', colNames: ['Navn', 'Slet'], colModel: [ { name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true }, { name: 'act', index: 'act', width: 75, sortable: false}], gridComplete: function () { var ids = jQuery("#list").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; be = ""; jQuery("#list").jqGrid('setRowData', ids[i], { act: be }); } }, onSelectRow: function (id) { if (id && id !== lastsel) { jQuery('#list').jqGrid('restoreRow', lastsel); jQuery('#list').jqGrid('editRow', id, true); lastsel = id; } }, editurl: '@Url.Action("GridSave")', rowNum: 50000, rowList: [5, 10, 20, 50], pager: '#page', sortname: 'Id', sortorder: "desc", viewrecords: true, height: "500px" }); }); 您可以使用delGridRow方法作为示例。 要做到这一点，你可以在代码中替换jQuery('#list').deleteRow(到jQuery('#list').jqGrid('delGridRow',
您可以考虑使用formatter:'actions' ：请参阅此处 ， 此处和此处 。 您可以在此处找到另一种实现自定义按钮的方法。
更新 ：要在删除操作期间发送其他信息，您可以使用delGridRow方法的delData参数：
be = "... onclick=\"jQuery('#list').deleteRow('" + cl + ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\" />";
表达式jQuery("#list").jqGrid('getCell',cl,'Navn')将从’Navn’列获取值， {delData:{Navn:'NavnValue'}将添加Navn=NavnValue参数数据发送到服务器。
更新2 ：您的主要问题是您在演示项目中使用了另一个版本的代码，就像您在问题中发布的那样 。 你的演示了
... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',
代替
... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',
这是第一个重要的错误。 您设置为var rows = jQuery("#list").jqGrid('getGridParam','selrow');的rows变量var rows = jQuery("#list").jqGrid('getGridParam','selrow'); 在gridComplete 。 当没有选择rows = null ， rows = null并且你放置onclick=\"jQuery('#list').jqGrid('delGridRow','null'用于所有按钮。
下一个重要问题：你应该重命名
public ActionResult deleteRow(String ProductId)
至
public ActionResult deleteRow(String id)
或者使用prmNames: {id: 'ProductId'}作为额外的jqGrid参数。
其他常见问题：
- 您应该修改
_Layout.cshtml文件。 你应该删除因为你包含了另一个版本的jQueryIndex.cshtml（jquery-1.5.2.min.js） - 您应该在
Index.cshtml关闭
- 如果你想在网格中使用寻呼机（你使用
jQuery("#list").jqGrid('navGrid', "#page", ...）你应该1）添加Index.cshtml添加参数pager: '#page'到jqGrid。 - 您必须清理您使用的HTML标记。 例如，您应该从
Index.cshtml的末尾删除。@RenderSection("Main", required: false)末尾的@RenderSection("Main", required: false)@RenderSection("Main", required: false)（在_Layout.cshtml文件中）。 -
要以正确的宽度查看寻呼机，您应该在
_Layout.cshtml文件中包含以下修复 -
您应该在
_Layout.cshtml文件中至少包含jQuery UI CSS和ui.jqgrid.css：
我建议你将jquery-1.5.2.min.js替换为jquery-1.6.2.min.js 。 您可以随时从此处加载最新版本的vsdoc文件。 同样，建议使用jQuery UI的最后一个版本（目前为1.8.16）。
我建议你下载我为答案创建的VS2010演示项目 ，并将其用作项目的模板。 您可以轻松更改代码以使用Razor。
尝试
$("#classOfYourButton").click(function(e){ e.stopPropagation(); $(this).closest("tr").remove(); });