ui.kanban

Канбан-доска для оптимизации контроля рабочих процессов.

Webix Kanban Board - это легко настраиваемый компонент с удобным API. С Kanban вы сможете создавать доски любой структуры и сложности. Пользователи смогут добавлять, редактировать и фильтровать карточки, присваивать карточки пользователям и оставлять комментарии.

Подробнее читайте в описательной документации.

Инициализация

var kanban = webix.ui({
    view:"kanban",
    type:"space",
    cols:[
        { header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        },
        { header:"Done",
            body:{ view:"kanbanlist", status:"done" }
        }
    ],
    url: "tasks.php"
});

С чего начать

Methods
add добавляет элемент в DataStore
addView добавляет новый компонент в лейаут или перемещает существующий
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clearAll удаляет все элементы из компонента
copy создает копию карточки и добавляет ее в лист под исходной карточкой
count возвращает количество элементов, отображаемых в компоненте на момент вызова
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
eachList проходит по всем листам Kanban и вызывает для них функцию
enable делает активным ранее заблокированный компонент
exists проверяет, существует ли элемент с указанным ID
filter фильтрует данные в компоненте
find возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов
getChildViews возвращает внутренние компоненты
getColors возвращает коллекцию со статусами и цветными маркерами для карточек Kanban
getComments возвращает объект компонента с комментариями для карточек Kanban
getEditor возвращает объект редактора карточек Kanban
getFirstId возвращает ID первого элемента
getFormView возвращает объект формы, которой принадлежит компонент
getIdByIndex возвращает id элемента по указанному индексу
getIndexById возвращает индекс элемента по заданному ID
getItem возвращает объект элемента данных по заданному ID
getLastId возвращает ID последнего элемента
getMenu возвращает объект меню с опциями для карточек Kanban
getNextId возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции
getNode возвращает HTML-элемент компонента
getOwnerList возвращает объект компонента Kanbanlist, в котором находится указанная карточка
getParentView возвращает родительский компонент
getPrevId возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции
getSelectedId возвращает id выбранной карточки
getStatuses возвращает массив со статусами карточек
getTags возвращает коллекцию с тегами Kanban
getTopParentView возвращает самого верхнего родителя
getUserList возвращает объект листа с пользователями
getUsers возвращает коллекцию с пользователями
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
index возвращает порядковый номер (индекс) компонента лейаута
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
loadNext отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции)
mapEvent направляет события от одного компонента к другому
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
reconstruct перестраивает лейаут
refresh перерисовывает компонент или один из его элементов
remove удаляет указанный элемент(ы) из DataStore
removeView удаляет компонент из лейаута
resize перерисовывает компонент после изменения размеров
resizeChildren перерисовывает все компоненты внутри лейаута
restore восстанавливает состояние лейаута
select выбирает карточку
serialize сохраняет текущее состояние лейаута в JSON объект
show делает компонент видимым
showBatch елает видимыми те элементы, параметр 'batch' которых задан определенным именем
showEditor открывает редактор для редактирования карточки или добавления новой
sort сортирует DataStore
sync позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
updateItem обновляет элемент данных (изменяет его поля)
waitSave позволяет определить момент, когда операции над данными были сохранены на сервер
Events
onAfterAdd срабатывает после добавления элемента в DataStore
onAfterCollapse срабатывает после сворачивания панели аккордеона
onAfterCopy срабатывает после копирования карточки
onAfterDelete срабатывает после удаления элемента
onAfterEditorShow срабатывает после открытия редактора
onAfterExpand срабатывает после разворачивания панели аккордеона
onAfterLoad срабатывает после завершения загрузки данных
onAfterSort срабатывает после сортировки данных
onAfterStatusChange срабатывает после перетаскивания карточки в лист с другим статусом
onAvatarClick срабатывает после клика по аватару пользователя на карточке
onBeforeAdd срабатывает перед добавлением элемента в DataStore
onBeforeCopy срабатывает перед копированием карточки
onBeforeDelete срабатывает перед удалением элемента
onBeforeEditorAction срабатывает после клика на кнопки Save и Remove в редакторе Kanban
onBeforeEditorShow срабатывает перед открытием редактора Kanban
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeSort срабатывает перед сортировкой данных
onBeforeStatusChange срабатывает перед перемещением карточки в лист с другим статусом
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onDataRequest срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных
onDataUpdate срабатывает при обновлении элемента данных
onDestruct происходит, когда компонент был разрушен деструктором
onListAfterContextMenu срабатывает после открытия контекстного меню для карточки
onListAfterDrop срабатывает после перетаскивания карточки
onListAfterSelect срабатывает после выбора карточки
onListBeforeContextMenu срабатывает после клика правой клавишей мыши по карточке, перед отображением браузерного контекстного меню
onListBeforeDrag срабатывает перед нажатием клавиши мыши над карточкой, которую нужно перетащить
onListBeforeDragIn срабатывает перед тем, как перетаскиваемая карточка переместится за границы нового листа
onListBeforeDrop срабатывает перед тем, как пользователь перетащит карточку на новый лист
onListBeforeSelect срабатывает перед выбором карточки
onListDragOut срабатывает, когда перетаскиваемый элемент перемещается за пределы выпадающего списка
onListIconClick срабатывает после клика по иконке на карточке
onListItemClick срабатывает после клика по карточке
onListItemDblClick срабатывает по двойному клику по карточке
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
attachments путь к скрипту для загрузки файлов
borderless скрывает или показывает границы компонента
cardActions добавляет карточкам меню
collapsed определяет, будут все панели аккордеона свернуты или развернуты
colors задает статусы с цветными маркерами для карточек Kanban
cols массив колонок лейаута
comments включает возможность оставлять комментарии к карточкам
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datathrottle устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса)
datatype тип загружаемых данных
delimiter задает разделитель для тегов, если они заданы строкой
disabled блокирует или разблокирует компонент
editor включает редактор карточек по умолчанию или задает параметры для редактора (подробности ниже)
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
isolate изолирует ID всех внутренних элементов в пределах компонента
listFilter задает фильтр для карточек (определяет, какие карточки показывать в каком листе)
margin задает отступы между элементами лейаута
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
multi включает/отключает режим, когда несколько панелей могут быть открыты одновременно
on позволяет присоединять обработчики к внутренним событиям компонента
padding определяет пространство между границами лейаута и его содержимым
paddingX задает правый и левый отступ внутри лейаута
paddingY задает верхний и нижний отступы внутри лейаута
panelClass возвращает имя класса CSS, заданного панелям аккордеона
ready обработчик, который вызывается сразу после того, как компонент полностью инициализирован
removeMissed определяет что должно происходить с элементами данных при перезагрузке
responsive включает адаптивность для лейаута
rows ряды лейаута
save определяет URL для сохранения данных
scheme определяет схему для обработки данных
tags задает набор тегов для карточек в Kanban
type определяет границы и отступы в лейауте
url путь к данным, которые загрузятся в компонент сразу после инициализации
userList задает выпадающий список пользователей для карточки
users задает список пользователей для доски Kanban
visibleBatch задает группу контролов, которые будут видны после инициализации
width задает ширину компонента
Other
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
data DataStore компонента
name возвращает имя компонента (свойство только для чтения)
waitData конечный результат загрузки данных в компонент (промис)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix web ui framework and page of kanban board tool product.