Question

如何在包含合并单元格的表上实现无限滚动？

我想实现包含大量待处理数据的数据透视网格。难点是只绘制标题的可见部分（+滚动缓冲区）。

可能的解决方案：

没有平滑滚动，离散地重绘所有表格标题。（我想顺畅）
实现div-table并组织在scroll事件上创建和删除项目。（无法找到包含合并单元格的动态div表的示例）
根据需要创建和删除的表序列实现表头。（删除边框，在附近的表之间共享标签）例如：

＆＃13;

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");
    }
});

＆＃13;

.header-wrapper {
    overflow-x: scroll;
    width: 250px;
    height: auto;
    display: flex;
    //flex-flow: row nowrap;
}

＆＃13;

<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>

＆＃13;

注意flexbox ......

Answer 1

我假设根据你的答案，你将有1mln列表。

让这样的表连续可滚动是不现实的。从那里滚动/查找/消费信息将花费很长时间。

因此你必须有一些分页/过滤机制。随着分页你的问题不那么严重。将其拆分为可滚动页面容器中包含的部分表块。因此，您将拥有类似于gmail的消息列表的可滚动页面 - 分页但可滚动。

合并单元格的桌子上的无限滚动（定义了colspan / rowspan）

1 个答案: