web-dev-qa-db-ja.com

jqGrid（行の削除）-追加のPOSTデータを送信する方法は？

POSTデータ（idはテーブルの主キー）の形式で「oper」および「id」パラメーターのみを送信するため、jqGrid削除メカニズムに問題があります。

問題は、IDと別の列の値、たとえばuser_idに基づいて行を削除する必要があることです。このuser_idをPOSTデータに追加する方法は？

私はこの問題を次のように要約することができます：

  1. 選択した行のセル値（user_id）を取得するにはどうすればよいですか？
  2. そして、その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
        );
jqueryjqgrid
14
ronanray

それは問題ではありません。必要なことを行うにはさまざまな方法があります。最も直接的な方法は、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サービスを使用し、アイテムを削除するには、本文が空のDELETEHTTPリクエストを使用します。すべてのパラメーターは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
18
Oleg

これが私が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は、選択した行のセル内にあるもので、関心のあるものです。

お役に立てれば！

7
ravl1084

key：true in colModelを次のように設定すると、これは簡単に実現できます。

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

これを行うと、POST中にこのフィールドが自動的に送信されます。

colModelのkey：trueの目的は、コマンドプロセッサがインデックス付きレコードセットで正しく動作できるようにすることだけです。

1
Power Engineering

はい、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 () {
        }
    });
0
Aditya

私も同じ問題を抱えていました。私がそれを修正した方法は、user_idをjsondataの最初の列として配置することでした。そして、jqgridのjsonreader設定を使用すると、それを実行できます。

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

jsondataのjsonreader設定を確認してください。

私が使う：

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

私のデータは

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

そして今、行を更新したり、行を削除したりすると、ユーザーIDが取得されます。これがあなたのために働くことを願っています！

0
bruno

追加のデータを投稿する方法がわかりませんが、delete-urlの一部としてクエリ文字列パラメーターとして追加のデータを送信してみることができます。

0
Wolf