web-dev-qa-db-fra.com

jqGrid avec une colonne de case à cocher modifiable

Lorsque vous utilisez jqGrid, comment forcez-vous une cellule à se charger dans sa vue modifiable au chargement de la page ainsi que lorsque vous cliquez dessus?

Si vous configurez la "modification de cellule" 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,

En cliquant sur la case à cocher, existe-t-il un moyen d'envoyer un AJAX message au serveur instantanément plutôt que de devoir compter sur l'utilisateur en appuyant sur Entrée?

javascriptjqueryjqgrid
35
dev

Pour permettre aux cases à cocher d'être toujours cliquables, utilisez la propriété disabled du formateur de cases à cocher:

{ 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 l'on clique sur une fonction, une fonction est appelée, par exemple, pour envoyer un AJAX POST sur le serveur. Voici un exemple de code pour vous aider à démarrer. Vous pouvez l'ajouter à 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...
        });
    });
78
Justin Ethier

Ceci est un ancien mais a beaucoup de vue, j'ai donc 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érera de l'obligation d'utiliser l'événement loadComplete.

Ajoutez simplement ce qui suit:

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

Cela liera tardivement ce gestionnaire à chaque case à cocher qui se trouve sur les lignes de la grille. Vous pouvez avoir un problème ici si vous avez plusieurs colonnes de cases à cocher.

6
AlexCode

J'ai eu le même problème et je suppose que j'ai trouvé une bonne solution pour gérer immédiatement le clic sur la case à cocher. 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 devez 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');
                }   
            },

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

3
Валентина предтеченская

J'ai une fonction d'envoi 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'));
});

Ensuite, j'ai mélangé des valeurs obtenues avec le code ci-dessous.

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

J'espère que ça aide quelqu'un.

2
Richard Keller

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

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

1
Timeternity

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