MVC3 Formattazione della griglia Web o intestazioni delle colonne di stile

Question

Sto utilizzando la nuova WebGrid MVC3. Fin qui tutto bene, solo problemi con lo styling/formattazione delle intestazioni delle colonne. Il meglio che ho è una soluzione alternativa che applica la stessa classe css dalla prima riga del WebGrid all'intestazione della tabella.

var headerCells = $("#grid tr:eq(0) th"); 
var firstRowCells = $("#grid tr:eq(1) td"); 

$.each(firstRowCells, function (index, value) { 
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class")); 
}); 

Questo esempio manca ovviamente un controllo per assicurarsi che non vi siano righe o effettivamente l'elemento specifed id, ma si applica la classe css dalla prima fila al riga di intestazione significa che è possibile stile indipendentemente l'uno dall'altro.

td.my-column-style { width:100px } 
th.my-column-style { text-align:right;} 

C'è un modo integrato per lo stile degli elementi di intestazione della colonna (non solo utilizzando la proprietà headerStyle)?

Answer 1

No, a partire da ora non esiste un modo integrato per assegnare le celle di intestazione in modo indipendente, solo la riga di intestazione tramite la proprietà headerStyle.

Penso che il tuo workaround sia abbastanza buono.

Answer 2

So che questa è una vecchia domanda, ma può essere utile agli spettatori che si imbattono in esso. Lo pseudo-selettore cn: nth-child è tuo amico, se non vuoi affidarti a javascript per copiare le classi. E 'facile aggiungere una classe al vostro WebGrid utilizzando la proprietà TableStyle, e quindi è possibile lo stile delle singole intestazioni con il seguente pezzo di css:

.webgridclass tr th:nth-child(1){ 
    background:#ff0; 
} 

.webgridclass tr th:nth-child(2){ 
    background:#f60; 
} 

Purtroppo, questo non è supportato in IE8 e precedenti di IE, ma ha pieno supporto in tutti i browser appropriati (più recenti di FF3).

Answer 3

Possiamo farlo utilizzando il codice Javascript come di seguito.

JsFiddle Example

$("table tr th:nth-child(n)").addClass("col-md-1");