Заморозить динамические столбцы таблицы без уродливой петли и фиксированной ширины / левых значений? - PullRequest
Новая
       8

Заморозить динамические столбцы таблицы без уродливой петли и фиксированной ширины / левых значений?

0 голосов
/ 19 января 2019

У меня есть таблица, в которой я хочу зафиксировать строку заголовка и количество столбцов.У меня это работает довольно хорошо, но на большом столе это мучительно медленно.Есть ли лучший способ достижения того же результата?Я пробовал $(this).position().left+'px' вместо freezePos, но, похоже, это делало его еще медленнее (какой-нибудь инструмент, где я могу A / B скорость?).

Кажется уродливым вычислять позиции.Я хотел бы просто заблокировать ячейки на оси х, не устанавливая left.Это также заставляет меня использовать фиксированную ширину для тех ячеек, что не идеально.Что еще я могу сделать, чтобы улучшить это?

Там нет css position: fixed-x верно? 

$.fn.freezeColumns = function() {
  var freezePos = 0;
  $('thead th').each(function(index, val) {
    if(index == 2) return false; // Exit after n elements
    var $self = $(this);
    var curWidth = $self.outerWidth();
    $('th:nth-child(' + parseInt(index+1) + '), td:nth-child(' + parseInt(index+1) + ')').addClass('sticky').css('left', freezePos);
    freezePos += curWidth;
  });
};
$(document).freezeColumns();
body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 10px;
  white-space: nowrap;
}

thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
}
th.sticky {
  z-index: 4;
}
td.sticky {
  background: #569CA8;
  color: white;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table cellspacing="0">
    <thead>
      <tr>
        <th>Header 1 Title</th>
        <th>Header 2 Title X</th>
        <th>Header 3 Title XX</th>
        <th>Header 4 Title XXX</th>
        <th>Header 5 Title XXXX</th>
        <th>Header 7 Title XXXXX</th>
        <th>Header 8 Title XXXXXX</th>
        <th>Header 9 Title XXXXXXX</th>
        <th>Header 10 Title XXXXXXX</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
    </tbody>
  </table>
</div>

1 Ответ

0 голосов
/ 19 января 2019

Я бы даже не стал заморозить элементы (если я правильно понимаю, что вы собираетесь делать). Скорее создайте функцию, которая клонирует N рядов строк вместе с заголовком и расположите их абсолютно поверх оригиналов. Возможно, при необходимости добавьте фильтр невидимости для оригиналов.

EDIT:

Я снова искал код. Вы можете получить некоторое повышение производительности, переместив столько же, сколько общие атрибуты за пределы цикла jquery. Как то так: 

$.fn.newFreeze = function(num) {
  var left = 0;
  for (var i = 1; i < num + 1; i++) {
    left += i === 1 ? 0 : $(`th:nth-child(${i - 1})`).outerWidth();
    $(`th:nth-child(${i}),td:nth-child(${i})`).each(function() {
      $(this).css({
        left,
        zIndex: 4,
      })
    })
  }
}

th, td {
  position: sticky;
  position: -webkit-sticky;
}
...