jqGrid avec une colonne de case à cocher modifiable

Question

Lors de l'utilisation de jqGrid, comment forcer le chargement d'une cellule dans sa vue modifiable lors du chargement de la page, ainsi que lors d'un clic?

Si vous configurez la 'cellule de modification' comme ci-dessous, la case à cocher n'apparaît que lorsque vous cliquez sur la cellule.

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

cellEdit:true, 

également à cliquer case à cocher, est-il un moyen d'envoyer un message AJAX au serveur instantanément plutôt que d'avoir à compter sur l'utilisateur en appuyant sur entrer?

Answer 1

Pour permettre aux cases à cocher pour toujours être cliquable, utilisez la propriété de formatter case à cocher disabled:

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

Pour répondre à votre deuxième question, vous devrez configurer un gestionnaire d'événements pour les cases à cocher, de sorte que lorsque on clique sur une fonction pour appeler, par exemple, un POSTE AJAX au serveur. Voici un exemple de code pour vous aider à démarrer. Vous pouvez ajouter ceci à l'événement 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

C'est un ancien, mais a beaucoup de vue alors j'ai décidé d'ajouter ma solution ici aussi. J'utilise la fonction .delegate de JQuery pour créer une implémentation de liaison tardive qui vous libère de l'obligation d'utiliser l'événement loadComplete.

il suffit d'ajouter les éléments suivants:

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

Cela se lier tard ce gestionnaire à chaque case à cocher qui se trouve sur les lignes de la grille. Vous pouvez rencontrer un problème si vous avez plus d'une colonne de case à cocher.

Answer 3

J'avais partagé un code complet sur le lien ci-dessous, vous pouvez jeter un oeil si vous en avez besoin.

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

Answer 4

J'ai eu le même problème et je suppose que j'ai trouvé une bonne solution pour gérer case à cocher, cliquez immédiatement. L'idée principale est de déclencher la méthode editCell lorsque l'utilisateur clique sur la case à cocher non éditable. Voici le code:

 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); 
      } 
    }); 

Sauf cela, vous devez définir des événements pour votre réseau:

  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'); 
       } 
      }, 

Ensuite, votre case à cocher envoyer des demandes de modification à chaque fois que l'utilisateur clique dessus.

Answer 5

J'ai une fonction de soumission qui envoie toutes les lignes de la grille au serveur web.

Je résolu ce problème en utilisant ce code:

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

Ensuite, je mélange avec des valeurs obtenu à partir du code ci-dessous.

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

J'espère que cela aide quelqu'un.

Answer 6

meilleure solution:

<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> 

Dans votre colModel:

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