在html中显示大量列的最佳方法

时间:2017-07-28 18:39:30

标签: html html-table html5-canvas

我想在html(> 10k列和最多200-300行)中显示大量列以显示计划。

内容将是一些可移动的块,其中包含一些文本和背景颜色。

是否可以使用table / tr / td显示如此大量的列?是否可以使用table / tr / td显示最大列数或行数?

或者你会用帆布吗?还有其他建议来解决这个问题吗 什么是最好的方式(滚动时表现出色,...)来显示如此大的表格?

1 个答案:

答案 0 :(得分:2)

有了这么多列和行(代表大约至少3,000,000个条目),您可能会避免不惜一切代价填充DOM,因为任何更改都会触发回流,在这种情况下需要花费大量时间。上面的数字也适用于条目,如果每个条目需要100个字节来表示您已经达到了大约280 MB,浏览器必须管理它。

通常你会缓冲绘图,所以只能在屏幕上绘制/显示可见部分。这意味着您必须为此实现自定义管理器。无论是绘制画布还是使用DOM元素,都将取决于你。

这么多专栏的挑战是获得一个足够详细的滚动条来表示单个列,它可能不会(除了滚动条上的箭头按钮),或者你需要一个很宽的列要渲染的屏幕区域。

除此之外,您还必须考虑通过仅将一大块数据加载到缓冲区来缓冲数据本身。缓冲区需要多大取决于许多因素,包括连接速度,服务器,位置,数据类型,浏览器,范围等。我不建议将此数量加载到内存中,因为它会严重影响客户端系统的资源。 / p>

下面给出的示例只是渲染原理(缓冲)的粗略实现,以显示我的意思(在“完整页面”中运行它以访问用于演示的滚动条):

var ctx = c.getContext("2d"),
    rowWidth = 70,                           // max width of each column
    count = Math.ceil(c.width / rowWidth),   // number of rows that fit
    entries = 10000,                         // demo
    rows = 19,
    columns = [];

// Create some dummy columns and row (10,000 x 19)
for(var x = 0; x < entries; x++) {
  var row = [];
  for(var y = 0; y < rows; y++) row.push(Math.round(Math.random() * 10000));
  columns.push(row);
}

// calc scroller size in pixels
document.querySelector("dummy").style.width = (entries * rowWidth) + "px";

// handle updates
document.getElementById("scroll").onscroll = function() {render(+this.scrollLeft)};

// Render rows based on scroller position (rough calcs just for demo)
function render(scrollX) {
  var first = Math.floor(scrollX / rowWidth);  // first row to display
  ctx.clearRect(0,0,c.width,c.height);
  
  // render based on scroller offset and how many rows fit into canvas
  for(var x = first, offset = 0; x < first + count; x++, offset += rowWidth) {
    if (columns[x]) {
      ctx.fillText("Header " + x, offset, 15);
      for(var y = 0; y < rows; y++) ctx.fillText(columns[x][y], offset, y * 20 + 35);
    }
  }
}
render(0);  // initial render
#c {background:#ddd}
#scroll {
  max-width:700px;
  overflow-x:scroll;
  height:16px;
  }
dummy {display:inline-block}
<div>
  <canvas id=c width=700 height=400></canvas>
  <div id=scroll><dummy></dummy></div>
</div>