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

2019年8月4日 222次阅读

我试图确定固定宽度的
HTML表格单元格中最宽的内容.目前我正在使用外部分级器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(标题宽度,数据宽度),同时保持固定的标题/寻呼机位置).

谢谢！

最佳答案 重写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);

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

作为旁注,如果由于用户交互而应用此自动调整大小,我建议在表可用于分析之后立即执行调整大小计算/过程,而不是等待用户启动调整.

点赞