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

在Slickgrid中，列宽是否可以根据最宽的行内容自动调整大小？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} 
    ];

来源

2013-03-04 Anup Khandelwal

没有。你必须计算每一行中每个单元格的宽度。 – idbehold 2013-03-04 12:53:41

有一个不错的插件可以实现这个功能：https：//github.com/naresh-n/slickgrid-column-data-autosize – phyatt 2018-01-09 21:46:19

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

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

或者，如果你真的想扫描整个数据阵列呼吁反对在列/字段中的每个数据值的函数，然后保持最大。但这是非常低效的。

来源

2013-03-29 13:11:30 Tim

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

来源

2013-03-04 15:54:21 ghiscoding

其实我只是意识到，当使用'forceFitColumns：true'时，跳过最小/最大应用的值并尝试将所有内容放在首先设置的网格宽度内。虽然不是调整大小，但在我的身边，我在长列上添加了一个有趣的标题作为格式化程序。 – ghiscoding 2013-03-04 23:53:10

如果设置了minWidth和maxWidth，这对我有效。结合$（window）.resize（function（）{grid.resizeCanvas（）;}）;网格精美地调整到屏幕宽度并且尊重最小和最大列宽。 – 2013-05-17 09:56:46

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

@蒂姆的想法是正确的，尽管我不会说尽可能远离行虚拟化。由于SlickGrid可以很好地访问视口grid.getViewport().top // bottom，因此您可以非常成功地计算视口中内容的大小。

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

来源

2014-03-06 17:26:13 SimplGy

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

回答

相关问题