jqGrid avec une colonne de cases à cocher modifiable

Question

Lors de l'utilisation de jqGrid comment faites-vous la force d'une cellule de charge à sa vue modifiable sur la page de la charge ainsi que lorsqu'il est cliqué?

Si vous configurez 'édition de cellules", comme ci-dessous, la case à cocher n'apparaît lorsque vous cliquez sur la cellule.

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

cellEdit:true,

Aussi en cliquant sur la case, il y a un moyen de l'envoi d'un AJAX post au serveur instantanément plutôt que d'avoir à compter sur l'utilisateur en appuyant sur entrée?

Answer 1

Pour permettre les cases à cocher pour toujours être sur-mesure, utilisez la case à cocher formateur de l' disabled de la 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 telle sorte que lorsqu'un utilisateur clique sur une fonction est appelée, par exemple, d'envoyer une requête AJAX POST au serveur. Voici un exemple de code pour obtenir vous avez commencé. 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...
        });
    });

Answer 2

C'est un ancien, 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' .fonction de délégué de JQuery pour créer une liaison tardive de mise en œuvre qui permettra de vous libérer de l'obligation d'utiliser la loadComplete événement.

Il suffit d'ajouter le texte suivant:

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

Ce sera la fin de lier ce gestionnaire pour chaque case, c'est sur les lignes de la grille. Vous pouvez avoir un problème ici, si vous avez plus d'une colonne de cases à cocher.

Answer 3

J'ai eu le même problème, et je pense que j'ai trouvé une bonne solution pour gérer la case cliquez immédiatement. L'idée principale est de déclencher editCell méthode lorsque l'utilisateur clique sur la non-modifiable case. 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 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 envoyer modifier les demandes de tous les temps lorsque l'utilisateur clique sur elle.

Answer 4

J'ai un soumettre fonction qui envoie toutes les lignes de la grille de 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 obtenu à partir du code ci-dessous.

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

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

Answer 5

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