4

在 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}
  ];
4

3 回答 3

7

You can use the forceFitColumns option, that will resize each columns to fit, though if your width is not wide enough it will try to fit according to your minimal and maximal values of width, so you might want to add a minWidth and a maxWidth so you have a bit more control.

For example the columns definition might look like this:

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

and the options definition like this:

options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        asyncEditorLoading: true,
        forceFitColumns: true // this one is important        
    };
于 2013-03-04T15:54:21.487 回答
6

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

 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?>});

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

于 2013-03-29T13:11:30.357 回答
0

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

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

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

于 2014-03-06T17:26:13.987 回答