如何自动调整 SlickGrid 中的列大小？

Question

我希望 slickgrid 根据最宽的内容或标题文本自动调整列的大小 - 以较宽者为准。简单来说，我希望它在调整列大小时模拟常规 HTML 表格的默认行为。我怎样才能在 slickgrid 中做到这一点？

Answer 1

在构造选项时，您可以使用 forceFitColumns: true

var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

这将使列填充网格 div 的整个宽度。

Answer 2

OP 正在寻找能够增长的专栏以与其内容相匹配。 grid.autosizeColumns() 增大单元格以适合父容器，这不是一回事。

我添加了此功能，并且它与您想象的一样手动。您循环显示的单元格并测量每个单元格，保存最宽的单元格并使用该宽度来设置列的宽度。 SlickGrid 使您可以轻松访问视口中的单元格，因此效果很好。

测量算法是您的重大决定。您可以将内容放在屏幕之外并进行测量，正如 @jay 建议的那样。这是可行的，但它是最慢的方法，因为插入时需要重新绘制，删除时也需要重新绘制。可能有一些方法可以优化。我采用的解决方案是测量字母表中每个字母以及我们遇到的其他印刷字符的宽度，并将它们相加以生成宽度。是的，这听起来很荒谬。它有很多限制：字体大小必须相同、不支持图像、不能有任何换行符等等。如果您能忍受这些限制，您可以在 <5ms 内计算出巨大网格视口的大小，因为字符宽度仅测量一次。

获取列的大小后，使用grid.setColumns()将它们分配给您的列。

Answer 3

Slickgrid不支持根据数据自动调整列大小。您需要编写插件或fork slickgrid核心来修改。

这是我创建的插件来处理 slickgrid 自动大小的链接
https://github.com/naresh-n/slickgrid-column-data-autosize

Answer 4

我在绘制网格后添加了它，并且效果很好。

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})

Answer 5

您应该能够调用网格对象的 autosizeColumns() 方法。

grid.autosizeColumns();

Answer 6

对 Naresh 的 https://github.com/naresh-n/slickgrid 进行简单调整-column-data-autosize，在 init 函数上：

• 将 $container.ready(resizeAllColumns); 添加到 init 函数中。

这确保了列在初始加载时自动调整大小

Answer 7

将文本插入屏幕外元素并检索元素的宽度。这就是 excanvas 测量文本的方法。使用它来设置列的宽度，因为它需要像素值。