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选项，它会调整每个列的大小以适应，但如果您的宽度不够宽，它会尝试根据您的最小和最大宽度值进行调整，因此您可能希望添加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 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（）。 “名称”值。所以至少列是标题文本的宽度。您可以在不担心虚拟化的情况下做到这一点。 FX ...

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

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

Answer 3

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

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

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

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

3 个答案: