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

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

DHTMLX Gantt正版试用下载(qun:764148812)icon-default.png?t=N176https://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 ) 要发送的数据。

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

你可能感兴趣的:(服务器,javascript,asp.net,dhtmlx,gantt)