Доска Канбан

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

{
                "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 "

";
                },
                "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  '{"isDragDrop": false}' KanbanOptions
           

.deal.card :hover {
    cursor: pointer !important;
}