1

レガシー Java Web アプリケーションをリノベーションしています。データベースの検索結果を表示する画面を作り直しました。検索により、多数の結果が生成される可能性があります。レガシーバージョンはすべてを印刷しただけです。必要に応じて水平スクロールバーと垂直スクロールバーが表示されるように、いくつかの div と CSS を配置することで、さらに改善しました。

これはそれほど素晴らしいことではありません。多くの行を垂直方向にスクロールすると、ユーザーは列ヘッダーを見失います。列ヘッダーを独自の div に配置することは、優れた解決策ではありません。水平スクロールも必要なだけの列があるためです。ユーザーは、結果を垂直方向にスクロールしてから、列名を水平方向にスクロールするとスタックしてしまいます。

お金をかけたり、まったく新しいフレームワークやシステムを学習したりする必要のないソリューションを勧めたい人はいますか?

ハイパワーなものはいらない。私が書いたように、列の数が 2 ～ 3 少ない場合は、おそらく水平スクロールは必要なく、ヘッダーを独自の固定 div に配置するだけで済みます。

4

4 に答える 4

1

クエリでページングを使用する必要があります。たとえば、ページ 7 をフェッチし、ページ サイズが 10 の場合、レコード番号 61 から 70 のみをデータベースからフェッチする必要があります。

于 2012-06-16T21:09:31.933 に答える
0

簡単な方法の 1 つは、ヘッダーを定期的に繰り返すことです。以下のコードはその方法を示しており、ライブラリは必要ありません。このサンプルは、サンプルの巨大なテーブル (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 に答える