performance - 测量表格列中最长单元格的有效方法

Question

我正在尝试确定固定宽度的 HTML 表格单元格中最宽的内容。目前我正在使用外部sizer DIV:

 <div id="xdivSizer" style="position:absolute;display:inline;visibility:hidden">
 </div>

在这段代码中

var iColWidth = 0;

for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    oDivSizer.innerHTML = oDataTable.rows[Y].cells[0].innerHTML;
    iColWidth = Math.max(oDivSizer.offsetWidth, iColWidth)
}

它可以工作，但速度非常慢，即使表只有 100 行左右。看起来主要罪犯正在计算offsetWidth .有没有更有效的方法来实现这一目标？

我这样做是因为我需要将该表列的大小调整为最宽数据的大小。如果有其他更好的方法，那就太好了。

(更准确地说，我试图在 ASP.NET 的 Infragistics WebHierarchicalDataGrid 控件中实现“列自动调整大小”功能 - 列需要采用最宽的宽度 Max(Header Width, Data Width)，同时保持固定的页眉/分页器位置)。

谢谢!

Answer 1

重写 DIV 内容将触发大量重绘、CSS 应用程序、DOM 操作等。

尝试将列中的所有单元格放入 DIV 一次全部 , 由换行符分隔 - 或者每个都在它自己的子 DIV 中。生成的 DIV 的宽度 应该是最长的单元格。

var html = [];
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    html.push(oDataTable.rows[Y].cells[0].innerHTML);
}

oDivSizer.innerHTML = html.join("<br />");
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

另一种可能性是基于每个单元格的innerText 的简单启发式方法。

var iColWidth = 0;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var w = Math.floor(oDataTable.rows[Y].cells[0].innerText.length * 11.5);
    iColWidth = Math.max(w, iColWidth);
}

另一种可能性，如我在上一条评论中所指出的，是仅重绘消耗最大区域的列中的 TD。

var a = 0;
var n = null;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var _a = oDataTable.rows[Y].cells[0].offsetHeight * oDataTable.rows[Y].cells[0].offsetWidth;
    if (Number(_a) > a) {
      a = _a;
      n = oDataTable.rows[Y].cells[0];
    }
}
oDivSizer.innerHTML = n.innerHTML;
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

或者，更进一步，将每个单元的计算面积除以发现的 BR 数量，以解释“有意”高的单元。

var a = 0;
var n = null;
for (var Y = 0; Y < oDataTable.rows.length; Y++) {
    var _a = oDataTable.rows[Y].cells[0].offsetHeight * oDataTable.rows[Y].cells[0].offsetWidth;
    var brs = oDataTable.rows[Y].cells[0].getElementsByTagName('br');
    _a = Number(_a) / brs.length;
    if (_a > a) {
      a = _a;
      n = oDataTable.rows[Y].cells[0];
    }
}
oDivSizer.innerHTML = n.innerHTML;
var iColWidth = Math.max(oDivSizer.offsetWidth, 1);

但是，随着模糊方法的复杂性增加并且结果变得更加准确，您可以预期性能会下降。

附带说明一下，如果此自动调整大小是作为用户交互的结果应用的，我建议在表可供分析后立即执行调整大小计算/过程，而不是等待用户启动调整大小。