Перейти к основному содержимому

Обзор DHTMLX Kanban

JavaScript Kanban — это эффективное решение для визуализации рабочих процессов. Этот виджет помогает лучше понять бизнес-процессы и получить общее представление о загрузке команды. Гибкий инструмент поддерживает любое количество карточек, колонок и дорожек (swimlanes). Компонент полностью написан на чистом JavaScript и CSS, легко настраивается и интегрируется в любое веб-приложение или веб-страницу.

Структура Kanban​

Панель инструментов​

Панель инструментов Kanban является отдельной частью интерфейса. Она включает строку поиска для поиска карточек, элемент управления для сортировки карточек по заданным параметрам, два элемента для управления историей (отмена/повтор) и элементы для добавления новых колонок и строк. Вы можете гибко управлять логикой поиска и сортировки, а также изменять структуру панели инструментов, добавляя собственные элементы или меняя порядок встроенных. Подробнее читайте в разделе Конфигурация.

Kanban Toolbar

Доска​

Доска — основная часть Kanban. Она состоит из карточек, распределённых по колонкам и строкам (swimlanes). Вы можете гибко настраивать внешний вид карточек, а также использовать собственные шаблоны. Подробнее читайте в разделе Конфигурация.

На панели Доска вы можете работать с карточками, колонками и строками следующим образом:

  • добавлять новые карточки, нажимая на значок плюса (в соответствии с заданными ограничениями для каждой колонки и дорожки)
  • добавлять комментарии и голоса к задачам через панель редактора (Пример)
  • устанавливать связи между задачами через редактор (Пример)
  • удалять карточки, колонки и строки с помощью контекстного меню (значок с тремя точками)
  • дублировать карточки с помощью контекстного меню (значок с тремя точками) или сочетания клавиш Ctrl (Command)+D (позволяет дублировать несколько карточек)
  • экспортировать данные Kanban в файл JSON
  • управлять историей Kanban с помощью следующих сочетаний клавиш:
    • Ctrl (Command)+Z — отменить последнее действие в Kanban (шаг назад в истории Kanban)
    • Ctrl (Command)+Y или Ctrl (Command)+Shift+Z — повторить действие, отменённое с помощью undo (шаг вперёд в истории Kanban)
  • перемещать карточки перетаскиванием в нужное место (строку и колонку)
  • перемещать колонки и строки через контекстное меню (значок с тремя точками)
  • переименовывать колонки и строки двойным щелчком по соответствующим меткам или через контекстное меню (значок с тремя точками)
  • открывать редактор карточки по клику на карточку
  • сворачивать/разворачивать строки, нажимая на стрелку слева от метки строки
  • сворачивать/разворачивать колонки, нажимая на стрелку слева от метки колонки
  • выделять несколько карточек с помощью следующих сочетаний:
    • Shift + клик по нужным карточкам для выделения нескольких карточек в одной колонке
    • Ctrl (Command) + клик по нужным карточкам для выделения нескольких карточек в разных колонках
Kanban Board

Редактор​

Редактор — это модальная панель, состоящая из полей и элементов управления для редактирования данных выбранной карточки. Для отображения редактора нажмите на нужную карточку. Структуру редактора можно гибко настраивать, добавляя новые поля и элементы управления. Подробнее читайте в разделе Конфигурация.

Kanban Editor

Что дальше​

Теперь вы можете приступить к использованию Kanban в своём приложении. Следуйте инструкциям из руководства Как начать для получения подробной информации.