jqgridのすべての編集行を取得します

Question

編集されたすべての行を取得するにはどうすればよいですか？

私は次のように書いています。jqgirdユーザーはすべてのレコードのチェックボックスを編集できます。 [保存]ボタンをクリックすると、すべてのレコードが編集されていることを知る必要があります。私はjqueryとjqgridを初めて使用しています。

誰でも手伝ってもらえますか？ここで

はjqgridとhtml使用している：

var customerCodesView  = {}; 
customerCodesView.customerCodesView = function() { 

$jq("#customerCodesTable").jqGrid(
     { 
      colNames : ['Cust #','Customer Name', '1', '2','3', '4', '5', '6','7', '8','9', '10', '11', '12', '13', '-1'], 

      colModel : [{name : 'customerNumber',index : 'baseCustomerNumber',width : 55, align :'center'}, 
         {name : 'customerName',index : 'storeName',width : 100, sorttype :'text', align :'center'}, 
         {name : 'creditCodesPermissions.1',index : 'codeOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.2',index : 'codeTwo',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.3',index : 'codeThree',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.4',index : 'codeFour',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.5',index : 'codeFive',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.6',index : 'codeSix',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.7',index : 'codeSeven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.8',index : 'codeEight',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.9',index : 'codeNine',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.10',index : 'codeTen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.11',index : 'codeEleven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.12',index : 'codeTwelve',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.13',index : 'codeThirteen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}, 
         {name : 'creditCodesPermissions.-1',index : 'codeMinusOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}} 
         ], 

      pager : '#customerCodesTablePager', 
      rowNum : 1000, 
      loadOnce:true, 
      sortorder : "desc", 
      viewrecords : true, 
      gridview : true, 
      autowidth : true, 
      multiselect : true, 
      jsonReader : { 
       repeatitems : false, 
       root : function(obj) { 
        return obj; 
       }, 
       page : function(obj) { 
        return 1; 
       }, 
       total : function(obj) { 
        return 1; 
       }, 
       records : function(obj) { 
        return obj.length; 
       } 
      }, 
      sortable : true, 
      caption : "Credit Codes" 
     }); 

$jq("form#customerCodesForm").submit(
       function() { 
        var newUrl = resourceURL+"&action=searchCreditCodes&"+ $jq(this).serialize(); 
        $jq("#customerCodesTable").jqGrid("setGridParam", {"url" : newUrl,datatype : "json"}).trigger("reloadGrid"); 
        return false; 
       }); 

$jq(".submit").button({ 
    icons : { 
     primary : 'ui-icon-circle-zoomin' 
    } 
}); 

$jq("#customerCodesTableSave").click(function() { 

    var id = $jq("#customerCodesTable").jqGrid('getGridParam','selarrow'); 
    alert("save"); 
    if (id) { 
     var rowdata = $jq("#customerCodesTable").jqGrid('getRowData', id); 
     var postData = JSON.stringify(rowdata); 

     alert("postdata"+postData); 
    } 
    saveGrid(); 

}); 


function saveGrid() { 
    alert("saveGrid"); 
    var saveCollection = []; 
    //Collect all rows in editmode, the rows to be saved. 
    $.each($jq("#customerCodesTable").getDataIDs(), function (index, id) { 
     var row = grid.getInd(id, true); 
     if (row !== false) { 
      if ($(row).attr('editable') === '1') { 
       saveCollection.push(id); 
      } 
     } 
    }); 
    alert(""+saveCollection.toString() + "length" + saveCollection.length); 
} 

}; 

HTML：

<div id="customerCodes_Form"> 
    <form class="customerCodesForm" id="customerCodesForm" method="post"> 
    <fieldset class="ui-widget ui-widget-content ui-corner-all"> 
     <legend class="ui-widget ui-widget-header ui-corner-all">Permissions by Customer</legend> 
     <div> 
      <span> 
       <label for="customerNumber">Customer Number</label> 
       <input id="customerNumber" name="customerNumber" class=""/> 
      </span> 
      <button class="submit" type="submit">Search</button> 
     </div> 
    </fieldset> 
</form> 
<div id="customerCodesGrid"> 
    <table id="customerCodesTable"><tbody><tr><td></td></tr></tbody></table> 
    <div id="customerCodesTablePager"></div> 
    <div style="float:right;"> 
     <button id="customerCodesTableSave">Save</button> 
     <button id="customerCodesTableCancel">Cancel</button> 
    </div> 
</div> 
</div> 

更新：@Justinはご入力いただきありがとうございます、私はjQueryのに新しいですが、取得することは常に良いです正しいこと:) jqGrid内のデータは最初に満たされず、空になります。ユーザが "Go"ボタンを押した後に入力番号を入力する検索入力ボックスがあります。jxgridでjsonデータを埋めるためにajax呼び出しを行っています。このデータは[{"customerNumber":"64093","customerName":"#9735 WATSONTOWN BILO ","creditCodesPermissions.1":"True","creditCodesPermissions.2":"True","creditCodesPermissions.3":"False","creditCodesPermissions.4":"True","creditCodesPermissions.5":"True","creditCodesPermissions.6":"True","creditCodesPermissions.7":"True","creditCodesPermissions.8":"True","creditCodesPermissions.9":"False","creditCodesPermissions.10":"False","creditCodesPermissions.11":"True","creditCodesPermissions.12":"True","creditCodesPermissions.13":"True","creditCodesPermissions.-1":"True"}]のように見えますが、jsonmapの使い方はわかりませんこの種の出力は、私はそれを把握しようとします。あなたが言及した "celledit"オプションを試してみます。あなたの時間と助けてくれてありがとう。

Answer 1

あなたがグリッドを埋める方法を投稿したコードからは分かりません。 datatypeを定義しないので、デフォルト値datatype: 'xml'が使用され、jqGridは、定義されていないurlからajaxごとにXMLデータをロードしようとします。デフォルトのurl: ""が使用されます。したがって、jqGridはサーバーからXMLデータをロードしようとします。私はそれがあなたが欲しいと思っていると確信していません。 jsonReaderを使用しているため、おそらくdatatype: 'json'を使用する予定です。質問にテスト入力データを含めると、多くのことがクリアされます。

次の問題です。 colModel（'creditCodesPermissions.7'またはさらに'creditCodesPermissions.-1'）の 'name'プロパティには、許可されていない特殊文字を使用します。どのようにデータを埋め込むかによって、ポイントを持つjsonpmapまたはxmlmapを使用することができますが、実際に必要であり、XML/JSONデータのフォーマットを変更できない場合にのみ、これを行う必要があります。いずれにしても、の 'name'プロパティを'creditCodesPermissions7'のような値に変更する必要があります。 ？@ []^`{|}〜）は名前の文字どおりの一部として使用しないでください（！"＃$％& '（）* +、。/ :;など）いくつかのグリッド要素のidを構築するために使用されます。

さらに私はcolumn templatesを使用するためにあなたをお勧めします。あなたはちょうどそのcolModelの内側の列の定義は可能性があり

var myCheckBoxTemplate = { 
    width: 40, align: "center", editable: true, edittype: 'checkbox', 
    editoptions: { value: "True:False"}, formatter: "checkbox", 
    formatoptions: {disabled : false} 
}; 

のようなオブジェクトを定義する必要がありますlike

{name: 'creditCodesPermissions1', index: 'codeOne', template: myCheckBoxTemplate} 

It woulあなたのjqGridを単純化します。

もう少し小さな発言：loadOnce:trueパラメータがありません。 loadonce:trueのみ。 loadOnce:trueパラメータは無視されます。

あなたの主な質問に答えるには、最初にグリッドデータがどのように満たされているかを理解する必要があります。いずれにしても、3つの標準編集モード（インライン編集、フォーム編集のセル編集）を使用することをお勧めします。あなたの場合、インライン編集またはcell editingがおそらく良いでしょう。 cell editingの場合はクラスがセル要素（<td>要素）に追加され、"edited"クラスがグリッド行（<tr>要素）に追加されます。したがって、このファクトを使用して、どの行のどのセルがユーザーによって変更されたかを検出できます。