web-dev-qa-db-fra.com

Comment obtenir une valeur de cellule jqGrid lors de l'édition

Comment obtenir une valeur de cellule jqGrid lors d'une édition en ligne (getcell et getRowData renvoient le contenu de la cellule et non la valeur réelle de l'élément d'entrée).

31
raouf

Fonction générale pour obtenir la valeur d'une cellule avec un identifiant de ligne et un identifiant de cellule donnés

Créez dans votre fonction de code js:

function getCellValue(rowId, cellId) {
    var cell = jQuery('#' + rowId + '_' + cellId);        
    var val = cell.val();
    return val;
}

Exemple d'utilisation:

var clientId = getCellValue(15, 'clientId');

Dodgy, mais fonctionne.

17
Pawel

Voici un exemple de solution de base avec une fonction utilisateur.

    ondblClickRow: function(rowid) {
        var cont = $('#grid').getCell(rowid, 'MyCol');
        var val = getCellValue(cont);
    }

...

function getCellValue(content) {
    var k1 = content.indexOf(' value=', 0);
    var k2 = content.indexOf(' name=', k1);
    var val = '';
    if (k1 > 0) {
        val = content.substr(k1 + 7, k2 - k1 - 6);
    }
    return val;
}
15
raouf

Après plusieurs heures de deuil, j'ai trouvé que c'était la solution la plus simple. Appelez ceci avant d'aller chercher les données de la ligne:

$('#yourgrid').jqGrid("editCell", 0, 0, false);

Il enregistre toutes les modifications en cours et ne sera pas lancé s'il n'y a pas de lignes dans la grille.

6
Aidan

Essayez ceci, il vous donnera la valeur de la colonne particulière

onSelectRow: function(id) {
    var rowData = jQuery(this).getRowData(id); 
    var temp= rowData['name'];//replace name with you column
    alert(temp);
}
4
abi1964

Comme vous l'avez dit, selon la documentation jqGrid pour getCell et getRowData:

N'utilisez pas cette méthode lorsque vous modifiez la ligne ou la cellule. Cela renverra le contenu de la cellule et non la valeur réelle de l'élément en entrée.

Étant donné qu'aucune de ces méthodes ne renverra directement vos données, vous devrez les utiliser pour renvoyer le contenu de la cellule elle-même, puis l'analyser, éventuellement à l'aide de jQuery. Ce serait bien si une future version de jqGrid pouvait fournir un moyen de faire une partie de cette analyse elle-même et/ou une API pour la rendre plus simple. Mais d’autre part, s’agit-il vraiment d’un cas d’usage aussi fréquent?

Alternativement, si vous pouvez expliquer votre problème initial plus en détail, il peut y avoir d'autres options.

4
Justin Ethier

Bonjour, j'ai rencontré ce problème aussi. Enfin, j'ai résolu ce problème par jQuery. Mais la réponse est liée à la grille elle-même, pas commune. J'espère que ça aide.

Ma solution ressemble à ceci:

var userIDContent = $("#grid").getCell(id,"userID");  // Use getCell to get the content
//alert("userID:" +userID);  // you can see the content here.

//Use jQuery to create this element and then get the required value.
var userID = $(userIDContent).val();  // var userID = $(userIDContent).attr('attrName');
2
LLQ

Fondamentalement, vous devez enregistrer la ligne avant d'accéder au contenu de la cellule.

Si vous le faites, vous obtenez alors la valeur de la cellule au lieu du balisage fourni lorsque la cellule est en mode édition.

jQuery.each(selectedRows, function(index, foodId) {
            // save the row on the grid in 'client array', I.E. without a server post
            $("#favoritesTable").saveRow(foodId, false, 'clientArray'); 

            // longhand, get grid row based on the id
            var gridRow = $("#favoritesTable").getRowData(foodId);

            // reference the value from the editable cell
            foodData += foodId + ":" + gridRow['ServingsConsumed'] + ',';
        });
2
David C

Vous pouvez l'obtenir de la manière suivante ... !!

var rowId =$("#list").jqGrid('getGridParam','selrow');  
var rowData = jQuery("#list").getRowData(rowId);
var colData = rowData['UserId'];   // perticuler Column name of jqgrid that you want to access
1
Mitul Maheshwari

son très simple code d'écriture dans vous grid.php et passez la valeur à un autre page.php
de cette façon, vous pouvez obtenir d’autres cellules de colonne

