如何在 Slickgrids 中自动换行标题列答案

【问题标题】：How to word wrap the header column in Slickgrids如何在 Slickgrids 中自动换行标题列
【发布时间】：2012-04-11 23:45:25
【问题描述】：

我最近开始使用 slickgrids。所以得到了很多很多的质疑。如何在 slickgrids 中自动换行列标题

【问题讨论】：

标签： css slickgrid

【解决方案1】：

我通过编辑 2 个 css 标签解决了这个问题：

在slick-default-theme.css:

.slick-header-columns {
    white-space: pre !important;
    height: 45px;
}

这里的height 可根据您的需要进行调整。这很好显示 3 行。

在slick.grid.css 中，将以下标签上的height 设置更改为100%：

.slick-header-column.ui-state-default {
    ...
    height: 100%;
    ...
}

希望这会有所帮助！

【讨论】：

奇怪...放置 .slick-header-columns 时它对我不起作用；相反，我将 white-space 属性添加到 .slick-header-column.ui-state-default 中，它起作用了。

【解决方案2】：

fwiw，slick grid 的作者在这里回答了这个问题： https://github.com/mleibman/SlickGrid/issues/61

【讨论】：

【解决方案3】：

我创建了一个自定义 css 类来启用/禁用该功能：

.slickgrid-word-wrap .slick-cell {
    white-space: normal;
    overflow: auto;
}

然后在我的div 容器上：

<div id="my-grid"
     class="slickgrid-word-wrap"></div>

您仍然可以像这样在 SlickGrid 配置中设置行高：

var options = {
            editable: false,
            enableCellNavigation: false,
            autoExpandColumns: false,
            forceFitColumns: false,
            showFooterRow: false,
            explicitInitialization: true,
            multiColumnSort: false,
            rowHeight: 50 // <--- here
        };

【讨论】：