javascript 如何实现自定义 jqGrid 删除按钮？

How can I implement a custom jqGrid delete button?

提问by Timsen

I have added a delete button for each row into my jqGrid. Now I need to add functionality to those buttons. Each button has to delete the row which it is in and remove data from the server. How can I do this? Here is my code so far:

我在 jqGrid 中为每一行添加了一个删除按钮。现在我需要为这些按钮添加功能。每个按钮都必须删除它所在的行并从服务器中删除数据。我怎样才能做到这一点？到目前为止，这是我的代码：

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 = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\"  />";
                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"
    });
}); 

采纳答案by Oleg

You can use delGridRowmethod fore example. To do this you can just replace in your code jQuery('#list').deleteRow(to jQuery('#list').jqGrid('delGridRow',

例如，您可以使用delGridRow方法。为此，您只需将代码替换jQuery('#list').deleteRow(为jQuery('#list').jqGrid('delGridRow',

You can consider to use formatter:'actions': see here, hereand here. One more way to implement custom buttons you will find here.

您可以考虑使用formatter:'actions'：参见此处、此处和此处。您将在此处找到另一种实现自定义按钮的方法。

UPDATED: To send additional information during Delete operation you can use delDataparameter of delGridRowmethod:

更新：要在删除操作期间发送附加信息，您可以使用delGridRow方法的delData参数：

be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
  ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\"  />";

The expression jQuery("#list").jqGrid('getCell',cl,'Navn')will get the value from the 'Navn' column and {delData:{Navn:'NavnValue'}will add Navn=NavnValueparameter to the data send to the server.

该表达式jQuery("#list").jqGrid('getCell',cl,'Navn')将从“Navn”列中获取值，{delData:{Navn:'NavnValue'}并将Navn=NavnValue参数添加到发送到服务器的数据中。

UPDATED 2: Your main problem was that you used in the demo project another version of the code as you posted in your question. Your demo has

更新 2：您的主要问题是您在演示项目中使用了您在问题中发布的代码的另一个版本。你的演示有

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',

instead of

代替

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',

which is the first important error. The rowsvariable you set as var rows = jQuery("#list").jqGrid('getGridParam','selrow');inside of gridComplete. At the time no row is selected, rows = nulland you place onclick=\"jQuery('#list').jqGrid('delGridRow','null'in for all your buttons.

这是第一个重要的错误。该rows变量设置为var rows = jQuery("#list").jqGrid('getGridParam','selrow');内部gridComplete。当时没有选择任何行，rows = null您可以放置onclick=\"jQuery('#list').jqGrid('delGridRow','null'所有按钮。

The next important problem: you should rename

下一个重要问题：你应该重命名

public ActionResult deleteRow(String ProductId)

to

到

public ActionResult deleteRow(String id)

or use prmNames: {id: 'ProductId'}as additional jqGrid parameter.

或prmNames: {id: 'ProductId'}用作额外的 jqGrid 参数。

Other common problems:

其他常见问题：

• You should modify _Layout.cshtmlfile. You should remove <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>because you include anotherversion of the jQuery (jquery-1.5.2.min.js) in the Index.cshtml
• You should close <table id="list">(add ) in the Index.cshtml.
• If you want to have pager in the grid (you used jQuery("#list").jqGrid('navGrid', "#page", ...) you should 1) add <div id="page"></div>in the Index.cshtmland add parameter pager: '#page'to the jqGrid.
• You have to clean the HTML markup which you use. For example you should remove </div>from the end of Index.cshtml. One more </div>at the end of @RenderSection("Main", required: false)</div>(in the _Layout.cshtmlfile) should be also removed.

• To see the pager in the correct width you should include in the _Layout.cshtmlfile the following fix

  <style type="text/css">input.ui-pg-input { width: auto; }</style>

• You should include at least jQuery UI CSS and ui.jqgrid.cssfor example in the _Layout.cshtmlfile:

• 你应该修改_Layout.cshtml文件。您应该删除<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>，因为你有另一在了jQuery（jQuery的1.5.2.min.js）的版本Index.cshtml
• 您应该<table id="list">在Index.cshtml.
• 如果你想拥有寻呼机的网格（你用jQuery("#list").jqGrid('navGrid', "#page", ...），你应该1）添加<div id="page"></div>在Index.cshtml并添加参数pager: '#page'到jqGrid的。
• 您必须清理您使用的 HTML 标记。例如，您应该</div>从Index.cshtml. 还应删除（在文件中）</div>末尾的另一个。@RenderSection("Main", required: false)</div>_Layout.cshtml

• 要以正确的宽度查看寻呼机，您应该在_Layout.cshtml文件中包含以下修复程序

  <style type="text/css">input.ui-pg-input { width: auto; }</style>

• 您应该至少包含 jQuery UI CSS，ui.jqgrid.css例如在_Layout.cshtml文件中：

I would recommend you to replace jquery-1.5.2.min.jsto jquery-1.6.2.min.js. The last version of vsdocfiles you can always load from here. In the same way the last version (currently 1.8.16) of jQuery UI is also recommended.

我建议您更换jquery-1.5.2.min.js为jquery-1.6.2.min.js. vsdoc您始终可以从此处加载最新版本的文件。同样，还推荐​​使用 jQuery UI 的最新版本（当前为 1.8.16）。

I would recommend you to download the VS2010 demo projectwhich I created for the answerand use it as the template for your project. You can easy change the code to use Razor.

我建议您下载我为答案创建的 VS2010 演示项目，并将其用作您项目的模板。您可以轻松更改代码以使用 Razor。

回答by Rafay

try

尝试

$("#classOfYourButton").click(function(e){

e.stopPropagation();
$(this).closest("tr").remove();
});