dhtmlxGantt с React
Для работы с этим руководством полезно знать основы React. Если вы новичок в React, возможно, вам стоит ознакомиться с их документацией для введения.
DHTMLX Gantt отлично работает с React, и мы подготовили несколько примеров, чтобы показать, как его можно использовать. Вы можете найти примеры онлайн на Replit или взглянуть на демо на GitHub.
Создание проекта
Перед началом убедитесь, что у вас установлен Node.js.
Чтобы создать базовый проект на React, вы можете выполнить следующую команду:
npx create-vite my-react-gantt-app --template react
Установка зависимостей
После создания проекта перейдите в каталог приложения (в этом примере он называется my-react-gantt-app) с помощью:
cd my-react-gantt-app
Затем установите необходимые зависимости и запустите сервер разработки. В зависимости от вашего менеджера пакетов:
- Для yarn:
yarn install
yarn dev
- Для npm:
npm install
npm run dev
Ваш React проект теперь должен работать на http://localhost:5173.
Создание Gantt
Далее вам нужно включить код DHTMLX Gantt. Остановите приложение, нажав Ctrl+C в терминале, затем приступайте к установке пакета Gantt.
Шаг 1. Установка пакета
Для PRO версий библиотеки вы можете установить их из нашего приватного репозитория. Следуйте этим инструкциям, чтобы получить доступ.
Если вы используете Evaluation версию, установите её с помощью одной из этих команд:
- Используя npm:
npm install @dhx/trial-gantt
- Используя yarn:
yarn add @dhx/trial-gantt
Кроме того, zip-пакет библиотеки структурирован как модуль npm, поэтому вы также можете установить его из локальной папки.
Шаг 2. Создание компонента
Теперь создайте компонент React, чтобы включить диаграмму Gantt в ваше приложение. Начните с создания файла под названием Gantt.jsx в директории src/.
Импорт исходных файлов
В только что созданном файле Gantt.jsx импортируйте необходимые файлы Gantt. В зависимости от того, как вы установили пакет Gantt, пути импорта будут различаться:
- Если установлен из локальной папки:
Gantt.jsx
import { Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
- Если используется пробная версия:
Gantt.jsx
import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
Для этого руководства мы будем использовать trial версию.
Установка контейнера и добавление Gantt
Чтобы отобразить диаграмму Gantt, настройте контейнер для неё. Файл Gantt.jsx должен выглядеть так:
Gantt.jsx
import { useEffect, useRef } from "react";
import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
export default function GanttView() {
let container = useRef();
useEffect(() => {
let gantt = Gantt.getGanttInstance();
gantt.init(container.current);
return () => {
gantt.destructor();
container.current.innerHTML = "";
};
}, []);
return <div ref={container} style={ {width: "100%", height: "100%"} }></div>;
}
Шаг 3. Добавление Gantt в приложение
Теперь интегрируйте компонент Gantt в приложение. Откройте src/app.jsx и замените содержимое по умолчанию следующим кодом:
src/app.jsx
import Gantt from "./Gantt";
function App() {
return <Gantt/>;
}
export default App;
Чтобы убедиться, что контейнер Gantt занимает всю страницу, удалите стили по умолчанию в index.css (расположенном в src/) и добавьте следующее:
src/index.css
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
}
Когда вы перезапустите приложение, вы должны увидеть пустую диаграмму Gantt на странице:
Шаг 4. Предоставление данных
Чтобы заполнить диаграмму Gantt данными, создайте файл data.js в директории src/ и добавьте следующее:
src/data.js
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;
}
Затем передайте данные в качестве props в компонент Gantt в App.jsx:
App.jsx
import Gantt from "./Gantt";
import { getData } from "./data.js";
function App() {
return <Gantt tasks={getData()} />;
}
export default App;
Далее используйте props в методе gantt.parse() внутри компонента Gantt:
Gantt.jsx
import { useEffect, useRef } from "react";
import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
export default function GanttView(props) {
let container = useRef();
useEffect(() => {
let gantt = Gantt.getGanttInstance();
gantt.init(container.current);
gantt.parse(props.tasks);
return () => {
gantt.destructor();
container.current.innerHTML = "";
};
}, []);
return <div ref={container} style={ {width: "100%", height: "100%"} }></div>;
}
Теперь, когда вы перезагрузите приложение, диаграмма Gantt отобразит задачи:
Шаг 5. Сохранение данных
Для обработки изменений в диаграмме Gantt вы можете использовать dataProcessor. Этот обработчик позволяет осуществлять связь с серверной частью. Вы можете объявить его как функцию или объект маршрутизатора. dhtmlxGantt поддерживает ответы Promise, обеспечивая плавную обработку действий.
Вот как вы можете создать DataProcessor с использованием API createDataProcessor():
gantt.createDataProcessor(function(entity, action, data, id) {
gantt.message(`${entity} ${action}`);
});
Если ваш сервис изменяет ID задачи при создании новой записи, убедитесь, что Promise возвращает объект с {id: databaseId} или {tid: databaseId}. Это гарантирует, что Gantt обновит запись с новым ID из базы данных. Для получения дополнительной информации обратитесь к документации по серверной части.
Вот и всё! Ваш React Gantt теперь готов. Не стесняйтесь изучать полное демо на GitHub.
Атаки XSS, CSRF и SQL-инъекции
Имейте в виду, что Gantt сам по себе не включает меры безопасности против угроз, таких как SQL-инъекции, XSS или CSRF атаки. Ответственность за защиту приложения лежит на разработчиках серверной части.
Для советов по улучшению безопасности вашего приложения ознакомьтесь со статьей Безопасность приложения.
К началу