Таблица со Сворачиванием Колонок

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

Пользователь может выбрать любое количество столбцов, нажав кнопку «Столбцы…», чтобы открыть всплывающее окно выбора столбцов. Всплывающее окно содержит динамически сгенерированный список столбцов на основе разметки таблицы, который можно проверять и сбрасывать, чтобы настроить видимые столбцы.

Применение режима выбора столбцов к таблице

Режим выбора столбцов требует элемента table с двумя атрибутами: data-role="table" и data-mode="columntoggle". Атрибут ID также требуется для таблицы, чтобы связать ее со всплывающим меню выбора столбцов.

<table data-role="table" data-mode="columntoggle" id="my-table">

Как работает режим переключения столбцов

Плагин автоматизирует несколько ключевых действий: он вставляет кнопку выбора столбцов и генерирует всплывающее окно со списком столбцов, которые пользователь может скрывать или показывать. Список столбцов в меню выбора заполняется путем разбора значений (или abbr title) первой строки заголовков (TH) элементов. Только заголовки, имеющие атрибут data-priority, включаются в выбор столбцов; заголовки без этого атрибута не будут доступны в выборе, чтобы позволить разработчикам определить критически важные столбцы, которые не следует скрывать. Если столбцы скрыты с помощью запросов к средам с различным разрешением, они будут сняты с отметки в окне выбора для отражения текущей видимости столбцов.

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

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

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

Назначение приоритета столбцам

Таблица работает путем скрытия и отображения столбцов на основе двух входных данных: доступной ширины экрана или путем проверки и снятия пользователем отметки с столбцов для отображения в всплывающем окне выбора столбцов. Добавьте атрибуты data-priority к каждому из заголовков столбцов таблицы, которые вы хотите отображать адаптивно, и назначьте приоритет (1 = самый высокий, 6 = самый низкий). Любой заголовок столбца, которому присвоен приоритет, будет доступен в меню выбора столбцов.

Чтобы сделать столбец постоянным, чтобы он не был доступен для скрытия, опустите атрибут data-priority . Это сделает столбец видимым при всех ширинах и он не будет доступен в меню выбора столбцов.

<th>I'm critical and can't be removed</th>
<th data-priority="1">I'm very important</th>
<th data-priority="3">I'm somewhat</th>
<th data-priority="5">I'm less important</th>

Внутри плагина будут применяться классы к каждой ячейке, которые соответствуют приоритету, заданному в атрибуте данных в заголовке. Например, если у заголовка таблицы есть атрибут data-priority="3", каждая ячейка в этом столбце получит класс ui-table-priority-3 после обработки. Эти классы затем используются в запросах к средам с различным разрешением для скрытия и отображения столбцов в зависимости от ширины экрана (см. ниже).

<td class="ui-table-priority-3">97%</td>

Вы можете использовать любую систему наименования приоритетов и назначить столько (или мало) уровней приоритета для столбцов. Плагин просто генерирует имена классов на основе значений в атрибуте data-priority, поэтому, хотя мы по умолчанию используем числовую систему 1-6, любая система наименования возможна.

Например, если приоритет data-priority="critical" добавлен к заголовку, к каждой ячейке в этом столбце будет применен класс ui-table-priority-critial. Если приоритет назначен, столбец станет доступным для переключения в меню столбцов и добавляет классы к каждой ячейке; остальная часть форматирования и создания запросов к средам с различным разрешением зависит от вас.

Важно отметить, что необходимо обернуть заголовки столбцов в блок <thead> ... </thead>, а тело таблицы — в блок <tbody> ... </tbody>, как показано в полном примере демонстрации.

Делаем таблицу адаптивной

Стили для всех столбцов с приоритетом (1-6) начинаются как display:none в стиле таблицы, поскольку мы используем подход «мобильное первое» к стилям. Это означает, что в стилях первоначально видны только столбцы, которые должны быть постоянными.

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

Запросы к средам с различным разрешением добавляют адаптивное поведение отображения и скрытия столбцов по приоритету. Каждый запрос к средам с различным разрешением написан с использованием min-width ширины, поэтому они строятся друг на друге. Ширины задаются в em, поэтому они реагируют на изменения размера шрифта. Чтобы рассчитать ширину в пикселях в em, разделите целевую ширину на 16 (пикселей) — это так просто.

Внутри каждого запроса к средам с различным разрешением мы переопределяем свойства стиля display:none , заданные для всех столбцов с приоритетом в базовых стилях, на display:table-cell , чтобы они снова стали видимыми и действовали как таблица.

Чтобы настроить точки разрыва, скопируйте следующий блок стиля в свои пользовательские переопределения стиля и измените значения запросов к средам с различным разрешением min-width для каждого уровня приоритета, чтобы указать, где различные столбцы с приоритетом должны появляться.

В примерах стилей ниже для класса my-custom-class в таблице столбцы с приоритетом 1 отображаются первыми при ширине выше 20em (320px), затем приоритет 2 запускается выше 30em (480px) и так далее до широких ширин настольных компьютеров с приоритетом 6. Не стесняйтесь изменять эти точки разрыва в вашем стиле и выбирать, сколько уровней приоритета вы хотите использовать.

/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
   .my-custom-class th.ui-table-priority-1,
   .my-custom-class td.ui-table-priority-1 {
     display: table-cell;
   }
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
   .my-custom-class  th.ui-table-priority-2,
   .my-custom-class td.ui-table-priority-2 {
     display: table-cell;
   }
}
...more breakpoints...

Из-за специфичности CSS вам также необходимо включить определения классов для скрытых и видимых состояний после пользовательских точек разрыва в вашем пользовательском стиле, поэтому обязательно включите их:

/* Manually hidden */
.my-custom-class th.ui-table-cell-hidden,
.my-custom-class td.ui-table-cell-hidden {
  display: none;
}
 
/* Manually shown */
.my-custom-class th.ui-table-cell-visible,
.my-custom-class td.ui-table-cell-visible {
   display: table-cell;
}

Применение предварительно заданной точки разрыва

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

Эти точки разрыва могут быть применены путем добавления класса class="ui-responsive" к элементу таблицы. Вот пример таблицы с добавленным классом:

<table data-role="table" class="ui-responsive" data-mode="columntoggle" id="my-table">

Шесть предварительно заданных классов точек разрыва, включенных в таблицу стилей переключения столбцов, используют регулярные приращения по 10 em (160 пикселей). Вот сводная таблица точек разрыва, назначенных каждому приоритету в предварительных стилях:

data-priority="1"

Отображает столбец при 320px (20em)

data-priority="2"

Отображает столбец при 480px (30em)

data-priority="3"

Отображает столбец при 640px (40em)

data-priority="4"

Отображает столбец при 800px (50em)

data-priority="5"

Отображает столбец при 960px (60em)

data-priority="6"

Отображает столбец при 1120px (70em)

Если эти предварительно заданные точки разрыва не подходят для вашего контента и макета, мы рекомендуем создать пользовательские точки разрыва для точной настройки стилей.

Работа с классами меню столбцов

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

Если пользователь установит флажок для неотмеченного столбца, он теперь берет на себя управление столбцом. До обновления страницы видимость этого столбца всегда будет видна, даже если размер экрана меняется. За кулисами к ячейкам этого столбца добавляется класс ui-table-cell-visible, чтобы обеспечить их переопределение любой видимости, установленной с помощью запросов к средам с различным разрешением.

Такая же идея применяется, когда столбец сбрасывается с отметки: с этого момента столбец не будет виден ни при какой ширине, потому что к каждой ячейке в этом столбце добавляется класс ui-table-cell-hidden.

Стиль кнопки и всплывающего окна выбора столбцов

Всплывающее окно выбора столбцов открывается с помощью кнопки, созданной фреймворком. Текст кнопки по умолчанию — «Столбцы…», но его можно изменить, добавив атрибут data-column-btn-text к таблице, чтобы указать строку текста, которую вы хотите в кнопке. Кнопка будет наследовать тему из области содержимого, как и все кнопки, но тему можно вручную установить, добавив атрибут data-column-btn-theme к любому символу шрифта вашей темы.

Эта кнопка вставляется непосредственно перед элементом таблицы и имеет базовые стили для выравнивания справа, но вы можете дополнительно настроить внешний вид этой кнопки. Чтобы стилизовать все эти кнопки на вашем сайте, используйте структурный класс ui-table-columntoggle-btn на этой ссылке.

