dhtmlxGantt с Svelte

Для работы с этим руководством будет полезно иметь базовое понимание концепций и шаблонов Svelte. Если вы новичок в Svelte, возможно, вам стоит ознакомиться с документацией Svelte для быстрого старта.

DHTMLX Gantt безупречно работает с Svelte. Подготовлены некоторые примеры, показывающие, как интегрировать DHTMLX Gantt с Svelte. Вы можете просмотреть онлайн-примеры на Replit.

Для более подробной демонстрации, посмотрите репозиторий на GitHub.

Настройка проекта

Перед началом убедитесь, что у вас установлены Vite (опционально) и Node.js.

Чтобы начать проект Svelte, вы можете использовать Svelte с Vite, выполнив команду:

npm create vite@latest

Более подробную информацию о запуске нового проекта можно найти в документации Svelte.

Установка зависимостей

Перейдите в каталог приложения. В этом примере проект называется gantt-svelte, и опция svelte выбрана во время настройки. Используйте следующие команды:

cd gantt-svelte

Далее установите зависимости и запустите приложение, используя предпочитаемый менеджер пакетов:

Для yarn:

yarn install
yarn dev

Для npm:

npm install
npm run dev

После выполнения этих действий проект Svelte должен быть запущен по адресу http://localhost:5173.

Gantt Svelte app running

Добавление Gantt

Теперь пришло время включить код DHTMLX Gantt. Начните с остановки приложения с помощью Ctrl+C в командной строке. Затем перейдите к установке пакета Gantt.

Шаг 1: Установка пакета

PRO версии библиотеки могут быть установлены через npm/yarn из частного репозитория. Инструкции по доступу к репозиторию доступны здесь.

После получения Evaluation версии Gantt, установите её с помощью:

Для npm:

npm install @dhx/trial-gantt

Для yarn:

yarn add @dhx/trial-gantt

В качестве альтернативы, вы можете установить библиотеку из локальной папки, если у вас есть zip-пакет. Инструкции доступны здесь.

Шаг 2: Создание компонента Gantt

Необходим новый компонент Svelte для встраивания диаграммы Gantt в приложение. Создайте файл с именем Gantt.svelte в каталоге src/.

Импорт исходных файлов

Откройте Gantt.svelte и импортируйте необходимые файлы Gantt. В зависимости от метода установки пути импорта различаются:

Для установки из локальной папки:

import { Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

Для пробной версии:

import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";

В этом руководстве используется trial версия Gantt.

Установка контейнера и инициализация Gantt

Для отображения диаграммы Gantt необходим контейнер. Вот код:

<script>    import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
    import { onMount } from "svelte";
    import { Gantt } from "@dhx/trial-gantt";
 
    let container;
    onMount(() => {
        let gantt = Gantt.getGanttInstance();
        gantt.init(container);
 
        return () => {
            gantt.destructor();
        };
    });
</script>
 
<div bind:this={container} style="width: 100%; height: 100%;"></div>

Чтобы контейнер Gantt использовал все пространство тела, удалите стандартные стили в app.css (находится в src/) и замените их на:

body, #app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}

Шаг 3: Добавление Gantt в приложение

Добавьте компонент Gantt в приложение, изменив src/App.svelte. Замените стандартное содержимое на:

<script>  import Gantt from "./Gantt.svelte";
</script>
 
<Gantt/>

Когда приложение будет перезапущено, должна появиться пустая диаграмма Gantt:

Gantt Svelte init

Шаг 4: Добавление данных в Gantt

Чтобы заполнить диаграмму Gantt, создайте файл data.js в каталоге src/ и добавьте пример данных:

export function getData() {
  const tasks = {
    data: [
      {
        id: "10",
        text: "Project #1",
        start_date: "01-04-2025",
        duration: 3,
        order: 10,
        progress: 0.4,
        open: true,
      },
      {
        id: "1",
        text: "Task #1",
        start_date: "01-04-2025",
        duration: 1,
        order: 10,
        progress: 0.6,
        parent: "10",
      },
      {
        id: "2",
        text: "Task #2",
        start_date: "02-04-2025",
        duration: 2,
        order: 20,
        progress: 0.6,
        parent: "10",
      },
    ],
    links: [{ id: 1, source: 1, target: 2, type: "0" }],
  };
  return tasks;
}

Передайте эти данные в компонент Gantt в App.svelte:

<script>  import Gantt from "./Gantt.svelte";
  import { getData } from "./data.js";
</script>
 
<Gantt tasks={getData()} />

В компоненте Gantt используйте метод gantt.parse(), чтобы обработать данные:

<script>    import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
    import { onMount } from "svelte";
    import { Gantt } from "@dhx/trial-gantt";
 
    export let tasks;
 
    let container;
    onMount(() => {
        let gantt = Gantt.getGanttInstance();
        gantt.init(container);
        gantt.parse(tasks);
 
        return () => {
            gantt.destructor();
        };
    });
</script>
 
<div bind:this={container} style="width: 100%; height: 100%;"></div>

После обновления приложения диаграмма Gantt должна отобразить задачи:

Gantt tasks

Шаг 5: Обработка изменений данных

Чтобы отслеживать изменения в диаграмме Gantt, используйте обработчик dataProcessor. Этот обработчик взаимодействует с сервером и обрабатывает ответы серверной стороны.

Вот как создать DataProcessor:

gantt.createDataProcessor(function(entity, action, data, id) {
    gantt.message(`${entity} ${action}`);
});

Если сервер изменяет ID задачи после создания новой записи, убедитесь, что Promise возвращает объект вида {id: databaseId} или {tid: databaseId}. Это позволит Gantt обновить запись с новым ID. Для получения дополнительной информации ознакомьтесь с документацией серверной стороны.

Настройка Svelte Gantt завершена. Вы можете изучить полную демонстрацию на GitHub.

Соображения по безопасности

Имейте в виду, что Gantt не обрабатывает безопасность приложения, такую как предотвращение SQL-инъекций, XSS или CSRF-атак. Разработчики несут ответственность за защиту серверной стороны. Для получения советов по улучшению безопасности приложения обратитесь к руководству Безопасность приложения.

К началу