45

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

4

7 回答 7

22

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

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

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

于 2012-01-17T22:30:59.460 回答
5

OP 正在寻找要增长的列以匹配其内容。grid.autosizeColumns()生长细胞以适应父容器，这不是一回事。

我已经添加了这个功能，它就像你想象的那样手动。您遍历显示的单元格并测量每个单元格，保存最宽的单元格并使用该宽度来设置列的宽度。SlickGrid 使您可以很好地访问视口中的单元格，因此效果很好。

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

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

于 2014-03-06T17:18:02.693 回答
4

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

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

于 2015-04-28T13:22:24.263 回答
3

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

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
于 2015-04-23T22:51:35.627 回答
1

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

grid.autosizeColumns();
于 2011-11-07T14:22:07.600 回答
0

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

  • 添加$container.ready(resizeAllColumns);到初始化函数。

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

于 2015-11-10T11:18:24.193 回答
-1

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

于 2013-06-08T00:55:09.117 回答