怎么一行显示多个任务
时间: 2023-09-14 18:02:52 浏览: 123
如果您希望在 dhtmlx Gantt 中一行显示多个任务,可以使用 `multi_task` 插件。该插件允许将同一行中的多个任务合并为一个单元格,从而实现一行显示多个任务的效果。以下是使用 `multi_task` 插件的示例代码:
```javascript
gantt.config.show_progress = false; // 隐藏任务进度条
gantt.config.row_height = 40; // 设置行高
gantt.config.scale_height = 40; // 设置刻度尺高度
gantt.config.scale_unit = "day"; // 设置刻度尺单位
gantt.config.step = 1; // 设置刻度尺步长
gantt.config.columns = [ // 设置列
{name: "text", label: "Task name", width: "*", tree: true},
{name: "start_date", label: "Start time", align: "center"},
{name: "end_date", label: "End time", align: "center"},
{name: "duration", label: "Duration", align: "center"},
{name: "add", width: 44}
];
// 启用 multi_task 插件
gantt.plugins({
multi_task: true
});
// 设置任务的 `multi_task` 属性
gantt.attachEvent("onBeforeTaskDisplay", function(task) {
task.multi_task = true;
return true;
});
```
在上述代码中,我们通过设置 `multi_task` 插件和任务的 `multi_task` 属性,实现了一行显示多个任务的效果。如果您需要在任务单元格中显示其他信息,可以在任务的 `text` 属性中添加 HTML 标签。例如:
```javascript
gantt.parse([
{
id: 1,
text: "<div>Task A</div><div>Task B</div>",
start_date: "2021-05-01",
duration: 5
},
{
id: 2,
text: "<div>Task C</div><div>Task D</div>",
start_date: "2021-05-03",
duration: 3
}
]);
```
在上述代码中,我们在任务的 `text` 属性中添加了多个 `<div>` 标签,从而实现了在任务单元格中显示多个任务的效果。