Чтобы нацелить стили только на определенную кнопку, используйте уникальное значение href , которое генерируется для нацеливания на конкретную кнопку выбора столбцов. Например, таблица с ID movie-table сгенерирует всплывающее окно с ID movie-table-popup, поэтому селектор CSS a[href="#movie-table-popup"] будет нацелен только на кнопку всплывающего окна выбора столбцов для этой конкретной таблицы.

Тему всплывающего окна выбора столбцов можно установить, добавив атрибут data-column-popup-theme к таблице и указав любой символ шрифта вашей темы. Для пользовательских стилей или сценариев все всплывающие окна выбора столбцов можно нацелить с помощью структурного класса ui-table-columntoggle-popup , добавленного к этим всплывающим окнам. Для настройки отдельного всплывающего окна используйте сгенерированное значение ID на основе ID таблицы, которое добавляется к каждому конкретному всплывающему окну (например, #movie-table-popup ), чтобы нацелиться на конкретное всплывающее окно.

Работа с групповыми заголовками столбцов

Довольно часто возникает необходимость логической группировки нескольких столбцов под заголовком для финансовых или научных данных. Фреймворк поддерживает простейшую версию этого, позволяя использовать две строки заголовков таблицы (TH), где первая строка содержит простые colspan атрибуты для группировки столбцов ниже. В этой конфигурации фреймворк будет анализировать только первую строку для определения приоритета и отображать эти группы заголовков в качестве опций всплывающего меню выбора столбцов. В этой конфигурации второй заголовок не будет отображаться как столбец, который можно скрывать или показывать независимо от группировок в меню.

Таблица с столбцами table-columntoggle помещает якорь перед таблицей, вызывающий всплывающее окно со списком доступных столбцов для показа/скрытия. Идентификатор всплывающего окна, а также значение href якоря должны соответствовать идентификатору таблицы, дополненному строкой -popup. Вы можете дополнительно улучшить виджет всплывающего окна или позволить автоматическую инициализацию для его улучшения.

Виджет всплывающего окна должен содержать один виджет controlgroup, который, в свою очередь, содержит все флажки, представляющие столбцы таблицы.

В примере ниже параметр data-column-btn-theme="b" явно добавляется к таблице, чтобы указать, что тема, применённая к кнопке "Столбцы...", отличается от значения по умолчанию (null).

<div data-role="popup" id="table-column-toggle-popup" class="ui-table-columntoggle-popup">
  <fieldset data-role="controlgroup">
    <label>Rank<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
    <label>Year<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
    <label>Rotten Tomato Rating<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
    <label>Reviews<input type="checkbox" checked data-cacheval="false" locked="true"></input></label>
  </fieldset>
</div>
<a href="#table-column-toggle-popup" class="ui-table-columntoggle-btn ui-btn ui-btn-b ui-corner-all ui-shadow ui-mini" data-rel="popup">Columns...</a>
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" data-enhanced="true" class="ui-table ui-table-columntoggle" data-column-btn-theme="b">
  <thead>
    <tr>
      <th data-priority="2" data-colstart="1" class="ui-table-priority-2 ui-table-cell-visible">Rank</th>
      <th data-colstart="2">Movie Title</th>
      <th data-priority="3" data-colstart="3" class="ui-table-priority-3 ui-table-cell-visible">Year</th>
      <th data-priority="1" data-colstart="4" class="ui-table-priority-1 ui-table-cell-visible"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="5" data-colstart="5" class="ui-table-priority-5 ui-table-cell-visible">Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="ui-table-priority-2 ui-table-cell-visible">1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td class="ui-table-priority-3 ui-table-cell-visible">1941</td>
      <td class="ui-table-priority-1 ui-table-cell-visible">100%</td>
      <td class="ui-table-priority-5 ui-table-cell-visible">74</td>
    </tr>
    <tr>
      <th class="ui-table-priority-2 ui-table-cell-visible">2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td class="ui-table-priority-3 ui-table-cell-visible">1942</td>
      <td class="ui-table-priority-1 ui-table-cell-visible">97%</td>
      <td class="ui-table-priority-5 ui-table-cell-visible">64</td>
    </tr>
  </tbody>
</table>