如何实现自定义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" }); }); 

Answer 1

您可以使用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文件。 你应该删除因为你包含了另一个版本的jQuery Index.cshtml （jquery-1.5.2.min.js）
• 您应该在Index.cshtml关闭


  （add）。

• 如果你想在网格中使用寻呼机（你使用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。

Answer 2

尝试

 $("#classOfYourButton").click(function(e){ e.stopPropagation(); $(this).closest("tr").remove(); });