mais tout le monde peut créer une fenêtre similaire.open (chemin d'accès à la valeur ....) dans une boîte élégante ou une boîte plus claire?

$custom = <<<CUSTOM
jQuery("#getselected").click(function(){

    var selr = jQuery('#grid').jqGrid('getGridParam','selrow'); 
    var kelr = jQuery('#grid').jqGrid('getCell', selr, 'stu_regno');
    var belr = jQuery('#grid').jqGrid('getCell', selr, 'stu_school');
    if(selr) 

     window.open('editcustomer.php?id='+(selr), '_Self');


    else alert("No selected row");
    return false;
});

CUSTOM;
$grid->setJSCode($custom); 
1
zaheerprince

Ceci est ma solution:

                function getDataLine(grida, rowid){  //vykradeno z inineeditu a vohackovano

                    if(grida.lastIndexOf("#", 0) === 0){
                        grida = $(grida);
                    }else{
                        grida = $("#"+grida);
                    }

                    var nm, tmp={}, tmp2={}, tmp3= {}, editable, fr, cv, ind;

                    ind = grida.jqGrid("getInd",rowid,true);
                    if(ind === false) {return success;}
                    editable = $(ind).attr("editable");
                    if (editable==="1") {
                        var cm;
                        var colModel = grida.jqGrid("getGridParam","colModel") ;
                        $("td",ind).each(function(i) {
                            // cm = $('#mygrid').p.colModel[i];
                            cm = colModel[i];
                            nm = cm.name;
                            if ( nm != 'cb' && nm != 'subgrid' && cm.editable===true && nm != 'rn' && !$(this).hasClass('not-editable-cell')) {
                                switch (cm.edittype) {
                                    case "checkbox":
                                        var cbv = ["Yes","No"];
                                        if(cm.editoptions ) {
                                            cbv = cm.editoptions.value.split(":");
                                        }
                                        tmp[nm]=  $("input",this).is(":checked") ? cbv[0] : cbv[1]; 
                                        break;
                                    case 'text':
                                    case 'password':
                                    case 'textarea':
                                    case "button" :
                                        tmp[nm]=$("input, textarea",this).val();
                                        break;
                                    case 'select':
                                        if(!cm.editoptions.multiple) {
                                            tmp[nm] = $("select option:selected",this).val();
                                            tmp2[nm] = $("select option:selected", this).text();
                                        } else {
                                            var sel = $("select",this), selectedText = [];
                                            tmp[nm] = $(sel).val();
                                            if(tmp[nm]) { tmp[nm]= tmp[nm].join(","); } else { tmp[nm] =""; }
                                            $("select option:selected",this).each(
                                                function(i,selected){
                                                    selectedText[i] = $(selected).text();
                                                }
                                            );
                                            tmp2[nm] = selectedText.join(",");
                                        }
                                        if(cm.formatter && cm.formatter == 'select') { tmp2={}; }
                                        break;
                                }
                            }
                        });
                    }
                    return tmp;
                }
1
hovno

Dans mon cas, le contenu de ma cellule est HTML à la suite d'un formateur. Je veux la valeur à l'intérieur de la balise d'ancrage. En récupérant le contenu de la cellule et en créant ensuite un élément à partir du code HTML via jQuery, je peux ensuite accéder à la valeur brute en appelant .text () sur le nouvel élément que je viens de créer.

var cellContents = grid.getCell(rowid, 'ColNameHere');
console.log($(cellContents)); 
//in my case logs <h3><a href="#">The Value I'm After</a></h3>

var cellRawValue = $(cellContents).text();
console.log(cellRawValue); //outputs "The Value I'm After!"

ma réponse est basée sur la réponse @LLQ, mais puisque dans mon cas mon cellContents n'est pas une entrée, je devais utiliser .text() à la place de .val() pour accéder à la valeur brute. J'ai donc pensé la poster si quelqu'un d'autre cherchait un manière d'accéder à la valeur brute d'une cellule jqGrid formatée. 

1
timbrown

vous pouvez l'utiliser directement ....

onCellSelect: function(rowid,iCol,cellcontent,e) {
            alert(cellcontent);
        }
1
MuniR

J'ai une solution: 1. Utilisation de this.value pour obtenir la valeur d'édition actuelle dans la ligne d'édition . 2. Enregistrez la valeur de la cellule dans un champ masqué lorsque la cellule perd son focus . 3. Lisez le champ caché quand vous en avez besoin.

Le code: 

 colModel="[
       { name: 'Net', index: 'Net', editable:true, editoptions: { dataEvents: [ { type: 'focusout', fn: function(e) {$('#HiddenNet').val(this.value);} }] }, editrules:{custom:true,}},
       { name: 'Tax', index: 'Tax', editable:true, editoptions: { dataEvents: [ { type: 'focus', fn: function(e) {this.value=$('#HiddenNet').val(); } }] }, editrules:{custom:true}}
    ]" 

