jqGrid zèbre / lignes alt fond ne fonctionne pas en raison de l'interface utilisateur classe Theme

Question

Nous ne pouvons pas obtenir zébrures au travail dans jqGrid.

Nous utilisons altclass et Altrows - question est il semble que la classe ui-widget-content de l'interface utilisateur JQuery a une réglage background qui est prépondérant réglage de background de notre altclass. Toutes les idées?

---

Mise à jour : Les deux réponses ci-dessous fonctionnent. Oleg est la plus propre de la solution de loin.

Pour la solution de Oleg au travail, votre classe Altrows doit être défini après y compris la classe CSS JQuery UI à la fois comme des lignes alt JQuery UI et la classe personnalisée définir la propriété d'arrière-plan et le wins dernière classe définie .

Answer 1

jqGrid utilisation classe jQuery UI « secondaire ui priorité » comme la valeur par défaut du paramètre altclass. La classe sont décrits dans la documentation jQuery UI comme

  

classe à appliquer à une priorité-2   bouton dans des situations où le bouton   hiérarchie est nécessaire. applique normale   texte de poids et une légère transparence   élément.

Il est la cause pas exactement la description de l'zébrures, mais il n'y a pas tant de classes standard qui peuvent être utilisés. Malheureusement, même les lignes ayant des regards « ui priorité secondaire » pas si différent de lignes impaires dans la plupart des thèmes. Donc, pour améliorer la visibilité d'une doivent définir la altclass de classe manuellement.

L'une des façons les plus indigènes de faire même des lignes vues différentes que les lignes impaires est l'utilisation de différentes couleurs d'arrière-plan. Le problème est que la classe ui-widget-content utiliser une image d'arrière-plan défini avec le style background CSS, de sorte que le paramètre le plus natif de background-color ne fonctionnera pas. Pour résoudre le problème-on faire une des choses 1) supprimer la classe ui-widget-content 2) l'utilisation background de style CSS au lieu de background-color 2) l'utilisation background-image:none avec le style background-color. La façon la plus simple de le faire est de définir votre AltRowClass personnalisé comme

.myAltRowClass { background: #DDDDDC; }

ou

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

et puis utiliser des paramètres de altRows:true et altclass:'myAltRowClass' de jqGrid.

Une autre façon est de faire la même chose sans Paramètres de altRows et altclass:

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

Dans le cas, vous présente quelques petits inconvénients en vol stationnaire ou en sélectionnant les lignes paires. Le code suivant fonctionne mieux, mais faire la même chose que altRows:true et altclass:'myAltRowClass' faire:

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

De la cause la couleur de fond et d'autres attributs de styles CSS que vous pouvez définir pour les lignes paires sont dépendent du thème que vous utilisez, donc si vous prévoyez d'utiliser ThemeRoller vous devrez choisir altclass pour chaque thème, que vous permettent de choisir.

MISE À JOUR : Juste vu que j'ai oublié d'inclure le lien vers le fichier de démonstration qui démontrent ce que je l'ai écrit en direct. La démo est .

Answer 2

Par Oleg .. dans LoadComplete:

$.each(grid.getDataIDs(),
    function(index, key){
        if(index % 2 !== 0) {
            var t = $("#" + key, grid);
            t.removeClass('ui-widget-content');
        }
    }
);

Et puis dans la définition de la grille:

altRows:true,
altclass:'myAltRowClass',

`myAltRowClass':

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD;  }

Answer 3

voici ma solution:

altRows     : true,
altclass    : 'oddRow',

gridComplete: function() {
    $(".jqgrow:odd").hover(
        function() { $(this).removeClass("oddRow");}, 
        function(event) { $(this).addClass("oddRow");}
    );
}, 

il a travaillé pour moi et peut être utilisé avec un thème ui.

Answer 4

J'ajouté le CSS suivant dans un fichier supplémentaire au style de la ligne alternative et vol stationnaire de la ligne sans utiliser Javascript supplémentaire:

table.ui-jqgrid-btable tr:nth-child(odd) td{
    background-color: #E7F0FD;
}
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97);
}