有哪几个平台做网站,专业的网站建设流程,国建设银行e路通网站申,广州现在可以正常出入了吗DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求#xff0c;是最完善的甘特图图表库。
当您声称您的产品具有高级定制功能时#xff0c;客户一定会对产品进行严格测试#xff0c;这个规则当然适用于DHTMLX Gantt…DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。
当您声称您的产品具有高级定制功能时客户一定会对产品进行严格测试这个规则当然适用于DHTMLX Gantt官方技术团队收到了很多关于如何在JavaScript甘特图组件中实现某些外观定制的请求结合实际的案例我们将在本文中为您展示如何在实践中实现这些定制。在上文中点击这里回顾我们主要介绍了JavaScript甘特图用例以及如何可是构建一个JS甘特图本文将继续介绍如何构建JS甘特图。
DHTMLX Gantt v8.0正式版下载
为任务分配资源
下一个特性是将资源(在我们的例子中是员工)分配给任务的能力DHTMLX Gantt以广泛的资源管理能力而闻名包括一个单独的资源面板。
但是如果您需要对单个元素进行更简单的配置则可以使用简化形式的资源。
在我们的演示中有一个数组其中指定了员工的姓名和照片这意味着这些数据可以从服务器加载。
const resourceData [
{ key: 1, label: John },
{ key: 2, label: Mike },
{ key: 3, label: Anna },
{ key: 4, label: Bill },
{ key: 5, label: Floe },
]
DHTMLX Gantt有一个lightbox部分使您能够为一个任务分配多个资源并指定资源值小时天材料等。为了使其正常工作您需要在options参数中指定一个带有资源的数组。
{ name: resources, type: resources, map_to: owners, options: resourceData, default_value: 8 },
如果使用简单的甘特配置(gantt.config.resources) 并且使用load()或parse()方法从服务器加载资源Gantt将自动向lightbox部分添加必要的参数。
当使用自定义配置时数组必须包含带有key和label参数的对象。
在我们的演示中还显示了网格部分中分配给任务的资源(员工照片)。为此需要使用列配置的模板函数其中将返回getOwnerPics函数的值。
name: owners, label: Owners, resize: true, width: 75, template: function (task) {
return getOwnerPics(task);
}
在这个函数中有必要使用owner任务属性其中指定了分配的资源。如果存在分配则应该将资源ID添加到单独的所有者数组中。
下一步是用资源数据遍历数组如果资源ID在所有者数组中则获取带有照片的属性并将其添加到images变量中之后返回这个包含所有员工照片的变量。
function getOwnerPics(task) {
let images ;const owners [];
(task.owners || []).forEach(function (el) {
owners.push(el.resource_id);
})resourceData.forEach(function (resource) {
if (owners.indexOf(resource.key) -1) {
images resource.img || ;
}
})return images;
}
任务栏中的任务名称和资源
如果您看了Gantt演示可以看到一些任务栏中显示了任务名称和资源图像。如果它们不适合这些元素将显示在任务栏的右侧。
要确定任务名称和员工图像是否可以放置在任务栏中需要应用detectOverflow函数。在这个函数中首先使用getTaskPosition()方法来获取任务栏的坐标。因为您只需要任务栏的宽度所以从getTaskPosition()方法返回的对象中获取宽度参数。
const taskWidth gantt.getTaskPosition(task, task.start_date, task.end_date).width;
然后需要创建canvas元素使用getComputedStyle()方法查找通常在任务栏中显示的文本字体样式和字体大小。之后在context元素中指定这些参数并使用measureText()方法来确定文本宽度。
const canvas document.createElement(canvas);
const context canvas.getContext(2d);const bar document.querySelector(.gantt_task_content)
if (bar) {
const fontFamily getComputedStyle(bar)[font-family];
const fontSize getComputedStyle(bar)[font-size];
context.font fontSize fontFamily;
}
const textWidth context.measureText(task.text).width;
现在是时候将照片添加到任务栏了您需要指定这些照片的宽度。在我们的演示中图像的宽度被调整为任务栏的高度因此您可以使用gantt.config.row_height配置的值。但如果元素的宽度不同则需要设置一个新值宽度值必须乘以分配给给定任务的资源数量。
const ownersWidth (task.owners || []).length * gantt.config.row_height;
现在有必要对文本和图像的宽度值进行总结如果结果值大于任务栏的宽度则返回true这意味着内容(文本照片)不会包含在任务栏中。
if (textWidth ownersWidth taskWidth) {
return true;
}
如果detectOverflow返回false则task_text模板包含以下条件。如果任务类型是项目则只需返回任务文本。如果它是一个常规任务则返回一个HTML元素其中包含任务文本和可以从getOwnerPics函数获得的员工照片。
gantt.templates.task_text function (start, end, task) {
if (detectOverflow(task)) {
return
}
else {
if (task.type gantt.config.types.project) {
return task.text;
}
else {
return span stylevertical-align: top ${task.text}/span${getOwnerPics(task)};
}
}
};
在rightside_text模板中对“task”类型的任务使用detectOverflow函数。如果此函数返回true则应该返回一个HTML元素其中包含来自getOwnerPics函数的任务文本和员工图像。
在DHTMLX Gantt中可以只使用一个模板您不能多次指定不同的模板并期望它们正常工作所以必须在一个模板中添加所有的代码
gantt.templates.rightside_text function (start, end, task) {
if (task.type gantt.config.types.project) {
return div classproject-right style${getTriangleStyles(task, right)}/div
}if (detectOverflow(task)) {
return span stylevertical-align: top ${task.text}/span${getOwnerPics(task)};
}
return ;
};
由于篇幅有限下期继续讲解请持续关注查看最新产品资讯哦~
