Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Работа с таблицами в React. Часть вторая

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React: Part One

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

Введение

Это вторая и заключительная часть серии уроков о React-Bootstrap-Table. В первой части мы создали простое приложение React, используя команду react-create-app, добавили таблицу React-Bootstrap-Table, заполнили ее данными, поработали с колонками, оформили стиль таблицы и выделили некоторые строки.

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

Расширение строк

Это одна из самых классных возможностей React-bootstrap-table. При отображении табличных данных часто имеется дополнительная информация, которую хотелось бы отобразить на одной или двух строках, но в формате таблицы нет возможности отобразить всю информацию для всех строк. 

Одним из вариантов является использование всплывающих подсказок, но для их отображения требуется подвести курсор мыши в определенную область, что позволяет отобразить только одну подсказку. Расширение строк позволяет отображать дополнительные данные для каждой строки в виде своеобразного выпадающего блока, которые остается раскрытым, пока вы не пожелаете его обратно свернуть. Вы можете открывать сразу сколько угодно строк. Вот как это сделать с помощью React-bootstrap-table.

Карта любви содержит информацию о взаимоотношениях между некоторыми персонажами "Разработки под арестом": Гоб любит Марту, и Бастер любит Люсиль. Функция isExpandable() отвечает за то, какие строки будут расширяемыми.  В данном случае, она возвращает положительное значение для тех строк, в которых имена персонажей принадлежат к карте любви. Функция expandRow() возвращает компонент, когда строка переходит в расширенное состояние. 

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

Опции расширяемой колонки - это свойство, состоящее из одного объекта, а кроме него есть свойство под названием options (опции), которое содержит дополнительные опции расширения строки, такие как expandRowBgColor и расширение. Было бы намного проще, если бы существовало только одно свойство expandRowProp, которое включало бы все опции (такие как selectRowProp).

The result of the above code

Многостраничный вывод

В предыдущих примерах мы выводили только три строки данных. Но таблицы созданы для вывода большого количества данных и вполне возможно, что они не будут все умещаться на экране. В таких случаях можно использовать многостраничный вывод. React-bootstrap-table поддерживает множество опций многостраничного вывода.

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

Давайте также укажем, какую страницу отображать изначально (4), настроим текст перехода к предыдущей, следующей, первой и последней странице (используем Unicode символы стрелок для пущей крутости), а также зададим функцию showTotal()  для отображения общего количества элементов. Обратите внимание, что атрибут, отвечающий за кнопку перехода к предыдущей странице, называется "prePage", а не "prevPage" (меня на этом подловили). Все опции многостраничного вывода содержаться в атрибуте "options" таблицы.

The resulting table of the code above

Добавление и удаление строк

До этого момента мы использовали таблицы для отображения информации в различных видах. Но таблицы могут также использоваться в пользовательском интерфейсе для управления данными. Давайте посмотрим как можно добавлять и удалять строки в таблице.

Ключевыми атрибутами являются insertRow и deleteRow. Когда вы задаете их значения, автоматически добавляются кнопки "New" и "Delete". При нажатии на кнопку "New" появляется диалоговое окно, в котором можно добавлять новые строки. При нажатии на кнопку "Delete" все выделенные строки будут удалены. Конечно же, для удаления строк нужно активировать выделение строк. Также можно задать функции, которые будут выполняться после добавления или удаления строк.

Adding and Deleting Rows

Редактирование ячеек

Еще одним видом управления данными является прямое редактирование (оно же редактирование содержимого ячейки). Редактирование ячейки может быть вызвано одинарным или двойным щелчком. За него отвечает атрибут "cellEdit". Кроме всего прочего вы можете задать запрет на редактирование определенных строк, а также указать функции, выполняемые при редактировании.

В коде ниже, функция nonEditableRows просто возвращает индекс строки 3, но можно добавить и более сложный функционал. 

Editing Cells

Экспорт ваших данных

Иногда не достаточно просто просмотреть ваши данные и поиграть с ними с помощью веб-интерфейса, и вам необходимо открыть их с помощью других инструментов. Это можно легко осуществить с помощью React-bootstrap-table. Просто добавьте атрибут exportCSV (и по желанию имя файла), и кнопка для экспорта будет добавлена автоматически. При нажатии на ее, вы сможете сохранить ваши данные в файл формата CSV.

Exporting Data

Вот экспортированные данные из нашей маленькой таблицы:

Тонкая настройка

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

Вот список настраиваемых элементов:

  • Ячейка
  • Строка инструментов
  • Диалоговое окно добавления данных
  • Многостраничный вывод
  • Фильтрация данных по колонкам
  • Редактирование ячеек
  • Колонка выделения строки

Заключение

React-bootstrap-table является мощным инструментом. Прямо из коробки он предоставляет приятный интерфейс для отображения, поиска и управления табличными данными. API является очень последовательным - основные функции можно подключать через задание простого атрибута, а также настраивать их с помощью дополнительных атрибутов, которые зачастую могут быть заданы через функции.

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

За последние несколько лет популярность React значительно выросла. Кстати, у нас в профиле на маркетплейсе вы сможете найти и купить или ознакомиться с несколькими продуктами.  Если вы ищете дополнительные ресурсы по React, можете смело перейти по этой ссылке

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.