1

我正在翻新一个遗留的 Java webapp。我重做了一个显示数据库搜索结果的屏幕。搜索可能会产生大量结果。旧版只打印了所有内容。我通过放入一些 div 和 CSS 以便在需要时出现水平和垂直滚动条来做得更好。

这不是很好。当垂直滚动多行时，用户会看不到列标题。将列标题放在自己的 div 中并不是一个很好的解决方案，因为有足够多的列也需要水平滚动。用户会卡住垂直滚动结果然后水平滚动列名。

有人愿意推荐一个不涉及花钱或不涉及学习全新框架或系统的解决方案吗？

我不需要高功率的东西。就像我写的那样，如果列数减少 2-3，我可能不需要水平滚动，只需将标题放在它们自己的固定 div 中。

4

4 回答 4

9

我使用数据表来显示表格。是一些 jquery 将平面表转换为可排序、可搜索的漂亮表。

http://datatables.net/

于 2012-06-16T20:18:51.647 回答
1

您应该在查询中使用分页。例如，当获取第 7 页且页面大小为 10 时，只需从数据库中获取第 61 到 70 条记录。

于 2012-06-16T21:09:31.933 回答
0

为什么不每 20 行重复一次列标题，这样当标题滚动出屏幕时，您可以将它们进一步向下移动。这可以在您的服务器端脚本中完成。

于 2012-06-16T20:19:13.380 回答
0

一种简单的方法是定期重复标题。下面的代码显示了如何做到这一点，不需要库。该示例构建了一个示例大表（100 列，100 行），然后每 10 行克隆一次标题行。

const COLS = 100;
const ROWS = 100;
const HEADER_PERIOD = 10;

const table = document.querySelector("table");

// prepare header template
const header = document.createElement("tr");
header.classList.add("header");
for (let i = 0; i < COLS; i++) {
    const cell = header.insertCell();
    cell.innerText = String.fromCharCode(65 + Math.floor(Math.random() * 26));
}

// make some random rows and columns
for (let j = 0; j < ROWS; j++) {

    // repeat header row periodically so user doesn't get lost
    if (j % HEADER_PERIOD === 0) {
        table.appendChild(header.cloneNode(true));
    }

    const row = table.insertRow();
    for (let i = 0; i < COLS; i++) {
        const cell = row.insertCell();
        cell.innerText = Math.trunc(10 + Math.random() * 90).toFixed();
    }
}
body {
    font-family: monospace, sans-serif;
}
table {
    border-collapse: collapse;
}
th, td {
    padding: 2px;
    border: 1px solid;
    margin: 0;
}
.header {
    background-color: #ccc;
    text-align: center;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Large table</title>
</head>
<body>

<table>
</table>

</body>
</html>

于 2018-12-31T22:50:20.843 回答