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

本文给大家讲解项目管理工具DHTMLX Gantt灯箱元素配置教程：如何验证，欢迎大家下载最新版试用体验

验证允许您控制用户输入的数据，以排除保存不正确值的可能性。例如，通过验证，您可以拒绝将 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:

• id – ( string ) 任务的 id。
• status – ( ‘updated’, ‘inserted’, deleted’ ) 任务的操作状态。
• data – ( object ) 要发送的数据。

请注意，当字段验证失败时，更改不会发送到服务器，而是保留在客户端并可用于进一步处理。

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。

2022年终狂欢火热进行中，全场产品超低价，DHTMLX全系产品享8.8折！了解更多活动详情，欢迎访问网咨询在线客服。

甘特图控件交流群：764148812    欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：

来源：慧都