Доска Канбан

Пример kanban доски

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

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

Для показа канбан доски, необходимо сделать следующее: 
  1. Создать таблицу статусов с колонками id (PK), name, color. Это статусы элементов, выводятся наверху канбан доски. 
  2. В 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
  3. В SELECT 3 в GetItems указать:
    1. viewType='kanban' - задаем тип вывода  Канбан
    2. kanbanItemForm- код формы. Если указан, то при клике на карточку доски в модальном окне будет вызываться форма (форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=id сущности из 4 запроса select).
      Также  этот параметр (kanbanItemForm- ) можно передавать и в 4 запросе для каждой карточки отдельно, чтобы выводить разные формы для разных карточек. 
    3. kanbanItemFormTitle - заголовок диалогового окна формы. 
    4. kanbanItemFormBig - если указано '1'. то будет большое модальное окно. 
    5. kanbanOptions - задает настройки компонента Kanban в JSON (смотри ниже пример). ВАЖНО! Обязательно соблюдать регистр полей в JSON и названия параметров в двойные кавычки. 
  4. В четвертом 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
  5. Для смены статуса необходимо реализовать метод обновления 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

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.