Доска Канбан

Пример 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 то большая модальная форма
    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 "<div class='kanban-drop-placeholder'>" + as.lang("crud.kanbanDropHere", "Место для вставки") + "</div>";
                },
                "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

Платформа Falcon Space

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

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

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

по ходу эксплуатации программы

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

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

Бесплатное обучение разработке на Falcon Space

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space.

Google поиск по нашей документации