Обновление до версии 9.0 включает несколько изменений, которые могут привести к несовместимости.
CSS-скины (темы) были полностью переработаны и теперь используют CSS-переменные. Хотя структура HTML компонента и имена CSS-классов в большинстве своем остались без изменений, CSS-стили, написанные для более старых версий Gantt, могут больше не работать должным образом с версией 9.0.
Например, следующий стиль использовался для окрашивания задач в зависимости от их приоритета:
<style> /* общие стили для переопределения цвета границ/прогресса */
.gantt_task_line{
border-color: rgba(0, 0, 0, 0.25);
}
.gantt_task_line .gantt_task_progress {
background-color: rgba(0, 0, 0, 0.25);
}
/* высокий */
.gantt_task_line.high {
background-color: #03A9F4;
}
.gantt_task_line.high .gantt_task_content {
color: #fff;
}
/* средний */
.gantt_task_line.medium {
background-color: #f57730;
}
.gantt_task_line.medium .gantt_task_content {
color: #fff;
}
/* низкий */
.gantt_task_line.low {
background-color: #e157de;
}
.gantt_task_line.low .gantt_task_content {
color: #fff;
}
</style>
Начиная с версии 9.0, тот же эффект достигается с помощью следующего стиля:
<style> /* высокий */
.gantt_task_line.high {
--dhx-gantt-task-background: #d96c49;
--dhx-gantt-task-color: #fff;
}
/* средний */
.gantt_task_line.medium {
--dhx-gantt-task-background: #f57730;
--dhx-gantt-task-color: #fff;
}
/* низкий */
.gantt_task_line.low {
--dhx-gantt-task-background: #fff;
--dhx-gantt-task-color: #fff;
}
</style>
Проверьте доступные переменные на странице Настройка Скинов.
Миграция, вероятно, потребует обновления существующего CSS для достижения требуемого дизайна.
Все темы теперь встроены в единый файл dhtmlxgantt.css.
Чтобы активировать определенный скин, используйте свойство gantt.skin
:
gantt.skin = "material";
Или метод setSkin:
gantt.setSkin("material");
Обратите внимание, что gantt.setSkin()
перерисует Gantt.
Если вы используете скин, отличный от terrace, требуются следующие шаги миграции:
1) Замените CSS файл скина на файл dhtmlxgantt.css
:
<!-- СТАРЫЙ -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt_material.css" type="text/css">
<!-- НОВЫЙ -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt.css" type="text/css">
2) Включите нужный скин из JavaScript:
gantt.setSkin("material");
gantt.init("gantt_here");
Ранее добавление базовых линий требовало ручного кодирования с использованием API gantt.addTaskLayer
. В Gantt 9.0 мы добавили встроенную поддержку базовых линий вместе с
сроками и ограничениями задач.
Если вы хотите отключить стандартные настройки и отрисовывать базовые линии и сроки вручную, вы можете использовать соответствующие параметры конфигурации: baselines и deadlines:
// отключение встроенной функциональности базовых линий
gantt.config.baselines = false;
// отключение встроенной функциональности сроков
gantt.config.deadlines = false;
Встроенное отображение ограничений задач также можно отключить с помощью расширенной конфигурации auto_scheduling:
gantt.config.auto_scheduling = {
enabled: true,
show_constraints: false };
Это отключает стандартное отображение ограничений задач, сохраняя при этом активную функциональность автоматического планирования.
Начиная с версии 9.0, метки временной шкалы по умолчанию являются липкими. Это означает, что метки остаются видимыми на экране при прокрутке, следуя за областью просмотра, пока они не исчезнут естественным образом. В предыдущих версиях метки были центрированы внутри своих ячеек и не оставались видимыми при прокрутке.
Если вам нужно вернуться к старому поведению и отключить липкие метки, вы можете установить свойство sticky
объекта scale в false:
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y", sticky: false},
{unit: "month", step: 1, format: "%F", sticky: false},
{unit: "day", step:1, format: "%j", sticky: false}
];
Библиотека Bluebird была исключена из пакета Gantt. Promise теперь использует нативную реализацию Promise.
В предыдущих версиях DHTMLX Gantt изменения в назначениях ресурсов отправлялись на сервер как свойства объектов задач, что в некоторых случаях усложняло интеграцию с API сервера.
Начиная с DHTMLX Gantt v8.0, изменения, внесенные в ресурсы и назначения ресурсов, могут направляться через dataProcessor. Проверьте раздел Маршрутизация CRUD действий ресурсов и назначений ресурсов.
С версии 8.0 функциональность импорта/экспорта включена в библиотеку Gantt.
Таким образом, если вы уже включили https://export.dhtmlx.com/gantt/api.js на своей странице для активации онлайн-сервиса экспорта, например:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
Тогда вам нужно удалить файл и включить расширение export_api с помощью метода gantt.plugins:
gantt.plugins({
export_api: true
});
С версии 8.0 следующие устаревшие имена классов были удалены и заменены новыми:
Версия 7.1 не вводит никаких изменений, которые могли бы потребовать модификации существующего кода.
Есть небольшое визуальное изменение в том, как отображаются вехи, которое можно отменить с помощью кода при необходимости. Крупные проекты, использующие панель ресурсов, могут испытывать возможное снижение производительности из-за новой логики назначений ресурсов, это можно смягчить, отключив ненужную логику.
Размер элементов вех изменился по сравнению с предыдущими версиями, чтобы вехи имели такую же высоту, как и обычные полосы.
Если вы хотите, чтобы вехи выглядели так же, как в предыдущих версиях, вы можете настроить высоту элементов вех, используя свойство bar_height:
{
id:23, text:"Mediate milestone", start_date:"13-04-2018",
type:"milestone", parent:"15", bar_height: 35
}
Версия 7.1 добавляет сложную логику к назначениям ресурсов, которая позволяет указывать даты назначений ресурсов и работать с ними через DataStore. Это не должно повлиять на существующий код, но изменения могут добавить заметную нагрузку на производительность при расчетах ресурсов.
Если вам не нужно назначать ресурсы на конкретные даты задач, вы можете отключить новую функциональность, используя конфигурацию process_resource_assignments, чтобы улучшить производительность:
gantt.config.process_resource_assignments = false;
Следующие свойства объекта задачи теперь обрабатываются Gantt и влияют на отображение задач:
Если у вас есть пользовательские свойства с такими же именами, вам следует их переименовать, чтобы избежать конфликтов.
Gantt выполнял глубокое копирование объектов данных при разборе данных с v6.3.2 до v7.1.
Начиная с версии 7.1, функциональность по умолчанию отключена.
Вы можете включить старое поведение, установив gantt.config.deepcopy_on_parse в true:
gantt.config.deepcopy_on_parse = true;
Свойство gantt.config.task_height устарело с версии 7.1. Несмотря на то, что свойство будет продолжать работать, и конфигурация task_height будет использоваться, если указана, вам лучше использовать новый вариант gantt.config.bar_height:
gantt.config.bar_height = 50;
Новейшее обновление версии 7.0 вводит два основных изменения в структуру пакета Gantt:
1) Все файлы расширений теперь включены в файл dhtmlxgantt.js. Таким образом, чтобы активировать любое из дополнительных расширений, предоставленных dhtmlxGantt, вам нужно использовать вызов API.
<script src="../codebase/dhtmlxgantt.js"></script>
<script src="../codebase/ext/dhtmlxgantt_auto_scheduling.js"></script>
или
import "dhtmlx-gantt";
import "dhtmlx-gantt/ext/dhtmlxgantt_auto_scheduling";
Тогда вам нужно удалить файл расширения и включить расширение, используя метод gantt.plugins:
gantt.plugins({
auto_scheduling: true
});
См. полный список расширений здесь.
Если вы используете модифицированную версию файлов расширений или разработали собственные расширения, включите их как файлы на странице, и они будут работать.
Обратите внимание, что расширения dhtmlxgantt_smart_rendering.js и dhtmlxgantt_csp.js полностью удалены и не нуждаются в ручном включении.
2) Все локали теперь встроены в файл dhtmlxgantt.js. Чтобы активировать их, используйте вызов API.
gantt.i18n.setLocale("de");
Во всех версиях до 7.0 рабочие часы по умолчанию были с 8:00 до 17:00, то есть 9 часов в день.
Начиная с версии 7.0, рабочие часы составляют 8:00-12:00, 13:00-17:00, то есть 8 часов в день.
Если вы хотите вернуться к предыдущим настройкам, вам нужно будет установить их вручную:
gantt.setWorkTime({hours: [8, 17]});
Расширение ext/dhtmlxgantt_csp.js больше не требуется, так как оно удалено и заменено на csp config, который включен по умолчанию; расширение должно быть удалено из Gantt.
Поскольку свойство csp добавлено в библиотеку dhtmlxGantt, все элементы Gantt будут получать валидные HTML 5 атрибуты, которые могут быть использованы в любом браузере, поддерживающем HTML5 doctypes.
Поэтому мы рекомендуем обновить уже существующие атрибуты на новые:
Однако старые атрибуты включены в разметку, так что если вы не измените имена атрибутов, ваш код продолжит работать.
Ранее выравнивание ячеек грида достигалось через display:inline-block
. Начиная с версии 7.0, используется display:flex
, и ячейки располагаются внутри flex-контейнера.
Это изменение не влияет на пользовательский интерфейс, видимый пользователю (он остается 100% идентичным) и не должно вызывать проблем с миграцией. Однако некоторые регрессии в стилизации ячеек грида могут быть связаны с этим обновлением.
Устаревшие в версии 6.2 конфигурация и шаблоны удалены в версии 7.0 и заменены новыми:
Если вы уже определили старые имена в своем коде, они продолжат работать. В противном случае используйте новую версию API.
Начиная с версии 6.3 расширение ext/dhtmlxgantt_multiselect.js автоматически позволяет горизонтально перемещать несколько задач, выбранных одновременно. Если вы хотите отключить эту функциональность, используйте свойство drag_multiple и установите его в false (по умолчанию оно включено).
gantt.config.drag_multiple = false;
До версии 6.3 шрифт Google Roboto был включен в 'Material' skin dhtmlxGantt через оператор import
.
Начиная с версии 6.3, импорт был удален, поэтому вам нужно добавить шрифт Roboto
вручную:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">
Ранее вы могли использовать любые произвольные имена для различных файлов библиотеки dhtmlxGantt, включенных в приложение на основе RequireJS:
requirejs.config({
paths: {
"gantt": "../../codebase/dhtmlxgantt",
"tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
"marker": "../../codebase/ext/dhtmlxgantt_marker",
"locale_de": "../../codebase/locale/locale_de",
},
shim: {
"tooltip": ["gantt"],
"marker": ["gantt"],
"locale_de": ["gantt"],
}
});
requirejs(["gantt", "tooltip", "marker", "locale_de"],
function (dhx) {
var gantt = dhx.gantt;
...
});
Начиная с версии 6.3 имена модулей должны быть фиксированными в соответствии со структурой папок библиотеки dhtmlxGantt:
requirejs.config({
paths: {
"dhtmlxgantt": "../../codebase/dhtmlxgantt",
"ext/dhtmlxgantt_tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
"ext/dhtmlxgantt_critical_path": "../../codebase/ext/dhtmlxgantt_critical_path",
"locale/locale_de": "../../codebase/locale/locale_de",
},
shim: {
"ext/dhtmlxgantt_tooltip": ["dhtmlxgantt"],
"ext/dhtmlxgantt_critical_path": ["dhtmlxgantt"],
"locale/locale_de": ["dhtmlxgantt"],
}
});
requirejs(["dhtmlxgantt", "ext/dhtmlxgantt_tooltip", "ext/dhtmlxgantt_critical_path",
"locale/locale_de"],
function (dhx) {
var gantt = dhx.gantt;
...
});
Убедитесь, что имя модуля для любого файла внутри пакета указано как относительный путь внутри папки 'codebase' пакета плюс имя файла, например:
основная библиотека:
расширения:
локали:
До версии 6.3 минимальные и максимальные значения date инлайн-редактора были ограничены датами, видимыми на временной шкале, если не были предоставлены пользовательские минимальные/максимальные значения.
Начиная с версии 6.3, нет ограничений по умолчанию для минимальных и максимальных значений редакторов дат.
Чтобы восстановить прежнее поведение, вы можете указать динамические значения min/max:
const dateEditor = {type: "date", map_to: "start_date",
min: function(taskId){
return gantt.getState().min_date
},
max: function( taskId ){
return gantt.getState().max_date
}
};
Обновление до версии 6.2 в целом совместимо с версией 6.1 и не должно требовать каких-либо изменений в коде. Однако, некоторые параметры поведения компонента были изменены (старое поведение может быть восстановлено через конфиг), и некоторые API были устаревшими.
Функциональность умной отрисовки была обновлена и теперь встроена в компонент. Теперь она должна работать как в основной временной шкале, так и в панелях ресурсов. Отныне все временные шкалы должны отображать только строки и ячейки, которые в данный момент видимы.
Умную отрисовку можно отключить через конфигурацию smart_rendering, что вернет Gantt к поведению по умолчанию версии 6.1:
gantt.config.smart_rendering = false;
Расширение dhtmlxgantt_smart_rendering больше не требуется и должно быть удалено из Gantt. Само расширение все еще доступно в пакете на случай проблем с совместимостью. Если расширение добавлено на страницу, Gantt вернется к режиму умной отрисовки версии 6.1.
Поведение конфигурации static_background также было обновлено. Начиная с версии 6.2 оно будет отображать фон PNG И любые ячейки, к которым присоединен CSS-класс через функцию шаблона.
Если вам нужно вернуться к поведению версии 6.1, используйте конфигурацию static_background_cells:
gantt.config.static_background_cells = false;
Конфигурация временной шкалы была упрощена. Вместо указания множества настроек для каждой шкалы отдельно, теперь следует использовать всего одну опцию конфигурации scales, которая будет содержать ряд объектов шкалы с их настройками.
В общем, следующие API временной шкалы устарели:
Например, код ниже:
gantt.config.scale_unit = "day";
gantt.config.step = 1;
gantt.config.date_scale = "%d %M";
gantt.templates.date_scale = null;
gantt.config.subscales = [];
Теперь выглядит так:
gantt.config.scales = [ { unit:"day", step: 1, format: "%d %M"} ];
Шаблон, используемый для определения CSS-класса, применяемого к ячейкам области временной шкалы, переименован следующим образом:
Пример использования переименованного шаблона:
<style>
.weekend{ background: #f4f7f4 !important;}
</style>
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
Ниже представлена схема замены ранее использовавшихся API:
Начиная с версии 6.2 значения по умолчанию для конфигурации xml_date, и шаблонов xml_date и xml_format не определены. Таким образом, если вы не назначили им значения, они не будут работать.
Однако Gantt продолжит использовать старые имена конфигурации и шаблонов, так что если вы переопределили эти API в своем коде, они будут работать как прежде. Например:
// будет работать корректно
gantt.templates.xml_date = function(datestring){
return new Date(datestring);
};
Конфигурация gantt.config.api_date и шаблон gantt.templates.api_date удалены из API, так как они не использовались внутри кода Gantt. Если вы использовали их в своем коде, вам нужно объявить их снова.
gantt.config.api_date = "%d-%m-%Y %H:%i";
gantt.templates.api_date = gantt.date.date_to_str(gantt.config.api_date);
Расширение dhtmlxgantt_auto_scheduling.js было обновлено с функциональностью ограничений задач. Поскольку эта функция изменяет поведение автоматического планирования по умолчанию, Gantt поддерживает режим совместимости, который позволяет восстановить прежнее поведение и не учитывать ограничения задач во время автоматического планирования.
Чтобы включить режим совместимости, используйте следующую конфигурационную опцию:
gantt.config.auto_scheduling_compatibility = true;
До версии 6.1 тултипы отображались только внутри области временной шкалы. После выпуска версии 6.1 отображение тултипов не ограничено, и тултип следует за движением указателя мыши.
При необходимости вы можете восстановить прежнее поведение, используя код ниже до инициализации Gantt:
gantt.attachEvent("onGanttReady", function(){
var tooltips = gantt.ext.tooltips;
tooltips.tooltip.setViewport(gantt.$task_data);
});
gantt.init("gantt_here");
gantt.parse(demo_tasks);
В версии 6.0 метод getSlack() устарел. Вместо него добавлены два метода:
Методы, помеченные как устаревшие в версии 4.0, перестали работать в версии 6.0. Определение объекта dhtmlx было удалено из dhtmlxgantt.js.
Если вы используете какие-либо устаревшие методы, вам нужно заменить их на поддерживаемые реализации в соответствии с таблицей ниже. Изменения в аргументах или поведении методов не вносились.
Устаревшие методы | Рабочие методы |
dhtmlx.alert | gantt.alert |
dhtmlx.confirm | gantt.confirm |
dhtmlx.modalbox | gantt.modalbox |
dhtmlx.uid | gantt.uid |
dhtmlx.copy | gantt.copy |
dhtmlx.mixin | gantt.mixin |
dhtmlx.defined | gantt.defined |
dhtmlx.bind | gantt.bind |
dhtmlx.assert | gantt.assert |
window.dataProcessor | gantt.dataProcessor |
Версия 4.0 вводит некоторые изменения в публичный API, а именно:
В версии 4.x включена обратная совместимость с старым API, так что код, написанный для версии 3.3 и ранее, продолжит работать. Однако в некоторых случаях требуются изменения. Как правило, все глобальные объявления, кроме window.gantt и window.Gantt (только версия для предприятия), устарели и будут удалены в версии 5.0.
Есть методы, которые были устаревшими. Они продолжат работать в версии 4.x, но будут вызывать предупреждение в консоли (не видимо для конечных пользователей) каждый раз, когда они вызываются.
Обзор:
Если вы используете эти методы, ваше приложение продолжит работать после обновления до версии 4.0 без необходимости вносить немедленные изменения. В будущем мы рекомендуем обновить их до новой версии API.
Полный список устаревших методов включает:
До версии 3.3 | С версии 4.0 |
dhtmlx.alert | gantt.alert |
dhtmlx.confirm | gantt.confirm |
dhtmlx.modalbox | gantt.modalbox |
dhtmlx.uid | gantt.uid |
dhtmlx.copy | gantt.copy |
dhtmlx.mixin | gantt.mixin |
dhtmlx.defined | gantt.defined |
dhtmlx.bind | gantt.bind |
dhtmlx.assert | gantt.assert |
window.dataProcessor | gantt.dataProcessor |
Некоторые методы стали устаревшими и больше не будут использоваться в версии 4.x. Если вы все еще используете эти методы или объекты, вам нужно либо изменить код приложения, либо включить файл dhtmlxgantt_deprecated.js на страницу.
Обзор:
Полный список устаревшего API приведен ниже:
До версии 3.3 | С версии 4.0 |
window.dhtmlxEvent | gantt.event |
window.dhtmlxDetachEvent | gantt.eventRemove |
window.dhx4.isIE | gantt.env.isIE |
window.dhx4.isIE6 | gantt.env.isIE6 |
window.dhx4.isIE7 | gantt.env.isIE7 |
window.dhx4.isIE8 | gantt.env.isIE8 |
window.dhx4.isOpera | gantt.env.isOpera |
window.dhx4.isChrome | gantt.env.isChrome |
window.dhx4.isKHTML | gantt.env.isKHTML |
window.dhx4.isFF | gantt.env.isFF |
window.dhx4.isIPad | gantt.env.isIPad |
1) Чтобы предотвратить конфликты CSS с dhtmlxScheduler, имена классов, которые использовались обоими компонентами, были переименованы в dhtmlxGantt (все классы были связаны с lightbox). Если вы настроили стилизацию для lightbox, миграция будет заключаться в переименовании в соответствующие CSS классы.
Есть 2 переименованных шаблона:
Если у вас возникают трудности с миграцией CSS классов, пожалуйста, посмотрите полный список переименованных классов здесь.
2) Значения по умолчанию для конфигураций buttons_right и buttons_left были изменены следующим образом:
gantt.config.buttons_left = [
"dhx_save_btn",
"dhx_cancel_btn"
];
gantt.config.buttons_right = [
"dhx_delete_btn"
],
-->
gantt.config.buttons_left = [
"gantt_save_btn",
"gantt_cancel_btn"
];
gantt.config.buttons_right = [
"gantt_delete_btn"
];
Старые конфигурации ("dhx_save_btn", "dhx_cancel_btn", "gantt_delete_btn") все еще будут работать. Изменения не нарушают существующее поведение.
3) Следующие функции теперь доступны только в коммерческой или корпоративной версии компонента (недоступны в GPL версии dhtmlxGantt):
1) Разнообразие объектов (GanttProjectInfo, GanttTaskInfo, GanttChart, GanttProject, GanttTask) заменены одним статичным объектом - gantt.
Объект gantt содержит набор методов и 2 основных свойства: config и templates.
2) dhtmlxGantt инициализируется через метод init
var gantt = new GanttChart()
-> gantt.init("gantt_div")
.
3) Вместо GanttProject и GanttTask, данные хранятся как массив простых объектов с набором обязательных свойств и любых пользовательских свойств:
{
data:[
{id:1, text:"Project #2", start_date:"01-04-2013", duration:18,
progress:0.4, open: true},
{id:2, text:"Task #1", start_date:"02-04-2013", duration:8,
progress:0.6, parent:1},
{id:3, text:"Task #2", start_date:"11-04-2013", duration:8,
progress:0.6, parent:1}
],
links:[
{ id:1, source:1, target:2, type:"1"},
{ id:2, source:2, target:3, type:"0"},
{ id:3, source:3, target:4, type:"0"},
{ id:4, source:2, target:5, type:"2"},
]
}
4) Формат XML был изменен, но старый формат XML все еще может быть загружен.
gantt.load("tasks.xml","oldxml");
Related sample: Loading data in Gantt 1.6 format
5) Объекты во время проектирования:
6) Объекты во время выполнения:
dhtmlxGantt 2.0 не использует разные типы для объектов проекта и задачи. Вместо этого любой объект задачи может иметь 1 родительский объект и любое количество дочерних задач.
Список методов для получения родительских/дочерних объектов:
Идентификатор родительской задачи может быть получен как gantt.getTask(task_id).parent. Корневой элемент не имеет свойства 'parent'.