为 SlickGrid 设置样式的推荐方法是什么？答案

【问题标题】：What is the recommended approach to style a SlickGrid?为 SlickGrid 设置样式的推荐方法是什么？
【发布时间】：2013-06-20 04:16:51
【问题描述】：

我刚刚开始使用 SlickGrid，并对其质量感到惊讶。但是，在样式方面，我没有找到任何推荐整体样式方法的文档或示例。选项和 API 分散在各个地方，但很难从中提取策略。网格还利用了 jQuery UI 主题。不幸的是，这些干扰了我想要实现的目标。我们只为日历小部件以及 ui-darkness 主题选择了 jQuery UI。这个主题非常适合日历小部件，但网格需要覆盖它的各个方面。

这是一个 jsFiddle，显示了我想要实现的外观：http://jsfiddle.net/nareshbhatia/3q6RD/。只是为了说明，它使用了一个常规的 HTML 表格。但是我想使用 SlickGrid 实现完全相同的样式。这个 jsFiddle 中的 CSS 本质上是我的视觉设计师的要求，例如

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

编辑：我还创建了一个带有初始 SlickGrid 实现的 jsFiddle：http://jsfiddle.net/nareshbhatia/vJshY/。可以看到，ui-darkness 主题已经完全接管了！

【问题讨论】：

标签： 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;
}

【讨论】：

感谢@ghiscoding。这工作得很好。在文档中包含这个或类似的例子会很好。虽然有问题。当我在我的真实项目中包含这些样式时， .slick-row 类被这样的动态声明覆盖了大约 60 次： .slickgrid_357698 .slick-row { height: 30px; }。请注意，高度被覆盖为 30px，因此行被压扁。知道为什么会这样吗？在您的代码中，我只看到一个覆盖，并且它具有相同的值（60px），所以我没有看到任何问题。
好的，想通了。在我的真实项目中，我将 options.rowHeight 设置为 30px。一旦我将其更改为 60 像素，高度就保持在 60 像素。还是不明白为什么 SlickGrid 反复设置 .slickgrid_357698 .slick-row { height: 60px; }.
这可能取决于您将 CSS 代码与 slickgrid CSS 代码放在哪里，我的意思是最后加载了哪一个？我假设要加载的最后一个代码将具有优先权...现在您可以随时尝试将!important 放在该行上，这将确保它一直占用它。 height: 60px !important;