編集可能なチェックボックス列のjqGrid

Question

jqGridを使用すると、ページの読み込み時とクリックしたときの編集可能なビューでのセルの読み込みを強制する方法を教えてください。

以下のように 'セル編集'を設定すると、セルをクリックしたときにのみチェックボックスが表示されます。チェックボックスをクリックでも

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, 

cellEdit:true, 

、サーバーにAJAXポストを送るのではなく、即座に入る押すユーザーに頼らの方法は何ですか？

Answer 1

チェックボックスフォーマッタのdisabledプロパティを使用し、チェックボックスは常にクリック可能なことができるようにするために：

{ name: 'MyCol', index: 'MyCol', 
    editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
    formatter: "checkbox", formatoptions: {disabled : false} , ... 

を2番目の質問に答えるために、あなたはセットアップにあるチェックボックスのイベントハンドラを持つことになります、その結果、たとえば、AJAX POSTをサーバに送信するために関数が呼び出されます。ここにあなたを始めるためのいくつかのコード例があります。あなたはloadCompleteイベントにこれを追加することができます。

// Assuming check box is your only input field: 
    jQuery(".jqgrow td input").each(function(){ 
     jQuery(this).click(function(){ 
      // POST your data here... 
     }); 
    }); 

Answer 2

これは古いものですが、私はあまりにもここに私の解決策を追加することにしましたので、ビューをたくさん持っています。

私はloadCompleteイベントを使用しての義務からあなたを解放します遅延バインディングの実装を作成するためのjQueryの.delegate機能を利用しています。

ただ、次の行を追加します。

$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); }); 

これは、後半グリッド行上にあるすべてのチェックボックスにそのハンドラをバインドします。 複数のチェックボックス列がある場合は、ここで問題が発生する可能性があります。

Answer 3

私は以下のリンクで完全なコードを共有していました。必要があるかどうかを調べることができます。

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Answer 4

私は同じ問題を抱えていたし、私はすぐにチェックボックスのクリックを処理するための良い解決策を見つけたとします。主な考え方は、ユーザーが編集不可能なチェックボックスをクリックしたときにeditCellメソッドをトリガーすることです。あなたは、グリッドのイベントを定義する必要があり、これを除いて

 jQuery(".jqgrow td").find("input:checkbox").live('click', function(){ 
      var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id')); 
      var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td')); 
      //I use edit-cell class to differ editable and non-editable checkbox 
      if(!$(this).parent('td').hasClass('edit-cell')){ 
            //remove "checked" from non-editable checkbox 
       $(this).attr('checked',!($(this).attr('checked'))); 
         jQuery("#grid").editCell(iRow,iCol,true); 
      } 
    }); 

：ここにコードされ、ユーザーがそれをクリックしたときに

  afterEditCell: function(rowid, cellname, value, iRow, iCol){ 
      //I use cellname, but possibly you need to apply it for each checkbox  
       if(cellname == 'locked'){ 
       //add "checked" to editable checkbox 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked'))); 
          //trigger request 
        jQuery("#grid").saveCell(iRow,iCol); 
       } 
      }, 

      afterSaveCell: function(rowid, cellname, value, iRow, iCol){ 
       if(cellname == 'locked'){ 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell'); 
       } 
      }, 

は、その後、あなたのチェックボックスが毎回編集リクエストを送信します。

Answer 5

Webサーバーにすべてのグリッド行を送信する1つの送信機能があります。

私はこのコードを使用してこの問題を解決：

var checkboxFix = []; 
$("#jqTable td[aria-describedby='columnId'] input").each(function() { 
     checkboxFix.push($(this).attr('checked')); 
}); 

その後、私は値と混合し、以下のコードから得ました。

$("#jqTable").jqGrid('getGridParam', 'data'); 

私はそれが誰かを助けてくれることを願っています。

Answer 6

よりよい解決策：あなたのcolModelで

<script type="text/javascript"> 
    var boxUnformat = function (cellvalue, options, cell) { return '-1'; }, 
     checkboxTemplate = {width:40, editable:true, 
      edittype: "checkbox", align: "center", unformat: boxUnformat, 
      formatter: "checkbox", editoptions: {"value": "Yes:No"}, 
      formatoptions: { disabled: false }}; 
    jQuery(document).ready(function($) {   
     $(document).on('change', 'input[type="checkbox"]', function(e){ 
      var td = $(this).parent(), tr = $(td).parent(), 
       checked = $(this).attr('checked'), 
       ids = td.attr('aria-describedby').split('_'), 
       grid = $('#'+ids[0]), 
       iRow = grid.getInd(tr.attr('id')); 
       iCol = tr.find('td').index(td); 
      grid.editCell(iRow,iCol,true); 
      $('input[type="checkbox"]',td).attr('checked',!checked); 
      grid.saveCell(iRow,iCol); 
     }); 
    }); 
</script> 

：

... 
{name:'allowAccess', template: checkboxTemplate}, 
...