JavaScript UI виджет List

JavaScript List - это UI виджет для списков данных. Он отлично работает с тысячами записей и поддерживает выделение одного или нескольких элементов списка. В List также также доступны все действия по управлению данными.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддерживается во всех современных браузерах
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

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

Пользователи могут просматривать и изменять данные в List. Для этого нужно кликнуть по нужному элементу списка и изменить его значение.

Кликните по любому элементу, чтобы открыть редактор

Валидация

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

Введите название фильма в пустой элемент списка

Динамическая загрузка и ленивая отрисовка

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

Grouplist

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

Кликните по элементу, чтобы открыть его группу

X-list

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

List с фиксированной шириной и пользовательским CSS для элементов списка

Unitlist

Unitlist позволяет сгруппировать изначально несортированные данные. Благодаря этому UI виджету, данные сортируются и объединяются в группы по общему критерию (например, первой букве). Unitlist помогает справиться с большим количеством неупорядоченной информации.

Страничная навигация в JavaScript виджете List

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

Нажмите на 'Next'

Фильтрация

Вы легко можете фильтровать данные в Webix виджете List. Фильтрация помогает быстрее находить нужные данные.

Введите значение, по которому хотите отфильтровать список

Работа с буфером обмена

Наш JavaScript виджет List поможет вам скопировать и вставить элементы списка в другие HTML контейнеры с помощью горячих клавиш.

Нажмите 'Ctrl+C' и 'Ctrl+V', чтобы скопировать и вставить элементы списка

Drag-and-drop

List позволяет перетаскивать элементы списка не только в пределах виджета, но и между ним и Datatable, Treetable, Datatree, Dataview и другим списком.