如何在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

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

grid.autosizeColumns();