我想在html(> 10k列和最多200-300行)中显示大量列以显示计划。
内容将是一些可移动的块,其中包含一些文本和背景颜色。
是否可以使用table / tr / td显示如此大量的列?是否可以使用table / tr / td显示最大列数或行数?
或者你会用帆布吗?还有其他建议来解决这个问题吗 什么是最好的方式(滚动时表现出色,...)来显示如此大的表格?
答案 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>