jqGrid la Coloration de la totalité d'une ligne dans la Grille basée sur une des cellules de la valeur

Je sais que ça a été demandé avant, mais je ne peux pas le faire fonctionner, et je suis à court de choses à essayer.

Je veux coloriser une ligne dans une Grille, si sa valeur n'est pas 1 - je utiliser une mise en forme personnalisée pour cela. Le formateur lui-même fonctionne, ce n'est pas le problème.

J'ai essayé plusieurs façons que j'ai trouvé jusqu'à présent sur le web - ajout d'une classe, directement à l'ajout de code CSS, en utilisant setRowData, à l'aide de setCell....

Voici mes exemples - n'a pas fonctionné pour moi (Linux, ff363) - un pointeur serait grandement apprécié.

27.05.2010_00:00:00-27.05.2010_00:00:00 mon id de ligne

<style>
.state_inactive {
            background-color: red !important;
        }
.state_active {
    background-color: green !important;
}
</style>

function format_state (cellvalue, options, rowObject)
{
    var elem='#'+options.gid;
    if (cellvalue != 1) {

        jQuery('#list2').setRowData(options.rowID,'',
                                    {'background-color':'#FF6F6F'});

        jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
                                    '',{'background-color':'#FF6F6F'});

        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
                                 {'background-color':'#FF6F6F'},'');
        }
    } else {
        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
        }
    }
    <!-- dont modify, we simply added the class above-->
    return cellvalue;
}

OriginalL'auteur Thomas | 2010-05-28

jqgrid

13

Il me semble que votre problème principal est que vous n'êtes pas la fixation d'un 'background-color' style. Vous devez supprimer 'ui-widget-content" class à partir de la ligne (de <tr> élément)
```
jQuery("#"+ options.rowId,jQuery('#list2')).removeClass('ui-widget-content');
```
avant d'ajouter la classe state_activ ou state_inactive, parce que jQuery UI de la classe ui-widget-content " est de définir .ui-widget-content comme
```
{
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}
```
et seulement avec réglage de CSS 'background-color' votre pas vraiment changer la couleur d'arrière-plan. Donc, essayez d'utiliser quelque chose comme
```
var trElement = jQuery("#"+ options.rowId,jQuery('#list2'));
trElement.removeClass('ui-widget-content');
trElement.addClass('state_active');
```
Semble logique, mais malheureusement il ne marche pas - l'ui-widget-content de classe n'est pas supprimé. Je l'ai mis dans le module de formatage d'appel et dans un gridComplete fonction - rien 🙁
Dans loadComplete lignes sont remplies et dans la gridComplete pas. Chez moi cela fonctionne à l'intérieur de loadComplete. Je vous recommande de toujours utiliser gridview: true wnd pas le temps d'utiliser afterInsertRow événement, qui a rupture rapide le comportement de l'exécution de gridview: true paramètre. Vous pouvez appeler jQuery('#list2').getDataIDs(); l'intérieur ou à l' loadComplete, test de la valeur de la cellule avec getCell() et puis les retirer et ajouter la classe.
Il ne marche pas encore 🙁 Aparantly son b/c le sélecteur jquery peux pas trouver l'id de ligne - l'objet est null, bien que l'id est id ... =25.05.2010_00:00:00-26.05.2010_00:00:00 <tbody><tr id="25.05.2010_00:00:00-26.05.2010_00:00:00" role="row" class="ui-widget-content jqgrow ui-ligne-ltr"><td ...</tr> alertes de var l2=jQuery('#liste 2'); alert ("id="+ cl +" "+l2.html()); var trElement = jQuery('"#'+cl+'"',jQuery('#liste 2')); trElement.removeClass('ui-widget-content'); trElement.addClass('state_active'); trElement est null .html()...
Il peut être que vous avez un tel problème en raison de symboles spéciaux à l'intérieur de id. Vous utilisez ':', '-' et '.'. jqGrid eu des problèmes avec certains symboles à l'intérieur de id. Pour vérifier cela, essayez d'utiliser plus facilement la forme de l'ids. De plus, certains personnages ont un espace de sens pour jQuery. De sorte que le des constructions comme les jQuery("#"+ options.rowId) peut être mal interpréter par jQuery. Si tous va être un travail avec la simple id, vous pouvez mettre en œuvre une certaine forme de codage/décodage des valeurs d'id.
En général, il est de nouveau question. C'est mieux pour les autres utilisateurs si vous vous posez la question n'est pas dans les commentaires parce que ces réponses seront pas trouvé pendant la recherche. Pour votre problème: Vous pouvez utiliser transparent couleur pour la bordure. Par exemple .ui-jqgrid tr.ui-row-ltr td {border-right-color: transparent;} supprime les bordures verticales entre les cellules. De la même manière .ui-jqgrid tr.ui-row-ltr td {border-bottom-color: transparent;} va supprimer les frontières entre les lignes. une Autre réponse explique comment supprimer les frontières dans les en-têtes de colonne.