Bonne chance

1
user2066558

Avant, j'obtenais: Balise HTML de la zone de texte quelque chose comme.

mais voici la solution pour obtenir la valeur de cette colonne en particulier, de travail et testé

function getValue(rowId, cellId) {
        var val = $("[rowId='"+rowId+"'][name='"+cellId+"']").val();
        return val;
       }

var values = getValue(rowId, 'cellid');
0
Pradeep nain

Je pense qu'une meilleure solution que d'utiliser getCell qui, comme vous le savez, renvoie du code HTML en mode édition consiste à utiliser jquery pour accéder directement aux champs. Le problème en essayant d’analyser comme vous le faites est que cela ne fonctionnera que pour les champs de saisie (pas des choses comme sélection), et cela ne fonctionnera pas si vous avez effectué certaines personnalisations des champs de saisie. Ce qui suit fonctionnera avec les entrées et les éléments sélectionnés et n’est qu’une ligne de code. 

ondblClickRow: function(rowid) {
    var val = $('#' + rowid + '_MyCol').val();
}
0
bigrockshow

Je pense que la réponse d'Aidan est de loin la meilleure.

$('#yourgrid').jqGrid("editCell", 0, 0, false);

Cela valide toutes les éditions en cours, vous donnant accès à la valeur réelle. Je le préfère parce que:

  • Vous n'avez pas à coder en dur les références de cellules dans . 
    • Elle convient particulièrement à getRowData () pour obtenir la totalité de la grille, peu importe la cellule que vous venez de modifier.
    • Vous n'essayez pas d'analyser certains balises générées par jqGrid qui pourraient changer à l'avenir.
    • Si l'utilisateur enregistre, mettre fin à la session de mise à jour est probablement le comportement souhaité.
0
StuartQ

J'ai un moyen plutôt indirect. Vos données doivent avoir un identifiant unique.

Tout d'abord, définir un formateur

$.extend(true, $.fn.fmatter, {          
numdata: function(cellvalue, options, rowdata){
    return '<span class="numData" data-num="'+rowdata.num+'">'+rowdata.num+'</span>';
}
});

Utilisez ce formateur dans ColModel. Pour récupérer un ID (par exemple, une ligne sélectionnée)

var grid = $("#grid"), 
    rowId = grid.getGridPara('selrow'),
    num = grid.find("#"+rowId+" span.numData").attr("data-num");

(ou vous pouvez directement utiliser .data () pour la dernière version 1.4.4 de jquery)

0
jackysee

Je pense qu'une extension de ceci l'aurait pour vous . récupération-original-ligne-données-de-jqgrid

0
David

Ma solution consiste à attacher un objet contenant des valeurs orignal à chaque élément tr de la grille. J'ai utilisé afterAddRecord callback pour mettre la main sur les valeurs avant que jqGrid ne les jette et la méthode "data" de jQuery pour les stocker dans le travail.

Exemple:

afterInsertRow: function( rowid, rowdata, rowelem ) {
  var tr = $("#"+rowid);
  $(tr).data("jqgrid.record_data", rowelem);
},

«Rowelem» est le tableau de valeurs de cellules de notre flux de données JSON ou [jsonReader] (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function).

Ensuite, à tout moment, je peux récupérer ces attributs en utilisant:

$(tr).data(“jqgrid.record_data”).

Plus à: http://wojciech.oxos.pl/post/9423083837/fetching-original-record-values-in-jqgrid

0
Wojtek Kruszewski

Pour obtenir la valeur de la cellule lors de l'édition en ligne, vous devez capturer cet événement (ou un autre événement similaire, consultez documentation ):

beforeSaveCell: fonction (rowid, celname, valeur, iRow, iCol) {} 

Dans le paramètre value, vous avez la 'valeur' ​​de la cellule en cours de modification.

Pour obtenir le reste des valeurs de la ligne, utilisez getRowData ()

J'ai perdu beaucoup de temps avec cela, j'espère que cela aidera.

0
Cacho Santa

J'obtiens une valeur d'édition en utilisant javascript:

document.getElementById ('idCell'). value

J'espère que cette info est utile pour quelqu'un.

0
Ignacio Ayuste