Slickgrid 列宽应根据最宽的行内容自动调整大小

Question

在 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

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

@Tim 的想法是正确的，尽管我不会说它脱离了行虚拟化的点。因为 SlickGrid 让您可以很好地访问视口grid.getViewport().top // bottom，所以您可以非常成功地仅计算视口中内容的大小。

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

Answer 2

是的，补充一下。它消除了行虚拟化的全部意义。但是，如果您的数据集很小，您可以预先计算它。这是我用来计算某些文本宽度的函数。

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

    o.remove();
  return w;
}

我所做的是计算标题的 textWidth()。 “名称”值。所以至少该列是标题文本的宽度。您无需担心虚拟化即可做到这一点。外汇...

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

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

Answer 3

您可以使用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        
    };