翻譯|使用教程|編輯:秦林|2022-10-09 11:32:59.797|閱讀 239 次
概述:這篇文章給大家講解如何利用dhtmlxGantt在服務(wù)器端集成數(shù)據(jù)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
這篇文章給大家講解如何利用dhtmlxGantt在服務(wù)器端集成數(shù)據(jù)。
客戶端
1)調(diào)用load方法,其中作為參數(shù)指定以JSON格式返回甘特圖數(shù)據(jù)的URL。
2)使用以下兩種方式之一創(chuàng)建DataProcessor實例:
gantt.init("gantt_here"); gantt.load("apiUrl"); // keep the order of the lines below var dp = new gantt.dataProcessor("apiUrl"); dp.init(gantt); dp.setTransactionMode("REST");
調(diào)用createDataProcessor方法并傳遞一個帶有配置選項的對象作為其參數(shù):
var dp = gantt.createDataProcessor({ url: "apiUrl", mode: "REST" });
創(chuàng)建數(shù)據(jù)處理器
1.使用預(yù)定義的請求模式之一,如:
var dp = gantt.createDataProcessor({ url: "/api", mode: "REST" });
位置:
2.提供自定義路由器對象:
var dp = gantt.createDataProcessor(router);
// entity - "task"|"link" // action - "create"|"update"|"delete" // data - an object with task or link data // id – the id of a processed object (task or link) var dp = gantt.createDataProcessor(function(entity, action, data, id) { switch(action) { case "create": return gantt.ajax.post( server + "/" + entity, data ); break; case "update": return gantt.ajax.put( server + "/" + entity + "/" + id, data ); break; case "delete": return gantt.ajax.del( server + "/" + entity + "/" + id ); break; } });
或是以下結(jié)構(gòu)的對象:
var dp = gantt.createDataProcessor({ task: { create: function(data) {}, update: function(data, id) {}, delete: function(id) {} }, link: { create: function(data) {}, update: function(data, id) {}, delete: function(id) {} } });
對象的所有函數(shù)都路由器應(yīng)該返回一個Promise或一個數(shù)據(jù)響應(yīng)對象。 這是 dataProcessor應(yīng)用數(shù)據(jù)庫id并掛鉤onAfterUpdate事件所必需的。
outer = function(entity, action, data, id) { return new gantt.Promise(function(resolve, reject) { // … some logic return resolve({tid: databaseId}); }); }
因此,您可以使用DataProcessor將數(shù)據(jù)保存在localStorage或任何其他未鏈接到某個URL的存儲中,或者如果有兩個不同的服務(wù)器(URL)負(fù)責(zé)創(chuàng)建和刪除對象。
請求和響應(yīng)詳細(xì)信息
URL由以下規(guī)則構(gòu)成:
其中“api”是您在dataProcessor配置中指定的URL。
可能的請求和響應(yīng)的列表是:
ACTION | HTTP | URL | RESPONSE |
加載數(shù)據(jù) | GET | /apiUrl | JSON格式 |
添加新任務(wù) | POST | /apiUrl/任務(wù) | {"action":"inserted","tid":"taskId"} |
更新任務(wù) | PUT | /apiUrl/task/taskId | {“行動”:“更新”} |
刪除任務(wù) | DELETE | /apiUrl/task/taskId | {“行動”:“刪除”} |
添加新鏈接 | POST | /apiUrl/鏈接 | {"action":"inserted","tid":"linkId"} |
更新鏈接 | PUT | /apiUrl/link/linkId | {“行動”:“更新”} |
刪除鏈接 | DELETE | /apiUrl/link/linkId | {“行動”:“刪除”} |
請求參數(shù)
創(chuàng)建/更新/刪除請求將包含客戶端任務(wù)或鏈接對象的所有公共屬性:
任務(wù):
關(guān)聯(lián):
筆記:
REST-JSON 模式
除了“POST”、“GET”、“REST”和“JSON”事務(wù)模式,甘特數(shù)據(jù)處理器也可以用于“REST-JSON”模式。
gantt.load("apiUrl"); var dp = gantt.createDataProcessor({ url: "/apiUrl", mode: "REST-JSON" });
在REST模式中,數(shù)據(jù)以以下形式發(fā)送到服務(wù)器:
Content-Type: application/x-www-form-urlencoded
而在REST-JSON模式下,數(shù)據(jù)以JSON格式發(fā)送:
Content-type: application/json
因此參數(shù)作為JSON對象發(fā)送,請求有效載荷
{ "start_date": "20-09-2018 00:00", "text": "New task", "duration":1, "end_date": "21-09-2018 00:00", "parent": 0, "usage":[{ {"id":"1", "value":"30"}, {"id":"2", "value":"20"} }] }
{ "source": 1, "target": 2, "type": "0" }
這種格式使得在任何服務(wù)器端平臺上處理復(fù)雜記錄變得更加方便。
dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表,可滿足項目管理控件應(yīng)用程序的所有需求,是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊,歡迎在線咨詢或者私信我獲取正版試用版及報價。
甘特圖控件交流群:764148812 歡迎進(jìn)群交流討論
更多正版甘特圖軟件下載、購買、授權(quán)咨詢,請點這里!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn