8
votes

JQGRID colorant une ligne entière dans la grille basée sur une valeur de cellules

Je sais que cela a été demandé auparavant, mais je ne peux pas le faire courir et je suis hors de choses à essayer.

Je veux coloriser une ligne dans une grille si sa valeur n'est pas 1 - J'utilise une personnalisation formateur pour cela. Le formateur lui-même fonctionne, ce n'est pas le problème.

J'ai essayé de multiples façons que j'ai trouvés jusqu'à présent sur le Web - ajout d'une classe, en ajoutant directement un code CSS, en utilisant setrowdata , en utilisant setcell ....

Voici mes exemples - Aucun d'entre eux n'a travaillé pour moi (Linux, FF363) - Tout pointeur serait grandement apprécié.

27.05.2010_00: 00: 00-27.05.2010_00: 00: 00 est mon identifiant de ligne xxx


0 commentaires

8 Réponses :


1
votes

Je suggère que vous essayez quelque chose comme ça. Cela vous donnera réellement accès à toute la ligne.

afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'red'});   
        }   
     } 


1 commentaires

Eh bien, cela travaille au moins :) Je vais essayer d'utiliser SetRowdata au lieu de SetCell, j'espère que c'est moins cher d'un point de vue d'exécution - cela prend assez longtemps sur mon test VM ...



13
votes

Il me semble que votre problème principal est que vous ne définissez pas un style de «couleur de fond». Vous devez supprimer la classe «UI-Widget-Content» de la ligne (à partir de élément) xxx

avant d'ajouter la classe state_activ ou stat_inactive , car jQuery ui classe 'ui-widget-content' est défini .ui-widget-contenu comme xxx

et uniquement avec le réglage de CSS 'fond-couleur' ​​ ne change pas vraiment la couleur de fond. Alors essayez d'utiliser quelque chose comme xxx


11 commentaires

Cela semble logique mais malheureusement, il ne fonctionne pas - la classe de contenu ui-widget n'est pas supprimée. Je l'ai mis dans l'appel du formateur et dans une fonction de grilleComplet - rien :(


@Thomas. Dans loadcommete Les lignes sont remplies et dans le gridcomplete non. Sur moi, cela fonctionne à l'intérieur de loadcomplete . Je vous recommande toujours d'utiliser GridView: true wnd wnd utilisation de l'heure Afterinsertrow événement, qui casser le comportement d'exécution rapide de GridView: true paramètre. Vous pouvez appeler jQuery ('# list2'). Getdataids (); intérieur ou loadcomplete , valeur de cellule test avec getcell () puis supprimer et ajoutez la classe.


