Slickgrid列的宽度应根据最宽的行内容自动调整大小 [英] Slickgrid column width should automatically get resized according to widest row content

问题描述

在Slickgrid中，有什么方法可以根据最宽的行内容自动调整列宽的大小?

In Slickgrid is there any way where the column width automatically get resized according to widest row content?

在示例示例中，我可以看到为列字段

In the sample example I can see the value of column as hard coded for the column field 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}
  ];

推荐答案

是的，要添加到它.它消除了行虚拟化的整个要点.但是，如果您的数据集很小，则可以预先进行计算.这是我用来计算某些文本宽度的函数.

Yes, To add to that. It takes away from the whole point of the row virtualization. But if your data set is small you could calculate it up front. Here is a function I have used to calculate the width of some text.

 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 ...

What i did was calculate either the textWidth() of the header. "Name" value. So at least the column is the width of the header text. Which you can do without worrying about virtualization. Fx...

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

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

Or if you really want scan your entire data array calling the function against each data value in the column/field and then keep the max. But this is very inefficient.

这篇关于Slickgrid列的宽度应根据最宽的行内容自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！