tablesaw
- Tablesaw Набор плагинов jQuery для адаптивных таблиц. Настольные режимы
- Отказаться от встроенных меток
- тумблер
- Добавить мини-карту
- красть
- Добавить мини-карту
- Мини карта
- Переключатель режимов
- Сортируемый
- Пользовательские функции сортировки
- Раковина кухонного стола
- Начиная
- Использование Stack-Only TableSaw
- Использование Stack-Only TableSaw SCSS Mixin
- Использование Bare TableSaw
- Строим проект локально
Tablesaw 
Набор плагинов jQuery для адаптивных таблиц.
Настольные режимы
стек
Таблица стеков размещает заголовки таблицы в виде двух столбцов с заголовками слева, когда ширина области просмотра меньше 40em (640 пикселей).
<table class = "tablesaw tablesaw-stack" data-tablesaw-mode = "stack">
Если вы хотите использовать только таблицу стеков и не хотите использовать все дополнительные функции, представленные ниже (сэкономьте себе несколько байтов), Tablesaw предоставляет версию только для стека.
Отказаться от встроенных меток
Чтобы отказаться от создания встроенных меток (текст ячейки заголовка таблицы, который отображается с небольшими точками останова) для каждой таблицы, используйте <table data-tablesaw-no-label>; для каждой строки используйте <tr data-tablesaw-no-label>.
тумблер
Таблица переключения столбцов позволяет пользователю выбирать, какие столбцы они хотят видеть.
<table data-tablesaw-mode = "columntoggle">
Заголовки таблиц должны иметь атрибут data-tablesaw-priority, чтобы иметь право на переключение. data-tablesaw-priority - это числовое значение от 1 до 6, которое определяет контрольные точки по умолчанию, в которых будет отображаться столбец. Значения по умолчанию для точки останова:
<th data-tablesaw-priority = "persist"> <! - Не подходит для переключения, всегда показывает -> </ th> <th data-tablesaw-priority = "1"> <! - Показывает в (мин -width: 20em) (320px) -> </ th> <th data-tablesaw-priority = "2"> <! - Отображается в (min-width: 30em) (480px) -> </ th> <th data-tablesaw-priority = "3"> <! - Отображается в (min-width: 40em) (640px) -> </ th> <th data-tablesaw-priority = "4"> <! - - Отображается в (min-width: 50em) (800px) -> </ th> <th data-tablesaw-priority = "5"> <! - Отображается в (min-width: 60em) (960px) - > </ th> <th data-tablesaw-priority = "6"> <! - Отображается в (min-width: 70em) (1120px) -> </ th>
Помните, что приоритеты не являются исключительными - несколько столбцов могут повторно использовать одно и то же значение приоритета.
Добавить мини-карту
<table data-tablesaw-mode = "columntoggle" data-tablesaw-minimap>
красть
Позволяет пользователю использовать жест смахивания (или использовать левую и правую кнопки) для навигации по столбцам.
<table data-tablesaw-mode = "swipe">
Столбцы также соответствуют атрибуту data-tablesaw-priority = "persist".
<th data-tablesaw-priority = "persist"> <! - всегда показывает -> </ th>
Добавить мини-карту
<table data-tablesaw-mode = "swipe" data-tablesaw-minimap>
Tablesaw также предоставляет класс tableaw-all-cols-visible, который включается, когда видны все столбцы таблицы (и отключается, когда нет). Вы можете использовать это в CSS, чтобы при необходимости скрыть миникарту.
Добавьте объект конфигурации Tablesaw после включения JavaScript Tablesaw.
Tablesaw. config = {swipe: {horizontalThreshold: 15, verticalThreshold: 20}};
Мини карта
Используйте data-tablesaw-minimap, чтобы добавить серию маленьких точек, чтобы показать, какие столбцы в настоящее время видны, а какие скрыты. Доступно только для таблиц смахивания и переключения столбцов. Примеры доступны выше.
Переключатель режимов
<table data-tablesaw-mode-switch> <! - с другим режимом по умолчанию -> <table data-tablesaw-mode = "swipe" data-tablesaw-mode-switch> <! - исключить режим из switcher -> <table data-tablesaw-mode-switch data-tablesaw-mode-exclude = "columntoggle">
Сортируемый
Опция «сортируемая» позволяет пользователю сортировать данные таблицы, щелкая заголовки таблицы. Поскольку все столбцы могут быть не видны на меньших точках останова (или вообще не отображаться при использовании табличного режима «стек»), полагаться только на заголовки столбцов при выборе сортировки таблицы нецелесообразно. Для решения этой проблемы в таблице есть необязательный атрибут data-tablesaw-sortable-switch, который добавляет меню выбора, автоматически заполняемое именами каждого столбца в таблице, с опциями выбора восходящего или нисходящего направления сортировки. Параметры данных в заголовках таблиц можно использовать для контроля сортировки столбцов (data-tablesaw-sortable-col) и порядка сортировки по умолчанию (data-tablesaw-sortable-default-col).
<таблица data-tablesaw-sortable> <thead> <tr> <! - столбец по умолчанию -> <th-data-tablesaw-sortable-col data-tablesaw-sortable-default-col> ранг </ th> <th данные -tablesaw-sortable-col> Название фильма </ th> <th-таблица данных-sortable-col-data-sorttable-numeric> Year </ th> <th-таблица-dataaw-sortable-col данные-sortable-numeric> <abbr title = "Rotten Tomato Rating"> Рейтинг </ abbr> </ th> <! - Несортируемый столбец -> <th> Отзывы </ th> </ tr> </ thead> ...
Используйте data-tablesaw-sortable-switch, чтобы добавить элемент формы выбора, чтобы вручную выбрать порядок сортировки.
<таблица данных-таблиц-сортируемых данных-таблиц-сортируемых-переключателей>
Пользовательские функции сортировки
Tablesaw предоставляет два встроенных метода сортировки: строковый и числовой. Чтобы использовать числовую сортировку, используйте класс data-sortable-numeric, как показано в приведенном выше примере разметки сортировки. В противном случае таблица использует сортировку строк без учета регистра.
Все остальные типы сортировки должны использовать функцию пользовательской сортировки для отдельных столбцов ( рабочий пример ). В надуманном примере ниже мы хотим отсортировать полные даты (например, 12/02/2014) только по году.
// Добавить функцию данных в ячейку заголовка таблицы $ ("th # custom-sort") .data ("sorts-sort", function (ascending) {// вернуть функцию return function (a, b) {// используйте a.cell и b.cell для значений ячеек var dateA = a.cell.split ("/"), dateB = b.cell.split ("/"), yearA = parseInt (dateA [2], 10), yearB = parseInt (dateB [2], 10); if (по возрастанию) {return yearA> = yearB? 1: -1;} else {// нисходящий возврат yearA <yearB? 1: -1;}};});
Раковина кухонного стола
Все вышеперечисленные варианты объединены в одну таблицу.
Начиная
Полная настольная пила
<подробности открыты>
<summary> TableSaw (без зависимостей) </ summary>
<link rel = "stylesheet" href = "tablesaw.css"> <script src = "tablesaw.js"> </ script> <script src = "tablesaw-init.js"> </ script>
</ Детали>
<подробно>
<summary> или TableSaw (плагин jQuery) </ summary>
<link rel = "stylesheet" href = "tablesaw.css"> <! - загрузить свой собственный jQuery -> <script src = "jquery.js"> </ script> <script src = "tablesaw.jquery.js "> </ script> <script src =" tablesaw-init.js "> </ script>
</ Детали>
<подробно>
<summary> или с поддержкой IE8 </ summary>
Просто добавь Respond.js ™.
<link rel = "stylesheet" href = "tablesaw.css"> <! - [if lt IE 9]> <script src = "dependencies / response.js"> </ script> <! - <! [endif ] -> <script src = "tablesaw.js"> </ script> <script src = "tablesaw-init.js"> </ script>
</ Детали>
Не забудьте добавить разметку таблицы! Для таблицы стека это выглядит так:
<table class = "tablesaw tablesaw-stack" data-tablesaw-mode = "stack">
Приведенные выше демонстрации включают полные примеры разметки для всех типов TableSaw.
Использование Stack-Only TableSaw
Как показано выше, мы предоставляем пакет TableSaw только для режима стека. Это базовая версия, не включающая в себя другие функции, описанные выше.
<подробности открыты>
<summary> TableSaw только для стека (без зависимостей) </ summary>
<link rel = "stylesheet" href = "tablesaw.css"> <script src = "stackonly / tablesaw.stackonly.js"> </ script> <script src = "tablesaw-init.js"> </ script>
</ Детали>
<подробно>
<summary> или просто Stack-only TableSaw (плагин jQuery) </ summary>
<link rel = "stylesheet" href = "tablesaw.css"> <! - загрузить свой собственный jQuery -> <script src = "jquery.js"> </ script> <script src = "stackonly / tablesaw.stackonly .jquery.js "> </ script> <script src =" tablesaw-init.js "> </ script>
</ Детали>
А потом:
<table class = "tablesaw tablesaw-stack" data-tablesaw-mode = "stack">
Проверять, выписываться только для стека увидеть рабочий пример.
Использование Stack-Only TableSaw SCSS Mixin
Чтобы легко настроить точку останова, в которой переключается таблица стека, используйте миксины SCSS. Во-первых, включите файл tablesaw.stackonly.scss вместо tablesaw.stackonly.css в свой SASS. Затем используйте родительский селектор на вашем столе.
<div class = "my-parent-selector"> <table class = "tablesaw" data-tablesaw-mode = "stack">
Включите миксин так:
.my-parent-selector {@include стек таблиц (50em); }
Аргументом tableaw-stack является точка останова, в которой таблица будет переключаться из столбцов в стек.
Использование Bare TableSaw
Табличная пила предназначена для использования в качестве встроенного решения, обеспечивающего стили таблиц, а также функциональность адаптивных таблиц.
Если вам нужна полная функциональность плагина TableSaw, но стили таблиц плагина по умолчанию не вписываются в ваш проект, используйте файл tablesaw.bare.css вместо стандартного файла tablesaw.css для более легкого стиля по умолчанию, который значительно проще в настройке.
Строим проект локально
Запустите npm install для установки зависимостей, а затем ворчите, чтобы встроить файлы проекта в папку dist.
Split ("/"), yearA = parseInt (dateA [2], 10), yearB = parseInt (dateB [2], 10); if (по возрастанию) {return yearA> = yearB?Else {// нисходящий возврат yearA <yearB?