Falcon Space

Диаграмма Ганта на сайте

Оглавление
Это один из режимов работы компонента Таблица.

Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее: 
  1. Создать таблицу с колонками id (PK, можно строка), name, desc. Это будут строки Ганта
    (т.е. для каждого из этих элементов будет грузиться лента событий по датам). 
  2. В третьем select в GetItems указать тип вывода viewType=’gantt’
    select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Описание деталей операции' ganttItemFormTitle, 'Финансы по датам' Title
  3. В четвертом select в GetItems (вместо данных футера) выводим данные по элементам Ганта. 
    select top 60 (select name from fin_financeCategories where id = categoryID) as  itemID,
       -- 'itemID' должен совпадать с id элемента из второго select
       created [from], -- дата начала и конца элемента Ганта
       dateadd(hour, 0.5, created) [to],
       'Х' [label], -- метка на диаграмме
       convert(nvarchar, created, 104) + ' : ' +  isnull((select name
                                                          from fin_financeCategories
                                                          where id = categoryID),
                                                          'Без категории')
       + ' : ' + try_cast(sum as nvarchar) [desc], -- подсказка при наведении на элемент
       'text-warning' customClass, --css класс для стилизации элемента на диаграмме
       cast(id  as nvarchar) dataObj-- идентификатор элемента, для показа модальной формы
from fin_finances
where isnull(isDeleted,0)=0
  and (isnull(@filterCategoryID,0)=0 or @filterCategoryID = categoryID)
  and created > dateadd(month, -3, getdate())
  4. Дополнительно в 3 запросе select можно настроить следующие параметры: 
    1. ganttScale - формат по умолчанию days, hours, weeks и т.д.
    2. ganttNavigate - как будет выводиться навигация по диаграмме - scroll, buttons
    3. ganttItemForm - код формы. Если указан, то при клике на элемент диаграммы в модальном окне будет вызываться форма
      (форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=dataObj из 4 запроса select). 
    4. ganttItemFormTitle - заголовок диалогового окна формы
 Примечание по диаграммам Ганта: 
  • Пейджинг для диаграммы устанавливается равным пейджингу настроек таблицы. 
  • Элементы Ганта занимают минимально 1 час в сетке. Если у вас событие было с 14:02 до 15:02 то это займет 2 ячейки - 14 и 15. 
    Поэтому лучше делайте события длинной в 1 минуту.
  • Элементы могут налезать друг на друга, поэтому лучше группировать события по часам в дне + показывать количество в заголовке.
    А в модальном окне (форма) по клику показывать уже элементы, которые соответствуют ячейке. 
  • desc для категорий лучше ставить в какое-то значение, а не оставлять пустым. 
  • Если нужно раскрашивать элементы в цвета, используйте параметр customClass - ставьте классы bootstrap: bg-warning  
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

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

Falcon Space

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

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

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

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

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

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

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