基于 CSS 规则的 SlickGrid 行高答案

【问题标题】：SlickGrid row height based on CSS rule基于 CSS 规则的 SlickGrid 行高
【发布时间】：2012-12-12 23:25:15
【问题描述】：

目前我正在以编程方式设置 SlickGrid 槽选项中的行高：

var options = {
    rowHeight: 30
};

有什么方法可以在不修改 slick-grid 默认实现的情况下通过 CSS 规则实现吗？

我问这个是因为我不想根据 CSS 媒体查询设置行高。

我最初的想法是以编程方式读取 CSS 属性（类似于 this）并设置 readen 值，如下所示：

var options = {
    rowHeight: readRowHeightCSSValue()
};

...但我不确定这是否是最好的主意。

【问题讨论】：

您是否尝试过覆盖 CSS 规则并查看发生了什么？
我更新了问题。 @feeela，覆盖 CSS 规则将无济于事，因为 SlickGrid 在内部需要 rowHeight 值...

标签： javascript css slickgrid

【解决方案1】：

只需根据窗口宽度设置行高即可。

rowHeight: $(window).width() < 1024 ? 30 : 15

【讨论】：

这会和 CSS 媒体查询一致吗？
除非您希望使用 DPI 来确定行高，否则它将与您的解决方案一样工作。

【解决方案2】：

我解决了我的问题，就像我最初的想法一样，所以我分享了我的解决方案。

我使用enquire.js 处理与我的样式表中相同的 CSS 媒体查询：

enquire.register("only screen and (max-width: 1024px)", {
    match : function() {
        slickGridInitialRowHeight = 15;
    }
}).fire();

enquire.register("only screen and (min-width: 1024px)", {
    match : function() {
        slickGridInitialRowHeight = 30;
    }
}).fire();

...之后，我使用slickGridInitialRowHeight 来初始化SlickGrid。

【讨论】：