推荐使用SlickGrid的方法是什么？ [英] What is the recommended approach to style a SlickGrid?

问题描述

我刚刚开始使用SlickGrid和它的质量感到惊讶。然而，当涉及到造型，我没有找到任何文档或例子建议整体造型方法。有选项和API分散在各个地方，但是很难从中提取一个策略。此外，网格利用jQuery UI主题。不幸的是，这些干扰了我想实现的目标。我们选择了jQuery UI仅用于日历小部件以及ui-darkness主题。

I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.

这是一个jsFiddle显示我想要实现的外观：

Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.

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

编辑：我也创建了一个jsFiddle启动SlickGrid实现： http://jsfiddle.net/nareshbhatia/vJshY/ 。

I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!

推荐答案

在你的第二个/最后一个jsFiddle中，你可以修改CSS具有此代码

Within your second/last jsFiddle you can modify the CSS to have this code

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

这篇关于推荐使用SlickGrid的方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！