Доска Канбан

Пример 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

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