Slickgrid列宽应根据最宽的行内容自动resize

在Slickgrid中，有没有什么方法可以根据最宽的行内容自动调整列宽？

在示例示例中，我可以看到列的值为列字段的硬编码http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

var columns = [ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar}, {id: "start", name: "Start", field: "start", minWidth: 60}, {id: "finish", name: "Finish", field: "finish", minWidth: 60}, {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark} ]; 

Answer 1

是的，要添加。 它从行虚拟化的整个过程中消失了。 但是，如果您的数据集很小，您可以预先计算它。 这是我用来计算某些文本宽度的函数。

  String.prototype.textWidth = function(font) { var f = font || '12px Helvetica,​Arial,​sans-serif', o = $('
' + this + '
') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; } 

我做的是计算标题的textWidth（）。 “名称”值。 所以至少列是标题文本的宽度。 您可以在不担心虚拟化的情况下做到这一点。 FX …

 columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + }); 

或者，如果您真的希望扫描整个数据数组，则针对列/字段中的每个数据值调用该函数，然后保持最大值。 但这是非常低效的。

Answer 2

您可以使用forceFitColumns选项，该选项将调整每个列的大小以适应，但如果您的宽度不够宽，它将尝试根据您的最小和最大宽度值进行调整，因此您可能需要添加minWidth和maxWidth你有更多的控制权。

例如，列定义可能如下所示：

 {id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120} 

和这样的选项定义：

 options = { enableCellNavigation: true, enableColumnReorder: false, multiColumnSort: true, asyncEditorLoading: true, forceFitColumns: true // this one is important }; 

Answer 3

是的，可以完成适合的内容，但你必须自己做。 forceFitColumns听起来很接近，但它会增长以填充视口而不会关注单元格内容。

@Tim的想法是正确的，虽然我不会说它从行虚拟化的角度来看。 因为SlickGrid可以很方便地访问视口grid.getViewport().top // bottom您可以非常成功地计算视口中内容的大小。

我在这里描述了如何回答这个类似的问题： https ： //stackoverflow.com/a/22231459