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

Question

我希望SlickGrid能够根据最宽的内容或列标题文本来自动调整列宽，以模拟普通HTML表格在列大小方面的默认行为。请问如何在SlickGrid中实现这一功能？

- PJ.

---

如果您不定义宽度，设计方面可能会出现很多问题。但如果您想要，只需要调用grid.resize()即可。 - Alberto León

你是在指之前或者fork的slickgrid版本吗？因为我在mleibman的v2.0a1版本中找不到resize()函数。最接近的是resizeCanvas()，但调用该方法并不能正确地调整列的大小。 - PJ.

Answer 1

在构建你的选项时，你可以使用 forceFitColumns: true

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

这将使列填满您的网格(div)的整个宽度。

- csigrist

---

这不会自动调整列的大小，只是让它们充分利用可用空间。它们会拉伸得比需要的更宽，以容纳文本。 - Eric J.

Answer 2

OP正在寻找使列随内容增长的方法。grid.autosizeColumns()会使单元格变大以适应父容器，但这并不是相同的东西。

我添加了这个功能，它与你想象中一样手动。你需要遍历所有显示的单元格，并测量每一个，保存最宽的单元格并使用该宽度设置你的列宽。SlickGrid可以很好地访问视口中的单元格，因此工作得很好。

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

在获得列的大小后，你可以使用grid.setColumns()为你的列分配它们。

- SimplGy

---

我在slickgrid上有一个PR，可以使列宽的设置速度快得多（您仍然需要实现测量）：https://github.com/mleibman/SlickGrid/pull/897#issuecomment-36951127 - SimplGy

Answer 3

Slickgrid不支持基于数据的列自动调整大小。您需要编写插件或分叉slickgrid核心以进行修改。

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

- Naresh Nagabhushanam

---

这个做得很棒，加载时是否可以调整所有列的大小？除了双击和CTRL+Shift+A之外，还有其他方法吗？如果有很多列的话，这将是最好的选择。 - William

这很棒，但我想默认情况下自动调整列大小。有什么线索可以在Python笔记本中实现吗？ - ar-siddiqui

Answer 4

我在绘制网格之后添加了这个内容，它运作良好。

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

- Kirk Ross

Answer 5

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

grid.autosizeColumns();

- njr101

---

这不会自动调整列的大小，只是使它们占用所有可用空间。它们将比实际需要的更加宽阔，以容纳文本。 - Eric J.

Answer 6

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

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

这将确保在初始加载时自动调整列宽。

- William

Answer 7

将文本插入到离屏元素中，并检索元素的宽度。这就是 excanvas 用于测量文本的方法。使用此方法设置列的宽度，因为它期望一个像素值。

- jay