2013-06-23 10 views
7

Sto appena iniziando a utilizzare SlickGrid e stupito dalla sua qualità. Tuttavia, per quanto riguarda lo stile, non ho trovato documenti o esempi che raccomandassero un approccio stilistico generale. Ci sono opzioni e API sparse in vari luoghi, ma è molto difficile estrarre una strategia da quelle. Anche la griglia sfrutta i temi dell'interfaccia utente jQuery. Sfortunatamente quelli stanno interferendo con quello che sto cercando di ottenere. Abbiamo raccolto l'interfaccia utente di jQuery solo per il widget del calendario insieme al tema dell'oscurità. Questo tema funziona perfettamente per il widget del calendario, ma la griglia deve sovrascrivere ogni aspetto di esso.Qual è l'approccio consigliato per lo stile di SlickGrid?

Ecco un jsFiddle che mostra l'aspetto che sto cercando di raggiungere: http://jsfiddle.net/nareshbhatia/3q6RD/. Solo per illustrazione, utilizza una normale tabella HTML. Tuttavia mi piacerebbe ottenere lo stesso identico stile usando SlickGrid. Il CSS in questo jsFiddle è essenzialmente il requisito che ho dal mio visual designer, ad es.

#positions-table th { 
    background-color: #505050; 
    color: #eeeeee; 
    text-shadow: none; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px; 
} 

Edit: Ho anche creato un jsFiddle con un'implementazione di avviamento SlickGrid: http://jsfiddle.net/nareshbhatia/vJshY/. Come puoi vedere, il tema delle ui-oscurità ha completamente preso il sopravvento!

risposta

5

All'interno della vostra seconda/ultima jsFiddle è possibile modificare il CSS per avere questo codice

.slick-header-column.ui-state-default { 
    background:none ; 
    background-color: #505050 ; 
    color: #eeeeee; 
    border: none; 
    padding: 0; 
    text-shadow: none; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px;  
} 

.slick-row.ui-widget-content, .slick-cell { 
    background: none; 
    background-color: #eeeeee; 
    color: #666666; 
    border: none; 
    border-bottom: solid 1px #ffffff; 
    font-size: 14px; 
    height: 60px; 
    line-height: 60px; 
    padding: 0 5px; 
} 
+0

Grazie @ghiscoding. Funziona molto bene. Sarebbe bello includere questo o un esempio simile nei documenti. Su problema però. Quando includo questi stili nel mio vero progetto, la classe .slick-row viene sovrascritta circa 60 volte con una dichiarazione dinamica come questa: .slickgrid_357698 .slick-row {height: 30px; }. Tieni presente che l'altezza è superata a 30 px, quindi le righe vengono schiacciate. Qualche idea sul perché questo sta accadendo? Nel tuo codice, vedo solo un override, ed è con lo stesso valore (60px), quindi non vedo alcun problema. – Naresh

+0

Ok, capito. Nel mio progetto reale avevo options.rowHeight impostato su 30px. Non appena l'ho modificato a 60 px, l'altezza è rimasta a 60 px. Ancora non capisco perché SlickGrid imposti ripetutamente .slickgrid_357698 .slick-row {height: 60px; }. – Naresh

+0

potrebbe dipendere da dove hai messo il tuo codice CSS contro il codice CSS slickgrid, voglio dire quale è stato caricato alla fine? Sto assumendo che qualunque sia l'ultimo codice da caricare avrà la precedenza ... ora puoi sempre provare a mettere "! Important" su quella linea, questo assicurerà che ci vuole tutto il tempo. altezza: 60px! importante; ' – ghiscoding