jqGrid（删除行） - 如何发送额外的 POST 数据？答案

【问题标题】：jqGrid (Delete row) - How to send additional POST data?jqGrid（删除行） - 如何发送额外的 POST 数据？
【发布时间】：2010-05-14 10:00:33
【问题描述】：

我遇到了 jqGrid 删除机制的问题，因为它只以 POST 数据的形式发送“oper”和“id”参数（id 是表的主键）。

问题是，我需要根据 id 和另一个列值删除一行，比如说 user_id。如何将此 user_id 添加到 POST 数据中？

我可以将问题总结如下：

如何获取选中行的单元格值（user_id）？
以及，如何将该 user_id 添加到 POST 数据中，以便可以从发生实际删除过程的代码中检索它。

示例代码：

jQuery("#tags").jqGrid({
                url: "subgrid.process.php,
                editurl: "subgrid.process.php?,
                datatype: "json",
                mtype: "POST",
                colNames:['id','user_id','status_type_id'],
                colModel:[{name:'id', index:'id', width:100, editable:true},

                         {name:'user_id', index:'user_id', width:200, editable:true},

                        {name:'status_type_id', index:'status_type_id', width:200}
                ],
                pager: '#pagernav2',
                rowNum:10,
                rowList:[10,20,30,40,50,100],
                sortname: 'id',
                sortorder: "asc",
                caption: "Test",
                height: 200
        });
        jQuery("#tags").jqGrid('navGrid','#pagernav2',
            {add:true,edit:false,del:true,search:false},
        {},
             {mtype:"POST",closeAfterAdd:true,reloadAfterSubmit:true}, // add options
   {mtype:"POST",reloadAfterSubmit:true}, // del options
            {} // search options
        );

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

这不是问题。有不同的方法来做你需要的。最直接的方法是使用serializeDelData 函数。 jqGrid 删除行的代码如下所示

var ajaxOptions = $.extend({
    url: rp_ge.url ? rp_ge.url : $($t).jqGrid('getGridParam','editurl'),
    type: p.mtype,
    data: $.isFunction(p.serializeDelData) ? p.serializeDelData(postd) : postd,
    complete:function(data,Status){
        //...
    },
    error:function(xhr,st,err){
        //...
    }
}, $.jgrid.ajaxOptions, p.ajaxDelOptions);

$.ajax(ajaxOptions);

所以您可以定义自己的 serializeDelData 函数来满足您的所有需求：

{mtype:"POST", reloadAfterSubmit:true, serializeDelData: function (postdata) {
      var rowdata = jQuery('#tags').getRowData(postdata.id);
      // append postdata with any information 
      return {id: postdata.id, oper: postdata.oper, user_id: rowdata.user_id};
 }}, // del options

顺便说一句，如果您想自己生成发布到服务器的数据，只需返回一个字符串而不是一个对象。然后数据将通过 jQuery.ajax 发布而不做任何更改。

如果您不想在发布的数据中放置附加信息，但在 URL 中，您可以在 onclickSubmit 中执行此操作。例如，我在服务器端使用 RESTfull 服务并删除一个项目，我使用 DELETE HTTP 请求和空主体。所有参数都放在 URL 中。对应的代码如下：

{mtype:"DELETE", reloadAfterSubmit:true, serializeDelData: function (postdata) {
      return ""; // the body MUST be empty in DELETE HTTP requests
 }, onclickSubmit: function(rp_ge,postdata) {
      var rowdata = jQuery('#tags').getRowData(postdata.id);
       rp_ge.url = 'subgrid.process.php/' + encodeURIComponent(postdata.id) +
                   '?' + jQuery.param ({user_id: rowdata.user_id});
 }}, // del options

【讨论】：

谢谢。 jQuery('#tags').getRowData(postdata.id);正是我想要的。
我在网格的每一行上放置一个删除按钮时尝试了这种方法——它在您第一次单击删除时起作用，但随后每次删除都使用与第一次单击相同的 url .我修改了代码以摆脱“onclickSubmit”覆盖，而是将适当的 url 直接传递给 delGridRow 方法（而不是设置 rp_ge.url），并且它起作用了。
@jrnail23：可能取决于recreateForm 选项的使用。我将recreateForm:true 作为我的默认设置。您可以尝试将此选项一起添加到mtype:"DELETE", reloadAfterSubmit:true, ...。

【解决方案2】：

这就是我如何使用 jqGrid 在删除时将更多数据附加到 POST：

var grid = $("#grid").jqGrid(... //make your grid

$("#grid").jqGrid('navGrid', '#pager', {add:false, edit:false, del:true},
                  {},
                  {},
                  {delData: {
                             name: function() {
                                        var sel_id = grid.jqGrid('getGridParam', 'selrow');
                                        var value = grid.jqGrid('getCell', sel_id, 'colName');
                                        return value;
                                   }
                            }
                   },
                  {},
                  {});

这将返回一个帖子数组 {id:rowNumber, oper:del, name:someValue}。 name 是您希望在 post 数组中引用变量的方式，someValue 是您感兴趣的所选行的单元格中的任何内容。

希望这会有所帮助！

【讨论】：

【解决方案3】：

如果您像这样在 colModel 中设置 key:true，这很容易实现：

colModel: [ {name: 'childId', index: 'childId', align: 'center', sorttype: 'string', key:true},

这样做会导致在 POST 期间自动发送此字段。

colModel 中 key:true 的目的只是为了让命令处理器在索引记录集上正常运行。

【讨论】：

通过设置 key: true ，它只发送值作为_id。您不能使用它发送其他字段数据。

【解决方案4】：

我遇到了同样的问题。我修复它的方法是将 user_id 作为我的 jsondata 中的第一列。并且使用 jqgrid 的 jsonreader 设置，您可以完成它。

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

查看 jsondata 的 jsonreader 设置。

我使用：

jsonReader: { cell: "", id: "0" }

我的数据是这样的

{ totalpages: "xxx",  currpage: "yyy",  totalrecords: "zzz",
  invdata : [
   {"userid","cell12", "cell13", "cell14"},
   {"userid","cell22", "cell23", "cell24"},
    ...
   ]
}

现在，如果我更新一行或删除一行，我将获得用户 ID。希望这对你有用！

【讨论】：

抱歉，问题不在于获取数据，而在于在从 jqGrid 中删除行期间发布附加信息。一个需要不是一个userid，而是两个id：id和user_id。

【解决方案5】：

我不确定如何发布附加数据，但您可以尝试将附加数据作为查询字符串参数作为删除 URL 的一部分发送。

【讨论】：

【解决方案6】：

是的，您可以在 navgrid 的 del 参数下使用 onclickSubmit 事件向 postdata 添加其他数据，在您的情况下，如果您想发送包含 id 的 user_id，则可以这样做

$("#gridId").jqGrid({
    }).hideCol(['']).navGrid('#pagerId', {
        edit: false, add: false, del: true, search: true, refresh: true, beforeRefresh: function () {
        }, afterRefresh: function () {
        }
    }, {}, {}, {
        afterComplete: function () {
        }, onclickSubmit: function (params) {
            var extraParameters = [];  var arraySelected = $("#gridId").jqGrid('getGridParam', 'selarrrow');
            for (var i = 0; i < arraySelected.length; i++) {
                 extraParameters.push($('#gridId').getRowData(arraySelected[i]).user_id)
            } 
            return { extraParams: extraParameters.join(',') };
        }
    },
    {
        sopt: ['cn', 'nc'], onSearch: function () {
        },
        onReset: function () {
        }
    });

【讨论】：