Во многих проектах вы начинаете с довольно простой таблицы, чтобы дать вашему клиенту обзор какой-то сущности, скажем, пользователей. По мере развития проекта количество столбцов меняется, и в какой-то момент клиент требует, чтобы таблица была сортируемой, доступной для поиска и так далее. Мой первый выбор для такой таблицы — аккуратный плагин Datatables.

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

В недавнем проекте мне пришлось использовать Datatables для сортировки столбца с датами в формате дд-мм-гггг (формат даты по умолчанию в Нидерландах). Кроме того, ресурсы скомпилированы с помощью Webpack, и в этом проекте используется импорт ES6. Я заставил это работать, но мне потребовалось довольно много времени, чтобы узнать, как это сделать.

Мне было интересно, можно ли использовать этот плагин в табличном компоненте Vue. Оказывается, это не так уж и сложно, если знать, как это сделать. Подытожу, что я сделала для вас и себя в будущем 😉
Кроме того, я нашла в рассылке Проект Табулятора и Vue-плагин для него. Я попробовал, и он работает очень похоже на Vue, и я определенно советую использовать этот плагин вместо Datatables в проекте Vue.

Примеры кода

Вы можете найти весь код в этом примере проекта на Github. Просто клонируйте или скачайте его, установите зависимости и вперед!

Пример настройки проекта

Я создал новый проект, используя графический пользовательский интерфейс Vue CLI, набрав vue ui в терминале. Я настроил проект вручную и для запуска взял только плагин babel. После запуска задачи serve, которая устанавливает необходимые node_modules, я установил следующие зависимости одну за другой через пользовательский интерфейс:

Кроме того, мне нравится использовать значки Font Awesome (v4), поэтому я скачал css-файл с веб-сайта, вручную добавил его в свою папку src и импортировал в файл main.js.

Последним шагом было удаление образца компонента Hello World.

Сортируемый компонент Datatable

Я создаю новый компонент в папке компонентов с именем SortableDatatable.vue. Шаблон довольно прост, он содержит контейнер div с таблицей, содержащей некоторые жестко заданные данные. Для целей этой демонстрации таблица содержит пользовательские данные с именами, местонахождением, датами рождения и датами последнего входа в систему.

Наиболее интересна скриптовая часть компонента. Поскольку таблицы данных зависят от jQuery, чтобы быть доступным как $, импорт jQuery происходит следующим образом.

import $ from 'jquery'

Затем я импортирую сам datatables, а затем moment и плагин datatables для сортировки. Обратите внимание, что модуль datatables.net-plugins содержит всевозможные удобные плагины для расширения возможностей таблиц данных (фильтрация, интернационализация, нумерация страниц и многое другое):

// Import jQuery into the $ variable
import $ from 'jquery'    
import 'datatables.net'    
// Import moment and datatables.net plugin for sorting using moment    import 'datatables.net-plugins/sorting/datetime-moment'

Согласно документам плагина «сортировка даты с моментом», для каждого столбца даты требуется формат, чтобы указать Datatables, как его сортировать. Если эти строки опущены, применяется обычная сортировка по алфавиту, которая дает неправильные результаты, если даты указаны в используемом здесь формате. В этом примере есть два столбца дат с датами в формате дд-мм-гггг и на обычном английском языке (например, вторник, 10 сентября 2019 г.) соответственно. Следовательно, нам нужно добавить два формата. В тот момент, когда документы дают нам все, что нам нужно, форматы определяются следующим образом:

$.fn.dataTable.moment('DD-MM-YYYY'); 
$.fn.dataTable.moment('dddd, MMMM D YYYY');

Наконец, подключаемый модуль Datatables создается в смонтированном хуке компонента.

export default {        
    name: 'SortableDatatable',        
    mounted() {
        $('#sortingtable').DataTable({
            info: false,
            lengthChange: false,
            filter: false,
            paging: false,
            order: [[2, 'asc']],
        })
    }    
}

