Каков рекомендуемый подход к стилю Сликгрида?

Я только начинаю использовать SlickGrid и поражаюсь его качеству. Однако, когда дело доходит до стиля, я не нашел никаких документов или примеров, рекомендующих общий подход к стилю. Есть варианты и API, разбросанные в разных местах, но очень трудно извлечь стратегию из них. Кроме того, сетка использует темы пользовательского интерфейса jQuery. К сожалению, они мешают тому, чего я пытаюсь достичь. Мы выбрали jQuery UI только для виджета календаря вместе с ui-darkness тема. Эта тема прекрасно работает для виджета календаря, но сетка должна переопределять каждый его аспект.

Вот jsFiddle, который показывает взгляд, который я пытаюсь достичь: http://jsfiddle.net/nareshbhatia/3q6RD/. просто для иллюстрации, он использует обычную таблицу HTML. Однако я хотел бы добиться точно такого же стиля, используя SlickGrid. CSS в этом jsFiddle по сути является требованием, которое я получил от моего визуального дизайнера, например

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

Edit: я также создал jsFiddle с начальной реализацией SlickGrid: http://jsfiddle.net/nareshbhatia/vJshY/. Как вы можете видеть, тема ui-darkness полностью взяла верх!

1 7
css slickgrid

1 ответ:

В вашем втором / последнем jsFiddle вы можете изменить CSS, чтобы иметь этот код

.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;
}
5