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:
- id - ( string ) 任务的 id。
- status - ( 'updated', 'inserted', deleted' ) 任务的操作状态。
- data - ( object ) 要发送的数据。
请注意,当字段验证失败时,更改不会发送到服务器,而是保留在客户端并可用于进一步处理。