По сути, это все, что нам нужно для правильной сортировки по дате, когда модули импортируются с использованием синтаксиса ES6.

Компонент SortableDatatable можно найти в проекте на Github.

И теперь мы делаем это в стиле Vue.

Я узнал об этом проекте Tabulator на прошлой неделе, и эта демонстрация — идеальное место, чтобы попробовать плагин Vue, который поставляется с ним. Таким образом мы можем удалить нашу зависимость от jQuery. Более того, с vue-tabulator, как называется пакет, все идет по пути Vue.

Сначала установите пакет с

npm install --save vue-tabulator

и импортируйте его в свой файл main.js и сделайте его «пригодным для использования»:

import VueTabulator from vue-tabulator 
Vue.use(VueTabulator)

Я создаю табличный компонент SortableTabulator и импортирую его в App.vue (не показано).

Чтобы иметь возможность использовать стиль VueTabulator по умолчанию, таблица стилей по умолчанию импортируется в App.vue. Однако, поскольку таблица стилей представляет собой файл .scss, в качестве зависимостей нашего проекта требуются node-sass и sass-loader.

После завершения настройки часть шаблона SortableTabulator становится чрезвычайно простой. Опять же, я создаю некоторые фиктивные данные и настраиваю компонент VueTabulator с некоторыми параметрами.

Данные должны быть массивом объектов. Каждый объект соответствует одной строке таблицы, а каждое свойство этого объекта соответствует столбцу.

Этот пакет также поставляется с множеством опций, но в этом примере я буду максимально простым. Вы должны определить высоту таблицы. Если вы выберете его слишком маленьким, некоторые строки не будут отображаться. Для моего маленького стола я выбрал высоту 500px. Кроме того, было добавлено свойство макета со значением «fitColumns», чтобы все столбцы соответствовали доступной ширине.

Наиболее важным свойством являются «столбцы». Если вы опустите его, пакет попытается разобраться во всем сам, но с текущими требованиями к сортировке лучше явно указать столбцы. Свойство columns также является массивом объектов и описывает столбцы таблицы. Свойство title используется для строки заголовка таблицы, свойство field должно соответствовать имени столбца, используемого в качестве свойств в массиве данных.

Алгоритм сортировки по умолчанию предполагает, что содержимое столбца является строкой (как в плагине datatables), но в этой ситуации требуются свойства sorter и sorterParams. Поскольку библиотека moment.js уже доступна, я просто установил правильный формат для сортировки, и все готово.

Вы можете найти полный компонент на Github.

Заключительные замечания

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

Второй подход казался более естественным благодаря использованию привязки данных Vue и плагина, созданного для работы с Vue. Мой совет — использовать VueTabulator в проекте Vue.

Ради этого поста я свел данные таблицы к минимуму. Возможны всевозможные расширения и улучшения:

  • $.fn.dataTable.moment(format) принимает второй аргумент, локаль (например, «nl»), чтобы это работало для дат на предпочитаемом вами языке.
  • Табличные данные жестко закодированы в этих примерах, но достаточно просто добавить некоторую логику для чтения данных с сервера.

Я закончу краткой заметкой о производительности moment.js, от которой мы сильно зависим в этом примере. Это довольно большой модуль из-за всех файлов i18n, которые загружаются из коробки. В большинстве проектов будет использоваться не более нескольких языков, и размер пакета вашего скомпилированного приложения можно значительно уменьшить, если не объединять все эти языковые файлы. Взгляните на мой файл vue.config.js, чтобы увидеть, насколько просто игнорировать все файлы локали. Если вам все же нужно его импортировать, взгляните на main.js, где закомментированные строки 9–12 показывают, как импортировать локаль. Я нашел этот удобный трюк, сначала прочитав это, а затем следуя документам момента и попав здесь.

Первоначально опубликовано на https://www.blog.plint-sites.nl 9 октября 2019 г.