翻譯|使用教程|編輯:秦林|2022-11-23 10:45:22.040|閱讀 727 次
概述:本文給大家講解如何通過DHTMLX Gantt自定義燈箱,歡迎大家下載最新版試用體驗。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
本文給大家講解如何通過DHTMLX Gantt自定義燈箱,歡迎大家下載最新版試用體驗。
您可以為甘特圖創建一個完全自定義的燈箱,并用它替換默認燈箱。有兩種可能的方法:
(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;
});
當用戶保存表單時,您需要手動獲取表單值并使用公共 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 歡迎進群交流討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn