Définir la classe ou l'identificateur sur la ligne jqGrid en fonction d'une paire clé/valeur placée en ligne (comme ID)

Question

Je suppose que afterInsertRow est la méthode à utiliser, et j'ai déjà des données supplémentaires pour chaque ligne (lecture/non-lecture)), avec la clé "readStatus". Ce que je ne veux pas, c'est de traverser le DOM une fois la grille terminée pour ajouter une classe css à la ligne en fonction de la valeur de la cellule.

Des suggestions?

Add-on:

Si ce sont les données de la cellule:

{"cell":["blah blah blah"],"id":"123456789","readstatus":"unread"} 

Comment puis-je obtenir de la partie 'readstatus'?

Answer 1

L'utilisation de la fonction afterInsertRow n'est pas la meilleure, surtout si vous utilisez gridview:truejqGrid option qui est presque toujours recommandé. Regardez les old answer qui font surtout ce dont vous avez besoin. Le schéma du code pourrait être sur le suivant

$('#list').jqGrid({ 
    //... 
    loadComplete: function() { 
     var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status; 
     for (i = 0; i < l; i++) { 
      rowid = ids[i]; 
      // get data from some column "readStatus" 
      status = $(this).jqGrid("getCell", rowid, "readStatus"); 
      // or get data from some 
      //var rowData = $(this).jqGrid("getRowData', rowid); 

      // now you can set css on the row with some 
      if (status === "error") { 
       $('#' + $.jgrid.jqID(rowid)).addClass('myErrorClass'); 
      } 
     } 
    } 
}); 

On dirait que « les DOM après transversing réseau a terminé », mais il fonctionne rapidement l'utilisation de afterInsertRow.

MISE À JOUR: La réponse est relativement ancienne. Les versions plus récentes de jqGrid ont des rappels callattr et rowattr qui peuvent être utilisés pour implémenter plus efficacement les mêmes exigences. Il est important de comprendre que le réglage de la classe sur une cellule de la grille ou de la rangée de la grille (voir .addClass('myErrorClass') dans le code de la réponse) suit browser reflow sur tous les éléments existant sur la page. Il faut donc réduire le nombre de changements d'éléments DOM sur la page. Pour ce faire, il est strictement recommandé d'utiliser gridview: true (voir the answer pour plus de détails). Les callbacks callattr, rowattr et les formateurs personnalisés utilisés avec gridview: true permettent de créer le contenu complet du corps de la grille à la fois. Ainsi, le nombre de changements sur la page sera réduit et les performances seront améliorées.

La propriété colonne callattr de colModel peut être utile de classe, de style ou d'autres attributs sur les cellules sélectionnées de la grille. Le rappel rowattr peut aider à définir la classe, le style ou d'autres attributs sur lignes sélectionnées de la grille (exactement comme dans l'exemple ci-dessus).

Je recommande à tous ceux qui ont lu la réponse ci-dessus de regarder the answer qui montre comment utiliser rowattr.

Vous pouvez en savoir plus sur callattr par exemple dans les réponses suivantes: this, this, this, this. Si vous utilisez datatype: "xml", la mise en œuvre pourrait être un peu plus complexe: voir the answer pour plus de détails.

Answer 2

Cela peut aussi être utilisé pour ajouter une classe CSS à la ligne

var _tr = $("#gridId").jqGrid("getInd", rowid, true); 
$(_tr).addClass("ui-state-error"); 

Espoirs qui aide