项目管理工具DHTMLX Gantt灯箱元素配置教程：如何验证

news2024/9/23 11:15:20

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。本文给大家讲解项目管理工具DHTMLX Gantt灯箱元素配置教程：如何验证，欢迎大家下载最新版试用体验。

DHTMLX Gantt正版试用下载（qun：764148812）https://www.evget.com/product/4213/download

验证允许您控制用户输入的数据，以排除保存不正确值的可能性。例如，通过验证，您可以拒绝将 2 个同时执行的任务分配给一个人。

通常，要验证用户输入的数据，使用dhtmlxGantt API提供的事件并捕获输入数据以根据其正确性进行处理：

1、客户端验证

以下事件最重要且常用于数据验证：

onLightboxSave - 当用户点击灯箱中的“保存”按钮时触发
onBeforeTaskAdd - 在新任务添加到甘特图之前触发
onBeforeTaskChanged - 在更新任务之前触发
onBeforeLinkAdd - 在将新链接添加到甘特图之前触发
onBeforeLinkUpdate - 在更新链接之前触发

最简单的验证可以在onLightboxSave事件的帮助下实现。当用户单击表单上的“保存”按钮时，将调用该事件。从事件中返回true将保存更改，返回false将取消进一步处理并使灯箱保持打开状态。

例如，要限制任务的保存，如果没有分配给它的用户，请使用如下代码：

gantt.attachEvent("onLightboxSave", function(id, item){
if(!item.text){
dhtmlx.message({type:"error", text:"Enter task description!"});
return false;
}
if(!item.user){
dhtmlx.message({type:"error", text:"Choose a worker for this task!"});
return false;
}
return true;
});

相关示例：验证灯箱值

2、服务器端验证

上面的解决方案有一个缺点 - 如果灯箱中的数据已通过内联编辑器或通过拖动甘特图进行更改，则事件不会触发。

为了证明这一点并捕获甘特图中所做的所有更改（编辑、创建、删除等），请使用dataProcessor对象，或者更准确地说，使用它的事件之一 - onBeforeUpdate。该事件在将数据发送到服务器之前以及在甘特图中（不仅在灯箱中）进行任何更改之后触发。

gantt.init("gantt_here");
gantt.load("data.php");

var dp = new gantt.dataProcessor("data.php");
dp.init(gantt);

dp.attachEvent("onBeforeUpdate", function (id, status, data) {
if (!data.text) {
dhtmlx.message("The event's text can't be empty!");
return false;
}
return true;
});

where: