本文給大家講解如何通過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    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！