如何自动化SlickGrid中的列？

我希望slickgrid根据最宽的内容或标题文本自动调整列 – 无论哪个更宽。 简单来说，我希望它能够模拟常规HTML表格在列大小调整时的默认行为。 我怎样才能在slickgrid呢？

构build选项时，可以使用forceFitColumns: true 

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

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

OP正在寻找增长的列来匹配他们的内容。 grid.autosizeColumns()生长的单元格，以适应父容器，这是不一样的事情。

我已经添加了这个function，而且大概和你想象的一样。 您循环显示的单元格并测量每个单元格，保存最宽的单元格并使用该宽度来设置列的宽度。 SlickGrid使您可以很好地访问视口中的单元格，所以很好地工作。

测量algorithm是您的重大决定。 你可以把这些内容放在屏幕上，并按照@jay的build议进行衡量。 这是有效的，但它是最慢的方法，因为它需要重新插入，并在删除时重新绘制。 有可能有方法来优化。 我所用的解决scheme是测量字母表中每个字母的宽度，以及我们遇到的其他印刷字符的宽度，并将它们相加以产生宽度。 是的，这听起来很荒唐。 它有许多限制：字体大小必须相同，不支持图像，不能有任何线条返回等等。 如果你可以忍受约束，你可以在<5ms计算一个巨大的网格视口的大小，因为字符宽度只能被测量一次。

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

我在网格绘制之后添加了这个，它工作正常。 

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

Slickgrid将不支持基于数据的列自动大小。您需要编写一个插件或fork slickgrid核心进行修改。

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

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

 grid.autosizeColumns();

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

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

这确保了列在初始加载时自动resize

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

Interesting Posts