gantt.attachEvent(“onBeforeTaskDisplay”, function (id, task) {
if (task.parent > 0) {
// 判断是否为子任务
setTimeout(function () {
let taskBar = gantt.getTaskNode(id);
if (taskBar !== null) {
// 确保任务条存在
taskBar.style.display = “none”; // 隐藏子任务的日期条
// taskBar.parentNode.removeChild(taskBar);
} else {
console.log(“任务条不存在！”, id); // 输出调试信息
}
}, 120); // 延迟 0 毫秒，确保任务条已渲染
setTimeout(function () {
let taskRow = gantt.getTaskRowNode(id);
if (taskRow !== null) {
let elements = taskRow.querySelectorAll(‘[data-column-index=“1”]’);
// 遍历所有匹配的元素并隐藏它们
elements.forEach(function (element) {
// 隐藏当前元素
element.style.display = “none”;
// element.parentNode.removeChild(element);
});
let elements1 = taskRow.querySelectorAll(‘[data-column-index=“2”]’);
// 遍历所有匹配的元素并隐藏它们
elements1.forEach(function (element) {
// 隐藏当前元素
element.style.display = “none”;
// element.parentNode.removeChild(element);
});
// let elements3 = taskRow.querySelectorAll(‘[data-column-index=“5”]’);
// // 遍历所有匹配的元素并隐藏它们
// elements3.forEach(function (element) {
// // 删除
// element.style.display = ‘none’;
// // element.parentNode.removeChild(element);
//
// });
let elements4 = taskRow.querySelectorAll(‘[data-column-index=“0”]’);
// 遍历所有匹配的元素并隐藏它们
elements4.forEach(function (element) {
// 任务名称宽度拉长
element.style.width = “450px”;
});
}
}, 120); // 延迟 0 毫秒，确保任务条已渲染
}
else {
setTimeout(function () {
let taskRow = gantt.getTaskRowNode(id);
if (taskRow !== null) {
let elements1 = taskRow.querySelectorAll(‘[data-column-index=“3”]’);
elements1.forEach(function (element) {
if (element.getAttribute(“aria-label”) === “进行中”) {
element.style.background = “#FFC107”;
} else if (element.getAttribute(“aria-label”) === “未开始”) {
element.style.background = “#808080”;
} else if (element.getAttribute(“aria-label”) === “延期”) {
element.style.background = “#FF9800”;
} else if (element.getAttribute(“aria-label”) === “已完成”) {
element.style.background = “#4CAF50”;
} else if (element.getAttribute(“aria-label”) === “暂停”) {
element.style.background = “#2196F3”;
} else if (element.getAttribute(“aria-label”) === “暂缓”) {
element.style.background = “#9C27B0”;
}
});
}
}, 120);
}
return true;
});这是代码，要咋修改，求助
Hello,
Please ask the questions on the forum only in English so that everyone can understand them.
The first page is displayed only after refreshing, and the data styles behind it disappear when the mouse slides down
The onBeforeTaskDisplay event handler is not supposed to be used to change tasks. Moreover, you shouldn’t use it to add custom styles.
If you modify the DOM elements, the changes will be lost next time Gantt renders the data.
If you want to add custom styles to the task rows in the grid, you need to use the grid_row_class template:
https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html
There, you can return a custom class name for the grid row and use it as a selector in custom style rules.
Here are examples:
https://snippet.dhtmlx.com/5/194ec0e28
https://snippet.dhtmlx.com/zietxgrd
https://snippet.dhtmlx.com/5/049a2fe47
http://snippet.dhtmlx.com/27b47a1b0
“grid_row_class cannot obtain the div style based on the task ID”
Hello,
The grid_row_class template has the task argument:
https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html#:~:text=Task-,the%20task%20object,-Example
This means you can return a class name that includes the task ID.
Here is an example:
// JS
gantt.templates.task_row_class = function (start, end, task) {
return "task" + task.id
};
// CSS
.task1,
.task1.odd{
background: wheat;
}
Here is the snippet:
https://snippet.dhtmlx.com/1197f73j
If you want to return the class name that only has a number, this is not going to work because the class names cannot start with a number:
https://www.w3.org/TR/CSS21/syndata.html#characters:~:text=In%20CSS%2C%20identifiers%20(including%20element%20names%2C%20classes%2C%20and%20IDs%20in%20selectors)%20can%20contain%20only%20the%20characters%20[a-zA-Z0-9]%20and%20ISO%2010646%20characters%20U%2B00A0%20and%20higher%2C%20plus%20the%20hyphen%20(-)%20and%20the%20underscore%20(_)%3B%20they%20cannot%20start%20with%20a%20digit%2C%20two%20hyphens%2C%20or%20a%20hyphen%20followed%20by%20a%20digit