带有合并单元格的表格无限滚动（定义的 colspan/rowspan）
Posted
技术标签:
【中文标题】带有合并单元格的表格无限滚动（定义的 colspan/rowspan）【英文标题】：Infinite scroll on table with merged cells (defined colspan/rowspan) 【发布时间】：2015-05-05 15:59:50 【问题描述】：如何在合并单元格的表格上实现无限滚动？
我想实现需要处理大量数据的透视网格。困难在于只绘制标题的可见部分（+ 滚动缓冲区）。
可能的解决方案：
没有平滑滚动，离散地重绘所有表头。 （我想要光滑）
实现 div-table 并组织在滚动事件上创建和删除项目。 （找不到包含合并单元格的动态 div 表的示例）
根据需要创建和删除的表序列实现表头。 （删除边框，在附近的表格之间共享标签） 示例：
var xHeaderWrapperEl = document.querySelector(".header-wrapper");
var xHeaderTableEl = document.querySelector(".header-table");
xHeaderWrapperEl.addEventListener("scroll", function ()
if (xHeaderWrapperEl.scrollLeft >= xHeaderTableEl.offsetWidth - xHeaderWrapperEl.offsetWidth)
console.log("scroll next page");
else if (xHeaderWrapperEl.scrollLeft <= 0)
console.log("scroll prev page");
else
console.log("scroll");
);.header-wrapper
overflow-x: scroll;
width: 250px;
height: auto;
display: flex;
//flex-flow: row nowrap;
<body>
<div class="header-wrapper">
<!-- 1st block -->
<table class="header-table" border="1">
<tr>
<td colspan="10"><div>0x1</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="8" rowspan="2"><div>1x2</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 2nd block -->
<table class="header-table" border="1">
<tr>
<td colspan="4"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><div>1x1</div></td>
<td colspan="6"><div>1x2</div></td>
</tr>
<tr>
<td colspan="6"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 3rd block -->
<table class="header-table" border="1">
<tr>
<td colspan="2"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
<td colspan="2"><div>0x3</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="2"><div>1x2</div></td>
<td colspan="2"><div>1x3</div></td>
<td colspan="2"><div>1x4</div></td>
<td colspan="2"><div>1x5</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
<td colspan="2"><div>2x2</div></td>
<td colspan="2"><div>2x3</div></td>
<td colspan="2"><div>2x4</div></td>
<td colspan="2"><div>2x5</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
</div>
</body>-
注意 flexbox...
【问题讨论】：
如果原则上您可以将表拆分成更小的表，那么方法#3 看起来会更好。滚动时...您是否需要完全无限滚动，或者您会有某种形式的滚动条？ @c-smile 是的，滚动不是无限的，但表格非常大。可能是大约几千万个细胞。 #3 的困难在于相关表的合并。 【参考方案1】：我假设根据您的回答，您将拥有 100 万列的表格。
让这样的表格连续滚动是不现实的。 从那里滚动/查找/使用信息将需要很长时间。
因此你必须有一些分页/过滤机制。 有了分页，你的问题就不那么严重了。将其拆分为包裹在可滚动页面容器中的部分表格块。因此，您将拥有类似于 gmail 消息列表的可滚动页面 - 分页但可滚动。
【讨论】：
分页更糟糕，因为主表有两个轴。在这种情况下，我需要使用左右和上下页面。也许会有所帮助：webix pivot demo。 and my comments。我正在尝试实现可滚动的第三块并在第二块上复制解决方案。谢谢。以上是关于带有合并单元格的表格无限滚动（定义的 colspan/rowspan）的主要内容，如果未能解决你的问题，请参考以下文章
带有自定义 UITextView 单元格的 TableView 将导航栏滚动到屏幕外