DHTMLX Gantt Chart в Веб-приложениях Webix

Современному менеджеру проектов необходим быстрый и удобный в использовании инструмент, который позволил бы ему управлять проектами: добавлять новые задания, устанавливать сроки для них, создавать различные отношения между установленными задачами и т.д.
Обновление от 8 октября, 2020

С выходом версии Webix 8.0, стал доступен собственный JavaScript Gantt Chart компонент. Теперь пользователи Webix могут использовать оригинальный Webix Gantt. Этот компонент создан по всем канонам Webix framework и предназначен для интеграции в любые бизнес-приложения, независимо от их архитектуры и системной платформы. 

Webix Gantt

Вы можете скачать бесплатную версию Gantt, перейдя по этой ссылке. Более детальную информацию, вы можете найти на домашней странице Gantt, на странице JS Gantt документации или в каталоге примеров исходного кода Gantt

DHTMLX Gantt Chart — это тот самый виджет, который обладает всеми вышеуказанными свойствами и не только. Для пользователей Webix у нас есть прекрасная новость: Webix может использоваться вместе с DHTMLX Gantt Chart.

Вы можете добавить DHTMLX Gantt Chart в приложение Webix при помощи всего нескольких строк кода. В результате, вы соедините функции обоих продуктов в одно удобное в использовании и быстро работающее веб-приложение.

 gantt chart+webix

Основные свойства Gantt:

  • интуитивно понятный пользовательский интерфейс
  • полная кастомизация
  • сортировка и фильтрация
  • гибкий API
  • 3 типа связывания заданий: финиш-старт, старт-старт, финиш-финиш

Чтобы узнать больше о DHTMLX Gantt Chart, прочитайте его детальное описание.

Итак, давайте интегрируем DHTMLX Gantt Chart в ваше приложение Webix.

Во-первых, загрузите все необходимые файлы из репозитория сторонних компонентов, чтобы связать ваше приложение с этой сторонней библиотекой.

Во-вторых, вам необходимо добавить компонент Gantt в ваше приложение с помощью следующей строки кода:

<script type="mce-text/javascript" src="components/gantt/gantt.js"></script>

В-третьих, инициализируйте view:

//путь к папке, откуда будут автоматически загружаться дополнительные библиотеки
webix.codebase = "./components/";

webix.ui({
view:"dhx-gantt",
init:function(){...},
ready:function(){
gantt.parse(tasks); //добавление заданий
}
});

Свойства Gantt:

  • init — задает функции для выполнения инициализации;
  • ready — определяет функцию, которая запускается после полной загрузки компонента.

Как видите, посредством нескольких безболезненных манипуляций вы сможете добавить DHTMLX Gantt Chart в ваше приложение Webix. Это будет отличный симбиоз!

Попробуйте разработать свое веб-приложение, используя Gantt. Подробная техническая информация находится в документации Webix и DHTMLX.