Доска Канбан
Это режим компонента Таблица

Позволяет вывести данные в виде канбан доски с разделением по статусам и возможностью переноса карточки в другой статус.
Для показа канбан доски, необходимо сделать следующее:

Позволяет вывести данные в виде канбан доски с разделением по статусам и возможностью переноса карточки в другой статус.
Для показа канбан доски, необходимо сделать следующее:
-
Создать таблицу статусов с колонками id (PK), name, color. Это статусы элементов, выводятся наверху канбан доски.
-
В GetItems SELECT 1 выбираем статусы (колонки), к которым в дальнейшем по полю id будут привязываться события.
CREATE TABLE dbo.#result (id int, name nvarchar(256), color nvarchar(64)) declare @filterName nvarchar(128) select @filterName = Value from @filters where [Key] = 'name' insert into #result SELECT [id], [name], [color] FROM [demo].[dbo].[as_en_statuses] -- забираем статусы WHERE entityID in (select id from as_en_entities where code='order') ORDER BY ord
- В SELECT 3 в GetItems указать:
- viewType='kanban' - задаем тип вывода Канбан
-
kanbanItemForm- код формы. Если указан, то при клике на карточку доски в модальном окне будет вызываться форма (форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=id сущности из 4 запроса select).
Также этот параметр (kanbanItemForm- ) можно передавать и в 4 запросе для каждой карточки отдельно, чтобы выводить разные формы для разных карточек. -
kanbanItemFormTitle - заголовок диалогового окна формы.
-
kanbanItemFormBig - если указано '1'. то будет большое модальное окно.
- kanbanOptions - задает настройки компонента Kanban в JSON (смотри ниже пример). ВАЖНО! Обязательно соблюдать регистр полей в JSON и названия параметров в двойные кавычки.
-
В четвертом select в GetItems (вместо данных футера) выводим данные карточек канбана (именно с такой моделью данных). По полю statusID идет привязка к соответствующему статусу (что указаны в SELECT 1). ВАЖНО соблюдать регистр названий полей.
SELECT ord_orders.id, as_en_entityInstances.statusID,-- Статус элемента выводится в середине карточки customerName name, customerContact text, -- Если указан код формы, то 'Комментарий заказчика: ' + customerComment tooltip, -- будет ссылкой на мод.форму convert(nvarchar, ord_orders.created, 120) bottomText, '' customClass--css класс, '' kanbanItemForm -- код модальной формы (при клике по элементу) '' kanbanItemFormTitle -- заголовок модальной формы '' kanbanItemFormBig -- если 1 то большая модальная форма '' makeup -- можно задать свою разметку элемента канбан (в этом случае она будет выводиться вместо стандартной разметки). FROM ord_orders INNER JOIN as_en_entityInstances on as_en_entityInstances.id = ord_orders.instanceID
- Для смены статуса необходимо реализовать метод обновления updateField для таблицы. Передаваемое поле задано жестко - statusID.
CREATE PROCEDURE [dbo].[crud_kanbanOrders_updateField]
@itemID int,
@field nvarchar(64),
@value nvarchar(max),
@username nvarchar(64)
AS
BEGIN
if(@field = 'statusID') begin
update as_en_entityInstances
set statusID = cast(@value as int)
where id in (select instanceID from ord_orders where id = @itemID)
end else if(@field = 'YYY') begin
update as_trace set code = @value
where id = @itemID
end else begin
select 'Невалидный код свойства' Msg, 0 Result
return
end
select '' Msg, 1 Result
END
Примечание:
Пример настроек KanbanOptions:
{
"isUpdateBoardOnInit": true,
"dragscroll": {
"isEnabled": true,
"cardSelector": ".deal",
},
"multiselect": {
"isEnabled": true,
"cardSelector": ".deal",
"togglerSelector": ".kanban-multiselect-toggler",
"selectedClass": "selected"
},
"getUpdateParams": function () {
var res = {};
return res;
},
"isDragDrop": true,
"getDropPlaceholderHtml": function () {
return "
" + as.lang("crud.kanbanDropHere", "Место для вставки") + "
";
},
"updateBoardCallback": function (data) {
},
"afterMoveCallback": function ($el, from, to) {
},
"afterMoveResponseCallback": function ($el) {
},
"afterMoveInsideStatusCallback": function ($el) {
},
"changeMultiselectCallback": function ($el) {
},
"beforeMove": function (id, from, to, $status, el, moveCard) {
}
}
Как отключить перенос элементов между статусами
В SELECT 3 прописываем:
select '{"isDragDrop": false}' KanbanOptions
Добавляем CSS на страницу:
.deal.card :hover {
cursor: pointer !important;
}
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты Бизнес-процессы. Создание бизнес-процесса в личном кабинете Работа с показателями. Управление метриками на сайте Создание панелей-подсказок для пользователей в личном кабинете Отображение счетчиков в личном кабинете на сайте Работа с HTML блоками. Создание модулей верстки Работа с деревьями (иерархия). Вывод древовидных структур на сайте Добавление лайков, дизлайков, рейтингов, голосования за товары в личном кабинете Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Интерактивные диаграммы, графики
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.