Il ne fonctionne toujours pas :( Apparemment son b / c Le sélecteur JQuery ne trouve pas l'ID de la ligne - L'objet est NULL, bien que l'ID est là ... ID = 25.05.2010_00: 00: 00-26.05.2010_00: 00: 00: Tody> alertes de var l2 = jQuery ('# list2'); alerte ("id =" + cl + "" + l2.html ()); Var trelement = jQuery ('"#' + cl + '", jQuery ('# list2')); tremblement.removececlass ("ui-widget-content '); tremblement.addclass (' stadifactive '); tremblement est null avec .html () ...


Il est possible que vous ayez un tel problème en raison de symboles spéciaux à l'intérieur de ID . Vous utilisez ':', '-' et '.'. '. JQGRID avait des problèmes avec certains symboles à l'intérieur de ID . Pour vérifier cela, essayez d'utiliser une forme plus facile d'identifiants. De plus, certains personnages ont une signification spatiale pour JQuery. Donc les constructions comme jQuery ("#" + options.rowid) peut être fausse interprétation par jQuery. Si tout sera fonctionner avec les ID simples, vous pouvez alors mettre en œuvre une forme de codage / décodage des valeurs d'identification.


Oui, je l'ai déjà pensé aussi - peut-être que JQgrid.jqid pourrait aider ici, je vais essayer cela plus tard. En attendant, le code suivant fonctionne (et assez vite alors que ce n'est pas joli que je pourrais l'utiliser) chargéeComplete: fonction (xhr) {var mids = jQuery ("# ​​list2"). GetDataids (); pour (var i = 0; i


Javascript n'a pas de propriétés privées. Vous pouvez donc utiliser les propriétés internes JQGRID. Voir Stackoverflow.com/questions/2917902/get-the-jqgrid-colmodel par exemple la discussion sur l'obtention de colmodel . Vous pouvez donc utiliser la construction comme jQuery ("# ​​list2") [0] .p.colmodel Pour recevoir un colmodel ou jQuery ("# ​​list2") [ 0] .p.colnames Pour recevoir Colnames . Les deux propriétés sont des matrices afin que vous puissiez utiliser jQuery ("# ​​liste2") [0] .p.colmodel.length pour obtenir un certain nombre de colonnes. N'oubliez pas que si vous utilisez rownombers: true alors colmodel a une colonne RM supplémentaire sur la première place (index 0).


Enfin, cela l'a fait - échappant à l'IDS ... Merci beaucoup pour votre aide :) LoadCommete: fonction (XHR) {Var Mids = jQuery ("# ​​list2"). GetDataids (); pour (var i = 0; i


Je devrais corriger mon un peu de la meilleure façon de trouver le nombre de colonnes. jQuery ("# ​​list2"). JQGRID ('GETGRIDPARAM', 'COLMODEL') est un moyen documenté pour recevoir colmodel tableau. Donc, si vous souhaitez obtenir le nombre de colonnes viables que vous pouvez effectuer suivant: var cm = jQuery ("# ​​list2"). JQgrid ('GetGriDparam', 'Colmodel'); longueur var = cm.length, colonne = 0; pour (var i = 0; i . La valeur Columncount est le nombre de colonnes visibles de la liste de jqgrid #. La colonne "rn" (a indice 0) n'existe que si Rownumbers: true .


Merci, mais en fait, je n'en ai plus besoin que je puisse modifier la ligne entière maintenant et que je n'ai pas besoin de boucler sur chaque cellule - mais c'est bon à savoir quand même :)


Je ne veux pas voir les lignes de la JQgrid qui est affichée à la frontière alors comment puis-je faire ça?


@BHAVIKAMBANI: En général, c'est une nouvelle question. Il vaut mieux pour les autres utilisateurs si vous posez la question non dans les commentaires, car ces réponses ne seront pas trouvées lors de la recherche. À votre problème: Vous pouvez utiliser transparent couleur pour la bordure. Par exemple .ui-jQgrid tr.ui-rang-ltr TD {frontière-droite-couleur: transparent;} supprime les bordures verticales entre les cellules. De la même manière, .ui-jQgrid tr.ui-rang-ltr td {frontière-bottom-couleur: transparent;} supprimera les bordures entre les rangées. Une autre réponse montre comment éliminer les bordures dans les en-têtes de colonne.



13
votes

Pour quiconque cherche une vraie réponse à ce sujet ..

Ceci fonctionne! P>

.StyleCss{ background-color:red !important; }


3 commentaires

D'accord. Cela a parfaitement fonctionné. Si vous avez besoin de la définir sur la classe CSS JQuery UI correcte, c'est le cas: $ (this) .jqgrid ('SetRowData', Rowid, False, 'UI-State-Error');


J'ai fini par mettre une logique similaire à la grilleComplet, mais le concept a fonctionné très bien.


Votre solution semble être la plus pratique, mais comment puis-je définir en ligne CSS?



4
votes

J'ai essayé des solutions ci-dessus, mais je pense que l'une est la bonne: xxx

si la classe CSS est entre les apostrophes, il est écrasé par l'original (vous pouvez voir qui utilise facilement Firebug): xxx

correct avec {couleur: "rouge"}: xxx

selon la documentation de SETROWDATA:

Si le paramètre CSSProp est une chaîne, nous utilisons AddClass pour ajouter des cours à la ligne. Si le paramètre est l'objet, nous utilisons CSS pour ajouter des propriétés CSS .


0 commentaires

5
votes

J'essayais une solution pendant une longue période et enfin de tous les exemples et suggestions combinez quelque chose qui a travaillé pour moi. Bien sûr, vous devez définir des styles CSS personnalisés pour que cela fonctionne. J'espère que cela aide, bien qu'il puisse produire une question de vitesse potentielle.

... xxx

...


0 commentaires

1
votes
 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}
Very Simple and works

0 commentaires

0
votes

supposé une autre valeur de cellule est Y / N.

ci-dessous le code passe dans loadComplet Event P>

 var rowIDs = jQuery("#GRID").getDataIDs();   //Get all grid row IDs 
 for (var i = 0; i < rowIDs.length; i++) {     //enumerate rows in the grid
     var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]);   
     //If condition is met (update condition as req)
     if (rowData["COLNAME_CHECKED"] == "N") {          

         //set cell color if other cell value is matching condition
         $("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' });
         //for row color, update style. The code is given above by **Ricardo Vieira**
     }
 }


5 commentaires

Pouvez-vous décrire votre code? Pourquoi cela aide-t-il l'OP?


@ user3755692: Commentaires déjà ajoutés. Je ne sais pas ce qui ne vous est pas clair. Ce code Colors cellules / lignes à temps de charge pour toutes les lignes une fois la grille créée. Si vous connaissez déjà ce code, cela peut être utile pour les autres. Si vous pensez que c'est inutile, supprimez-le.


Il est toujours préférable de décrire votre code aussi bon que possible. Je ne pense pas que toute réponse qui réponde à la question est inutile, mais il y a toujours des réponses plus utiles que d'autres - et vous décidez quelle réponse est utile en la perfectionnant


Oui, vous avez raison, une explication détaillée est toujours meilleure. Parfois, sa petite subjective aussi. J'espère mieux le code mis à jour maintenant. BTW, comment votre nom d'utilisateur a-t-il été modifié vers MSRD07 de user3755692?


Oui, votre version de mise à jour est meilleure. Vous pouvez modifier votre nom d'utilisateur en allant à votre profil, cliquez sur «Modifier», puis modifiez votre nom d'affichage.



0
votes

Peut-être qu'il est trop tard pour cette réponse, mais vous pouvez utiliser Rowattr fort> pour changer la couleur de la ligne comme SO:

rowattr : function(rd) {
            if(Difference_In_Days>=0&&rd.active==true){
                return {"class" : "online"};
            }else if(rd.active==false){
                return {"class" : "notActive"};
            }
            
        }


0 commentaires