2011-02-09 28 views
16

Io uso la seguente riga al $ (document) .ready (Come cambiare il colore della cella jqGrid?

$("#stSearchTermsGrid").setCell(2, 2, '', {color:'red'}) ; 

ma non funziona. Ho scritto in un modo sbagliato o lo ha inserito nel posto sbagliato.

So che questa domanda è stata posta più di una volta ed è così che ho ottenuto la prima riga, ma non sono ancora in grado di farlo e non so dove sia il problema.

+0

Ho aggiornato la mia risposta un po 'per utilizzare entrambi gli stili' ui-state-error ui-state-error-text 'prima di un solo' ui-state-error-text '. – Oleg

+0

Cosa succede se voglio cambiare il css per il modulo di aggiunta/modifica di jqgrid? –

risposta

45

Hai ragione, non sei il primo persona che fa la domanda Per cancellare la situazione con il colore della cella che ho fatto the demo

enter image description here

per voi che cambiano il colore del testo della cella o il colore del sell in modi diversi sfondo:

loadComplete: function() { 
    // 2 is zero-base index of the column 'name' ('Client'). Every from the options 
    // multiselect:true, rownumbers:true and subGrid:true will increase 
    // the index by 1 because the option inserts additional columns 
    $("#6 td:eq(2)", grid[0]).css({color:'red'}); 

    grid.jqGrid('setCell',"12","name","",{color:'red'}); 
    grid.jqGrid('setCell',"10",'name', '', 'my-highlight'); 
    grid.jqGrid('setCell',"8",'name', '', 'ui-state-error ui-state-error-text'); 

    grid.jqGrid('setCell',"4","name","",{'background-color':'yellow', 
             'background-image':'none'}); 
    grid.jqGrid('setCell',"3","name","",'ui-state-highlight'); 
} 

dove

<style type="text/css"> 
    .my-highlight { color: red; } 
</style> 

e "3", " 4 "," 6 "," 8 "," 10 "e" 12 "sono il rowid delle righe in cui verrà cambiato il colore della colonna corrispondente.

Tra l'altro i miei preferiti personali sono i modi in cui si utilizzano le classi 'ui-state-highlight' o 'ui-state-error ui-state-error-text' che sono la parte di jQuery UI Themes.

AGGIORNATO: Per capire la differenza di utilizzo di metodi diversi in caso di utilizzo di un altro tema jQuery UI ho aggiunto one more demo usato La Rana a tema in cui la stessa tabella di cui sopra apparire come il seguente:

enter image description here

+2

bella risposta data da te! – sanghavi7

+0

@ ankit5607san: Prego! La versione corrente di jqGrid supporta 'cellattr' (si veda [la risposta] (http://stackoverflow.com/a/7408355/315935) e [questa] (http://stackoverflow.com/a/12180842/315935)) che è più raccomandato come l'uso di 'setCell' all'interno di' loadComplete'. – Oleg

+0

@Oleg: questo è fantastico. Ma, voglio cambiare CSS per tutte le celle di una colonna di cui ho il nome e l'indice. –

Problemi correlati