OriginalL'auteur Oleg
12

pour tous ceux qui recherchent une véritable réponse à ce sujet..

cela fonctionne !
```
afterInsertRow : function(rowid, rowdata)
{
    if (rowdata.colmodelnamefield == "something")
    {
        $(this).jqGrid('setRowData', rowid, false, 'StyleCss');
    }

}
```
Dans un autre fichier de la feuille de style CSS personnalisé
```
.StyleCss{ background-color:red !important; }
```
n'oubliez pas les !important remplace le thème de l'interface utilisateur rouleau

d'accord. Cela a fonctionné parfaitement. Si vous avez besoin de le mettre à la bonne jquery ui classe css c'est: $(this).jqGrid('setRowData', rowid, false, 'ui-state-erreur');
Il fonctionne pour moi aussi, mais seulement si gridview n'est pas le vrai
J'ai fini par mettre la même logique pour gridComplete, mais le concept a très bien fonctionné.
Ta solution me semble être le plus pratique, mais comment puis-je mettre inline CSS?

OriginalL'auteur Sk.

J'ai essayé la solution pendant une longue période, et enfin de tous les exemples et suggestions de combiner un truc qui a fonctionné pour moi. Bien sûr, vous devez définir des styles css pour que cela fonctionne. Espérons que cela aide, même si elle pourrait produire un potentiel problème de vitesse.

...

loadComplete: function() {

      var rowIDs = jQuery("#grid").getDataIDs(); 
      for (var i=0;i<rowIDs.length;i=i+1){ 
        rowData=jQuery("#grid").getRowData(rowIDs[i]);
        var trElement = jQuery("#"+ rowIDs[i],jQuery('#grid'));
        if (rowData.statusID > 5) { 
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorRED');
        }else{ 
          if (rowData.statusID == 1){
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorGREEN');
          }
        }
      }
  },

...

OriginalL'auteur marbo

4

J'ai essayé les solutions ci-dessus, mais je pense que l'on est la bonne:
```
afterInsertRow : function(rowid, rowdata)
{
    if (parseFloat(rowdata.amount) > 500)
    {
        $(this).jqGrid('setRowData', rowid, false, {color:'red'});
    }
}
```
Si la classe css est entre apostrophes, il est remplacé par celui d'origine (vous pouvez le voir facilement à l'aide de firebug):
```
<tr class="ui-widget-content jqgrow ui-row-ltr RedStyle" ...>  
```
correct avec {color:'red'}:
```
<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>
```
Selon la documentation de setRowData:

Si le cssprop paramètre est une chaîne que nous utilisons addClass à ajouter des classes à la ligne. Si le paramètre est un objet que nous utilisons css pour ajouter des propriétés css.

OriginalL'auteur christof
1

Je suggère que vous essayez someing comme ça.
Ce sera effectivement vous donner accès à l'ensemble de la ligne.
```
afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'red'});   
        }   
     } 
```
Eh bien, ce au moins fonctionne 🙂 je vais essayer d'utiliser setRowData au lieu de setCell, j'espère que c'est moins cher à partir d'une exécution de point de vue - ce prendre assez longtemps sur ma vm de test...

OriginalL'auteur David

 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}

Très Simple et fonctionne

OriginalL'auteur Ricardo Vieira

0

Assumés autres valeur de la cellule est Y/N.

code ci-dessous va dans loadComplete événement
```
 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**
     }
 }
```
Pouvez-vous décrire votre code? Pourquoi est-il permet à l'OP?
Déjà ajouté des commentaires. ne sais pas ce qui n'est pas clair pour vous. Ce code de couleurs cellules/lignes au moment du chargement pour toutes les lignes une fois que la grille de création. Si vous savez déjà ce code, il peut être utile à d'autres. Si vous pensez que c'est inutile de le supprimer.
Il est toujours préférable de décrire votre code aussi bon que vous le pouvez. Je ne pense pas que toute réponse qui répond à la question est inutile, mais il y a toujours quelques réponses plus utiles que d'autres - et vous décidez que la réponse est utile par upvoting il
oui, u est bonne, explication détaillée est toujours la meilleure. Parfois, son peu trop subjective. espérons que la mise à jour du code mieux maintenant. BTW, comment votre nom d'utilisateur changé à msrd07 de user3755692?
oui, les mises à jour de votre version est mieux. Vous pouvez changer votre nom d'utilisateur en accédant à votre profil, cliquez sur "modifier" et ensuite modifier votre nom d'affichage

OriginalL'auteur user3990701

Vous devez vous connecter pour publier un commentaire.