Как создать виртуальную таблицу путем повторного использования фиксированного количества строк с поддержкой колесика мыши и полосы прокрутки? - PullRequest
Новая
       26

Как создать виртуальную таблицу путем повторного использования фиксированного количества строк с поддержкой колесика мыши и полосы прокрутки?

0 голосов
/ 11 февраля 2020

У меня большой размер данных для отображения в виде таблицы на моей странице, и отображение таблицы со всеми данными слишком тяжелое. Поэтому я хочу показать его как виртуальную таблицу, которая отображает ячейки только при необходимости.

Я знаю, что есть способ исправить заголовок и прокрутить тело, но таким образом ширина заголовка должна быть фиксированной, в то время как я хочу, чтобы ширина могла автоматически изменяться в соответствии с данными.

Поэтому я решил использовать фиксированное количество строк для решения этой проблемы.

Я работаю это , что работает для колесика мыши, но мне также нужна полоса прокрутки, чтобы пользователи без колесика мыши могли также прокручивать ее. 

function updateTable(event) {
  var topIdTd = document.getElementById('data-0-id');
  var topId = parseInt(topIdTd.innerHTML);
  topId += event.deltaY;
  for (var i = 0; i < 4; i++) {
    document.getElementById('data-' + i + '-id').innerHTML = topId + i;
    document.getElementById('data-' + i + '-value').innerHTML = 'looooooooooooooooooooong-value-' + topId + i;
  }
  return false;
}
var tbody = document.getElementById('table-body');
tbody.onwheel = updateTable;
table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid gray;
}

th {
  background-color: #eef;
}
<table>
  <thead>
    <tr>
      <th>
        ID
      </th>
      <th>
        Value
      </th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td id="data-0-id">
        0
      </td>
      <td id="data-0-value">
        looooooooooooooooooooong-value-0
      </td>
    </tr>
    <tr>
      <td id="data-1-id">
        1
      </td>
      <td id="data-1-value">
        looooooooooooooooooooong-value-1
      </td>
    </tr>
    <tr>
      <td id="data-2-id">
        2
      </td>
      <td id="data-2-value">
        looooooooooooooooooooong-value-2
      </td>
    </tr>
    <tr>
      <td id="data-3-id">
        3
      </td>
      <td id="data-3-value">
        looooooooooooooooooooong-value-3
      </td>
    </tr>
  </tbody>
</table>

Как создать полосу прокрутки на элементе без прокрутки?

Или есть ли лучшие решения этой проблемы?

...