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选项,它将调整每个列的大小以适应,但如果您的宽度不够宽,它将尝试根据您的最小和最大宽度值进行拟合,因此您可能需要添加a minWidth和a 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?>});

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