MVC中的简单jqgrid删除

Question

我一直在网上寻找答案，也许它比我预期的更复杂（或者我只是不明白解决方案），但我正在寻找一种方法来简单地删除通过单击垃圾桶图标从我的 jqgrid 中选择行。

目前我的网格正在填充 Linq to SQL 数据。 这是我的网格：

jQuery("#grid").jqGrid({
                     url: '<%= ResolveUrl("~/Home/GetData") %>',
                     datatype: "json",
                     mtype: 'GET',
                     postData: { DDLid: function () { return jQuery("#DDL option:selected").val(); } },
                     colNames: ['Col1', 'Col2'],
                     colModel: [
                        { name: 'Col1', index: 'Col1', width: 200, editable: false },
                        { name: 'Col2', index: 'Col2', width: 200, editable: false }
                        ],
                     jsonReader: {
                         repeatitems: false
                     },
                     rowNum: 10,
                     pager: jQuery('#gridpager'),
                     sortname: 'Type',
                     viewrecords: true,
                     sortorder: "asc",
                     caption: "Table"
                 }).navGrid('#gridpager', { del: true, add: false, edit: false, search: false }, {}, {}, {url: "Delete"});

现在帖子数据中的“id”不是此表中的主键 - 我只需要它来帮助填充网格。 我想得到的是选定的行 id 并将其传递给 Delete 方法，但我找不到任何方法。

我曾尝试在 postData 中使用jQuery("#grid").getGridParam('selrow')，但它总是返回 null。

任何帮助将不胜感激。

这是我的删除方法，供参考：

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Delete(int DDLid) 
    {
        int row = Convert.ToInt32(/*I NEED THIS ID*/);
        var query = from x in _ctx.DataTable
                    where ((x.id == row))
                    select x;
        _ctx.DataTable.DeleteOnSubmit(query.Single());
        _ctx.SubmitChanges();
        return Json(true);
    }

这个方法被调用并且很好，但是我得到了错误的 id。我需要所选行的 ID。这会中断，因为 DDLid 返回不止一行（因为它用于填充网格）。

我希望这是有道理的。

Answer 1

我发现我会在哪里传递选定的索引（但后来我意识到我正在寻找主键，而不是选定的索引，但无论如何它都是相同的结果）

我需要将此添加到我的导航网格中：

 {url: "Delete", mtype: "POST", reloadAfterSubmit: true, 
       serializeDelData: function (postdata) {
                         var selectedrowindex = jQuery("#grid").jqGrid('getGridParam', 'selrow');
                         var dataFromCellByColumnIndex = jQuery('#grid').jqGrid ('getCell', selectedrowindex , 1); 
                         return {DDLid: postdata.id, name: dataFromCellByColumnIndex};
       }
 });

因此，这会将列值传递给我的删除方法以及 DDLid，但我可以轻松地将 dataFromCellByColumnIndex 与 selectedrowindex 交换。

Answer 2

您应该只实现具有id 参数的Delete 操作：

public JsonResult Delete(string id) {
    ...
}

要引用 JavaScript 代码中的操作，我将使用 'url: <%= Url.Action("Delete") %>' 而不是您当前使用的 url: "Delete"。

您可以下载我为the answer 创建的here 演示项目。该项目实现了行的删除以及您当前不需要的许多其他功能。

Answer 3

您可以使用自己的参数在 delete 方法中创建另一个帖子。定义网格后，您可以详细定义每个动作。它正在使用正确的 ID 发布实际删除，而原始的正在发布虚假 ID。 JQgrid 使用行计数来删除而不是主键。他们可能会使用最新版本对其进行更改，但这在 Jqgrid 3.8 中有效

 jQuery("#ClientGrid").jqGrid('navGrid', '#ClientGridPager',
{ view: true, edit: true, search: false }, //options
{height: 240, caption: 'Edit Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/EditClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required" }, // edit options
{height: 340, caption: 'Add Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/CreateClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required", closeAfterAdd: true }, // add options
//delete method
{reloadAfterSubmit: true, beforeSubmit: function (postdata, formid)
{
    var lastselectedID = -1;
    if (ClientGridrow != null || typeof (ClientGridrow) != "undefined")
    {
        lastselectedID = $("#ClientGrid").getCell(ClientGridrow, 'ID_PK');
    }
    //CUSTOME delete to send taskid instead of rowid
    $.ajax({ type: "POST", url: "/Settings/DeleteClient/?objid=" + lastselectedID,
        data: "", success: function (response)
        {
            $("#ClientGrid").trigger("reloadGrid"); //reloadAfterSubmit: true is not working in Chrome
        }
    });
    return [true, "Delete failed message"];

}, caption: 'Delete Client', datatype: 'local', url: "/Settings/DeleteClient/?objid=-1", jqModal: false, closeOnEscape: true
}, // del options..we make two posts
  {closeOnEscape: true }, // search options
  {height: 230, width: 350, jqModal: false, closeOnEscape: true} // view options
   );