永利最大(官方)网站

本文给大家讲解如何通过DHTMLX Gantt自定义灯箱，欢迎大家下载最新版试用体验。

DHTMLX Gantt正版试用下载

1、创建自定义灯箱的方法

您可以为甘特图创建一个完全自定义的灯箱，并用它替换默认灯箱。有两种可能的方法：

（1）通过重新定义showLightbox方法：

在页面中包含jQuery库的源文件:

gantt.showLightbox = function(id){
    // code of the custom form
}

创建一个 HTML 容器“my-form”，我们将在其中放置一个自定义灯箱：

<div id="my-form">
 <label for="description">Task text
  <input type="text" name="description" value="" >
 </label>
 <br>
 <input type="button" name="save" value="Save">
 <input type="button" name="close" value="Close">
 <input type="button" name="delete" value="Delete">
</div>

然后制作一个自定义的灯箱，你可以使用类似这样的配置：

var taskId = null;
 
gantt.showLightbox = function(id) {
    taskId = id;
    var task = gantt.getTask(id);
 
    var form = getForm();
    var input = form.querySelector("[name='description']");
    input.focus();
    input.value = task.text;
 
    form.style.display = "block";
 
    form.querySelector("[name='save']").onclick = save;
    form.querySelector("[name='close']").onclick = cancel;
    form.querySelector("[name='delete']").onclick = remove;
};
 
gantt.hideLightbox = function(){
    getForm().style.display = "";
    taskId = null;
}
 
 
function getForm() {
    return document.getElementById("my-form");
};
 
function save() {
    var task = gantt.getTask(taskId);
 
    task.text = getForm().querySelector("[name='description']").value;
 
    if(task.$new){
        delete task.$new;
        gantt.addTask(task,task.parent);
    }else{
        gantt.updateTask(task.id);
    }
 
    gantt.hideLightbox();
}
 
function cancel() {
    var task = gantt.getTask(taskId);
 
    if(task.$new)
    gantt.deleteTask(task.id);
    gantt.hideLightbox();
}
 
function remove() {
    gantt.deleteTask(taskId);
    gantt.hideLightbox();
}

（2）使用onBeforeLightbox事件。在这种情况下，动作算法如下：

• 检测何时显示灯箱
• 阻止默认灯箱
• 显示自定义表单并填写任务数据

gantt.attachEvent("onBeforeLightbox", function(id) {
    var task = gantt.getTask(id);
    if(task.$new){
        dhtmlx.confirm({
            text:"Create task?",
            callback: function(res){
                if(res){
                    //..apply values
                    delete task.$new;
                    gantt.addTask(task);
                }else{
                    gantt.deleteTask(task.id);
                }
            }
        });
        return false;
    }
    return true;
});

2、自定义表单中的处理操作

 当用户保存表单时，您需要手动获取表单值并使用公共 API 更新适当的任务：addTask、updateTask和deleteTask。

 请注意，当灯箱被新任务触发时（单击“加号”按钮），如果用户单击“取消”以恢复任务创建，则应将其删除，任务对象将设置“$new”属性。

 您可以处理灯箱关闭，如下例所示。动作类型——“保存”、“取消”或“删除”作为“动作”参数传递：

switch(action){
   case "save":
      task.text = '';// apply values from form
 
      // add new task or update already existing one
      if(task.$new){
        delete task.$new;
        gantt.addTask(task,task.parent)
      }else{
        gantt.updateTask(id);
      }
 
      break;
   case "cancel":
      // if cancel popup for creating a new task - delete it, otherwise do nothing
      if(task.$new)
         gantt.deleteTask(id);
      break;
   case "delete":
      gantt.deleteTask(id);
      break;
}

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

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

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

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