Question

我已将每行的删除按钮添加到我的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"
    });
});

Answer 1

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

即可

您可以考虑使用formatter:'actions'：请参阅here，here和here。另一种实现自定义按钮的方法是here。

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

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

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

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

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

而不是

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

这是第一个重要的错误。您在rows内设置为var rows = jQuery("#list").jqGrid('getGridParam','selrow');的{{1}}变量。在没有选择任何行的情况下，gridComplete并为您的所有按钮添加rows = null。

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

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

到

public ActionResult deleteRow(String ProductId)

或使用public ActionResult deleteRow(String id)作为额外的jqGrid参数。

其他常见问题：

您应该修改prmNames: {id: 'ProductId'}文件。您应该删除_Layout.cshtml，因为您在<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

另一个

您应该在Index.cshtml。

<table id="list">

如果您想在网格中使用寻呼机（使用Index.cshtml），您应该1）在jQuery("#list").jqGrid('navGrid', "#page", ...中添加<div id="page"></div>并将参数Index.cshtml添加到jqGrid。
您必须清理您使用的HTML标记。例如，您应该从pager: '#page'的末尾删除</div>。还应删除Index.cshtml末尾</div>（@RenderSection("Main", required: false)</div>文件中的一个_Layout.cshtml。
要以正确的宽度查看寻呼机，您应该在_Layout.cshtml文件中包含以下修复

<style type="text/css">input.ui-pg-input { width: auto; }</style>
您应该在ui.jqgrid.css文件中包含至少jQuery UI CSS和_Layout.cshtml：

我建议您将jquery-1.5.2.min.js替换为jquery-1.6.2.min.js。 vsdoc文件的最新版本，您始终可以从here加载。同样，建议使用jQuery UI的最后一个版本（目前为1.8.16）。

我建议您下载我为the VS2010 demo project创建的the answer，并将其用作项目的模板。您可以轻松更改代码以使用Razor。

Answer 2

尝试

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

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

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

2 个答案: