jqGrid avec une colonne à cocher modifiable

pour permettre aux cases à cocher d'être toujours cliquables, utilisezdisabled propriété:

{ 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 lorsqu'une fonction est cliquée, une fonction est appelée, par exemple, pour envoyer un message AJAX au serveur. Voici un exemple de code pour vous lancer. Vous pouvez ajouter ceci à l' loadComplete événement:

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

C'est vieux, mais a beaucoup de vue, donc j'ai décidé d'ajouter ma solution ici aussi.

je suis en train de faire l'utilisation de l' .déléguer la fonction de jQuery pour créer une mise en œuvre tardive et contraignante qui vous libérera de l'obligation d'utiliser l'événement loadComplete.

il suffit d'ajouter ce qui suit:

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

cela liera tardivement ce gestionnaire à chaque case à cocher qui est sur les lignes de la grille. Vous pouvez avoir un problème ici, si vous avez plus d'une colonne de cases à cocher.

j'ai eu le même problème et je suppose que j'ai trouvé une bonne solution pour gérer le clic de case immédiatement. L'idée principale est de déclencher la méthode editCell lorsque l'utilisateur clique sur la case à cocher non modifiable. 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 ceci, vous devriez définir des événements pour votre grille:

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

alors votre case à cocher enverra des demandes d'édition chaque fois que l'utilisateur clique dessus.

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

j'ai résolu ce problème en utilisant ce code:

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

puis j'ai mélangé avec des valeurs obtenues à partir du code ci-dessous.

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

j'espère que ça aidera quelqu'un.

j'avais partagé un code complet au lien ci-dessous, vous pouvez prendre un coup d'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

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}, 
...