製圖控制元件
# FastWeb製圖控制元件
目前組中顯示的為製圖相關的控制元件列表。
# 1. TUgSVG
此控制元件可用於顯示SVG圖形影象。
- SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
- SVG 用來定義用於網路的基於向量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
- SVG 是萬維網聯盟的標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
關於SVG的定義及使用的方法請參考MDN SVG文件 (opens new window)。
雙擊可以打開SVG瀏覽器，選擇進行瀏覽。
# 1.1. 屬性
| 屬性 | 說明 |
|---|---|
| HTML | 設定SVG圖形顯示的定義，在此處輸入SVG圖形的內容 |
| Interval | 設定SVG圖形變換的時間間隔，以ms為單位 |
| SVGImgList | 設定SVG圖形列表控制元件的名稱，如此處為空，則預設顯示HTML中的內容 |
| ThreadEnabled | 是否啟用定時器執行緒，如SVGImgList處未指定，則此項可設定為自旋轉 |
# 1.2. 方法
# 1.2.1. Rotation
procedure Rotation(angle: Integer; animateTo: Integer);
1
設定SVG的旋轉動作，從起始角度至目標角度的旋轉動作。
//JScript
function UgTrackBar01OnChange(sender)
//設定當拖動滑塊時旋轉SVG圖形
{
var i;
i= UgTrackBar01.Position;
UgSVG01.Rotation(i,UgTrackBar01.Position);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure UgTrackBar01OnChange(sender: tobject);
//設定當拖動滑塊時旋轉SVG圖形
Var
i:Integer;
begin
i:= UgTrackBar01.Position;
UgSVG01.Rotation(i,UgTrackBar01.Position);
end;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group
# 1.2.1.1. setAttribute
procedure setAttribute(id: string; attribute: string; value: string);
1
設定修改SVG元素的屬性。以下是一些示例參考的用法。
//JScript
//修改SVG中ID為 Group_Inner_Sphere_circle 的元素，將其填充為紅色
UgSVG01.setAttribute("Group_Inner_Sphere_circle","fill","#ff0000"); //紅色
//修改SVG中ID為 Group_Impeller_circle 的元素，將其填充為綠色
UgSVG01.setAttribute("Group_Impeller_circle","fill","#2DFF50"); //綠色
//還原
UgSVG01.setAttribute("Group_Inner_Sphere_circle","fill","#737373");
UgSVG01.setAttribute("Group_Impeller_circle","fill","url(#"+UgSVG01.JSName+"SVGID_5_)");//SVG元素的ID在運行期，都會自動加上控制元件的JSName
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//PasScript
//修改SVG中ID為 Group_Inner_Sphere_circle 的元素，將其填充為紅色
UgSVG01.setAttribute('Group_Inner_Sphere_circle','fill','#ff0000'); //紅色
//修改SVG中ID為 Group_Impeller_circle 的元素，將其填充為綠色
UgSVG01.setAttribute('Group_Impeller_circle','fill','#2DFF50'); //綠色
//還原
UgSVG01.setAttribute('Group_Inner_Sphere_circle','fill','#737373');
UgSVG01.setAttribute('Group_Impeller_circle','fill','url(#'+UgSVG01.JSName+'SVGID_5_)');//SVG元素的ID在運行期，都會自動加上控制元件的JSName
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// Make sure to add code blocks to your code group
# 1.2.1.2. addEventListener
procedure addEventListener(element: string; event: string; func: string);
1
呼叫此方法后，可以為SVG新增事件監聽功能。使用的示例如下。
//JScript
//滑鼠放到元素上時改變顏色，滑鼠型別也會變化
UgSVG01.addEventListener("Group_Inner_Sphere_circle","mouseover","this.style.cursor=\"pointer\";this.setAttribute(\"fill\",'#ff0000');");
//滑鼠離開時，恢復到原來的顏色
UgSVG01.addEventListener("Group_Inner_Sphere_circle","mouseout","this.setAttribute(\"fill\",'#737373');");
//新增事件，給元素增加單擊事件，打開一個窗體
UgSVG01.addEventListener("Group_Inner_Sphere","click","window.open('http://server.port/?username=demo&password=password&form=8430212C-8FFB-4967-A853-6800ACFC00B8', \"_blank\", \"location = no,height=800,width=960\");");
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
//滑鼠放到元素上時改變顏色，滑鼠型別也會變化
UgSVG01.addEventListener('Group_Inner_Sphere_circle','mouseover','this.style.cursor="pointer";this.setAttribute("fill",''#ff0000'');');
//滑鼠離開時，恢復到原來的顏色
UgSVG01.addEventListener('Group_Inner_Sphere_circle','mouseout','this.setAttribute("fill",''#737373'');');
//新增事件，給元素增加單擊事件，打開一個窗體
UgSVG01.addEventListener('Group_Inner_Sphere','click','window.open(''http://server.port/?username=demo&password=password&form=8430212C-8FFB-4967-A853-6800ACFC00B8'', "_blank", "location = no,height=800,width=960");');
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 2. TUgSVGImageList
此控制元件用於儲存SVG顯示的系列，雙擊可打開管理器管理顯示的SVG圖形。
# 3. TUgGanttChart
此控制元件顯示為甘特管理圖，以圖表的方式來直觀顯示任務的進展情況。
# 3.1. 屬性
# 3.1.1. GanttOptions
property GanttOptions: TGanttOptions;
1
設定甘特圖的圖形的相關選項。以下屬性項如果在指令碼中需要重新進行設定，建議在修改後，使用InitGantt方法來重新設定初始化以使屬性修改生效。
# 3.1.1.1. AdditionalHeaders
property AdditionalHeaders: string;
1
設定要在數據表中顯示的帶有附加標題的對象，比如{ category: { title: 'Category' } }。
# 3.1.1.2. CaptionType
property CaptionType: TCaptionType;
1
設定將哪個任務欄位用作甘特圖工作列上的標題，接受單個參數，可選項有None、Caption、Resource、Duration、Complete。
# 3.1.1.3. ColumnOrder
property ColumnOrder: string;
1
設定顯示的列的順序，預設的設定項為，[ 'vShowRes','vShowDur','vShowComp','vShowStartDate','vShowEndDate','vShowPlanStartDate','vShowPlanEndDate','vShowCost','vAdditionalHeaders ','vShowAddEntries']，如需要修改列的順序，請根據上述的格式進行調整。
# 3.1.1.4. DateInputFormat
property DateInputFormat: string;
1
定義用於建立任務的日期的輸入格式，接受單個參數。 有效參數值為 yyyy-mm-dd、dd/mm/yyyy、mm/dd/yyyy。 預設為yyyy-mm-dd。
# 3.1.1.5. DateTaskDisplayFormat
property DateTaskDisplayFormat: string;
1
設定任務工具提示中的開始與結束日期的日期格式。預設為dd month yyyy。
# 3.1.1.6. DateTaskTableDisplayFormat
property DateTaskTableDisplayFormat: string;
1
用於主任務列表中開始和結束日期的日期格式。預設為dd/mm/yyyy。
# 3.1.1.7. DayColWidth
property DayColWidth: Integer;
1
以「日」格式繪製時甘特圖列的寬度（以畫素為單位）。 預設為 18。
# 3.1.1.8. DayMajorDateDisplayFormat
property DayMajorDateDisplayFormat: string;
1
用於甘特圖主要日期標題的日期格式，以「日」格式顯示。 預設為dd/mm/yyyy。
# 3.1.1.9. DayMinorDateDisplayFormat
property DayMinorDateDisplayFormat: string;
1
用於甘特圖次要日期標題的日期格式，以「日」格式顯示。 預設為dd。
# 3.1.1.10. Debug
property Debug: Boolean;
1
設定控制元件為除錯模式，可在瀏覽器控制檯處顯示輸出的除錯資訊。
# 3.1.1.11. Editable
property Editable: Boolean;
1
如果要編輯數據表中的值，則設定為 true。
# 3.1.1.12. EventClickCollapse
property EventClickCollapse: string;
1
控制組任務摺疊時的事件（打開或關閉事件）。可設定一個JS函式，比如vEventClickCollapse: function(e){console.log(e)}。
# 3.1.1.13. EventClickRow
property EventClickRow: string;
1
控制單擊任務行時執行的事件，可設定一個JS函式，比如vEventClickRow: function(e){console.log(e)}。
# 3.1.1.14. Events
property Events: string;
1
控制在表數據中單擊任務時的事件。 必須通過列和函式傳遞一個對象。 如果使用者單擊標題，則將觸發事件vEvents: { taskname: console.log, res: console.log }。
# 3.1.1.15. EventsChange
property EventsChange: string;
1
設定單擊任務行時觸發的事件，可設定一個JS函式，比如vEventsChange: { taskname: function(task, event, cell, column){ console.log(task, event, cell, column); } }。
# 3.1.1.16. Format
property Format: TGanttFormat;
1
設定顯示的格式型別，Day、Month、Quarter、Week。
# 3.1.1.17. FormatArr
property FormatArr: string;
1
控制在格式選擇器中顯示哪些格式選項，接受多個參數。 有效參數值為 Hour、Day、Week、Month、Quarter。 預設為所有有效值。
# 3.1.1.18. HourColWidth
property HourColWidth: Integer;
1
以「小時」格式繪製時甘特圖列的寬度（以畫素為單位）。 預設為 18。
# 3.1.1.19. HourMajorDateDisplayFormat
property HourMajorDateDisplayFormat: string;
1
用於甘特圖主要日期標題的日期格式以「小時」格式顯示。 預設為 day dd month yyyy。
# 3.1.1.20. HourMinorDateDisplayFormat
property HourMinorDateDisplayFormat: string;
1
用於甘特圖次要日期標題的日期格式以「小時」格式顯示。 預設為HH。
# 3.1.1.21. lang
property Lang: string;
1
設定繪製圖表時使用的翻譯語言。預設為cn，即使用簡體中文。
# 3.1.1.22. MaxDate
property MaxDate: string;
1
將最大日期設定為比最大任務日期更遠。 如果它在此最大日期后開始，它不會裁切任何任務，但可以擴充套件圖表的右側。
# 3.1.1.23. MinDate
property MinDate: string;
1
將最小日期設定為比最小任務日期更遠。 如果它在此最短日期之前開始，它不會裁切任何任務，但可以擴充套件圖表的左側。
# 3.1.1.24. MingGpLen
property MinGpLen: Integer;
1
組任務的工作列上有一個裝飾用的端點，此屬性用於指定這些端點的寬度（以畫素為單位）。 短工作列的長度將向上取整以正確顯示單個端點或兩個端點。 預設取值為 8。
# 3.1.1.25. MonthColWidth
property MonthColWidth: Integer;
1
以「月」格式繪製時甘特圖列的寬度（以畫素為單位）。 預設為 36。
# 3.1.1.26. MonthMajorDateDisplayFormat
property MonthMajorDateDisplayFormat: string;
1
用於甘特圖主要日期標題的日期格式以「月」格式顯示。 預設為yyyy。
# 3.1.1.27. MonthMinorDateDisplayFormat
property MonthMinorDateDisplayFormat: string;
1
用於甘特圖次要日期標題的日期格式以「月」格式顯示。 預設為mon。
# 3.1.1.28. QuarterColWidth
property QuarterColWidth: Integer;
1
以「季」格式繪製時甘特圖列的寬度（以畫素為單位），建議將其設定為可被 3 整除的值。預設為 18。
# 3.1.1.29. QuarterMajorDateDisplayFormat
property QuarterMajorDateDisplayFormat: string;
1
用於甘特圖主要日期標題的日期格式以「季」格式顯示。 預設為「yyyy」。
# 3.1.1.30. QuarterMinorDateDisplayFormat
property QuarterMinorDateDisplayFormat: string;
1
用於甘特圖次要日期標題的日期格式以「季」格式顯示。 預設為qq。
# 3.1.1.31. Resources
property Resources: string;
1
設定可能的資源列表，必須是對像陣列。比如 [{ id: 1, name: 'Mario' } , { id: 2, name: 'Henrique' }]。
# 3.1.1.32. RowHeight
property RowHeight: Integer;
1
設定甘特圖的行的高度(以畫素為單位)，用於在端點附近佈置依賴線。 預設為 20。
# 3.1.1.33. ScrollTo
property ScrollTo: string;
1
設定甘特圖將滾動到的日期，也接受特殊值today。 預設為最小顯示日期MinDate。
# 3.1.1.34. ShowAddEntries
property ShowAddEntries: Boolean;
1
設定是否在甘特圖中顯示新增按鈕。
# 3.1.1.35. ShowComp
property ShowComp: Boolean;
1
設定是否在任務列表中顯示完成百分比列。
# 3.1.1.36. ShowCost
property ShowCost: Boolean;
1
設定是否在任務列表中顯示成本列。
# 3.1.1.37. ShowDeps
property ShowDeps: Boolean;
1
設定是否顯示依賴線。
# 3.1.1.38. ShowDur
property ShowDur: Boolean;
1
設定任務持續時間列是否顯示在任務列表中。
# 3.1.1.39. ShowEndDate
property ShowEndDate: Boolean;
1
任務結束日期列是否顯示在任務列表中。
# 3.1.1.40. ShowEndWeekDate
property ShowEndWeekDate: Boolean;
1
設定「日」檢視中的主標題是否以適當的格式顯示周結束日期。以下表格為顯示的型別。
| 格式 | 描述 |
|---|---|
| h | 小時 (1-12) |
| hh | 小時 (01-12) |
| pm | am/pm 指示器 |
| PM | AM/PM 指示器 |
| H | 小時 (0-23) |
| HH | 小時 (01-23) |
| mi | 分鐘 (1-59) |
| MI | 分鐘 (01-59) |
| d | 日 (1-31) |
| dd | 日 (01-31) |
| day | 星期的縮寫 |
| DAY | 星期 |
| m | 月份 (1-12) |
| mm | 月份 (01-12) |
| mon | 月份縮寫 |
| month | 月份全稱 |
| yy | 年份的后兩位 |
| yyyy | 年份 |
| q | 季度(1-4) |
| 季度 (Q1-Q4) | |
| w | ISO 星期 (1-53) |
| ww | ISO 星期數 (01-53) |
| week | 完整的 ISO 星期表達方式 |
# 3.1.1.41. ShowPlanEndDate
property ShowPlanEndDate: Boolean;
1
「計劃截止日期」列是否顯示在任務列表中。
# 3.1.1.42. ShowPlanStartDate
property ShowPlanStartDate: Boolean;
1
「計劃起始日期」列是否顯示在任務列表中。
# 3.1.1.43. ShowRes
property ShowRes: Boolean;
1
資源欄是否顯示在任務列表中。
# 3.1.1.44. ShowSelector
property ShowSelector: string;
1
設定顯示格式選擇器的位置。可設定的參數為top、bottom，可設定多個參數。
# 3.1.1.45. ShowStartDate
property ShowStartDate: Boolean;
1
「起始日期」列是否顯示在任務列表中。
# 3.1.1.46. ShowTaskInfoComp
property ShowTaskInfoComp: Boolean;
1
任務工具提示中是否顯示百分比完成資訊。
# 3.1.1.47. ShowTaskInfoDur
property ShowTaskInfoDur: Boolean;
1
設定任務工具提示中是否顯示任務的持續時間的資訊。
# 3.1.1.48. ShowTaskInfoEndDate
property ShowTaskInfoEndDate: Boolean;
1
任務工具提示中是否顯示任務結束日期資訊。
# 3.1.1.49. ShowTaskInfoLink
property ShowTaskInfoLink: Boolean;
1
設定任務工具提示中是否顯示更多資訊的鏈接。
# 3.1.1.50. ShowTaskInfoNotes
property ShowTaskInfoNotes: Boolean;
1
是否在任務工具提示中顯示附加備註的數據。
# 3.1.1.51. ShowTaskInfoRes
property ShowTaskInfoRes: Boolean;
1
設定任務工具提示中是否顯示資源資訊。
# 3.1.1.52. ShowTaskInfoStartDate
property ShowTaskInfoStarDate: Boolean;
1
設定任務工具提示中是否顯示任務開始日期資訊。
# 3.1.1.53. ShowWeekends
property ShowWeekends: Boolean;
1
設定是否以日檢視格式顯示週末日。
# 3.1.1.54. TooltipDelay
property TooltipDelay: Integer;
1
設定任務工具提示框的延遲顯示事件，以毫秒為單位。
# 3.1.1.55. TooltipTemplate
property TooltipTemplate: string;
1
為工具提示設定模板，有以下幾種型別：
string：僅顯示為一個靜態模板。function(task): string：返回給定任務模板的函式。function(task): Promise<string>：返回解析為字串的函式的部分。解析完成前顯示的內容為 tooltipLoading from lang的部分。
在每種情況下，字串中的變數都會被替換。如果給定函式並且它返回 undefined 或 null - 使用預設模板（就像根本沒有傳遞參數一樣）。 當工具提示框顯示時需評估函式參數。
# 3.1.1.56. TotalHeight
property TotalHeight: Integer;
1
將元件高度設定為 CSS 高度（例如「300px」）。 如果設定了此項，標題欄是固定的，內容是可滾動的。 否則元件高度將由內容定義。
# 3.1.1.57. UseFade
property UseFade: Boolean;
1
設定顯示/隱藏工具提示時是否使用淡入淡出效果。
# 3.1.1.58. UseMove
property UseMove: Boolean;
1
在不同任務工具提示之間切換時是否使用滑動效果。
# 3.1.1.59. UseRowHlt
property UseRowHlt: Boolean;
1
使用滑鼠懸停時是否高亮顯示。
# 3.1.1.60. UseSingleCell
property UseSingleCell: Integer;
1
設定任務列表將使用單個表每個行的單元格，而不是每個週期的一個單元格的單元格的閾值總數。有助於提高大圖表的效能。數值為0，禁用此功能（始終使用多個單元格），預設為25000。
# 3.1.1.61. UseSort
property UseSort: Boolean;
1
設定任務列表是否按父任務/開始時間順序排序還是簡單地按建立的順序顯示。
# 3.1.1.62. UseToolTip
property UseToolTip: Boolean;
1
設定是否顯示工具提示框。
# 3.1.1.63. WeekColWidth
property WeekColWidth: Integer;
1
以「周」格式繪製時甘特圖列的寬度（以畫素為單位）。 預設為 36。
# 3.1.1.64. WeekMajorDateDisplayFormat
property WeekMajorDateDisplayFormat: String;
1
設定用於甘特圖主要日期標題的日期格式以「周」格式顯示。 預設為 yyyy。
# 3.1.1.65. WeekMinorDateDisplayFormat
property WeekMinorDateDisplayFormat: String;
1
用於甘特圖次要日期標題的日期格式以「周」格式顯示。 預設為 dd/mm。
# 3.2. 事件
# 3.2.1. OnClickRow
procedure UgGanttChartOnClickRow(sender: tobject;id: string);
1
當點選甘特圖中的任務行時觸發事件，返回的程式中包含了點選的任務項的ID資訊。
# 3.2.2. OnGetXMLProject
procedure UgGanttChart01OnGetXMLProject(sender: tobject;xml: string);
1
當甘特圖元件呼叫GetXMLProject方法時觸發事件。
# 3.2.3. OnGetXMLTask
procedure UgGanttChart01OnGetXMLTask(sender: tobject;xml: string);
1
當甘特圖呼叫GetXMLTask方法時觸發事件。
# 3.3. 方法
# 3.3.1. AddTask
procedure AddTask(pID: string; pName: string; pStart: string; pEnd: string; pClass: string; pLink: string; pMile: string; pRes: string; pComp: string; pGroup: string; pParent: string; pOpen: string; pDepend: string; pCaption: string; pNotes: string; pGantt: string; pCost: string; pPlanStart: string; pPlanEnd: string; pDuration: string; pBarText: string; pDataObject: string);
1
為甘特圖新增一條新的任務。其中的各項參數說明如下。
| 參數 | 描述 |
|---|---|
| pID: | (必需) 用於標識每一行的唯一數字ID |
| pName: | (必需) 任務標籤的名稱 |
| pStart: | (必需) 任務開始日期，可以為組輸入空日期（」），還可以輸入具體時間（2016-02-20 12:00）以獲得更多精度 |
| pEnd: | (必需) 任務結束日期，可以為組輸入空日期（」） |
| pPlanStart: | (必需) 計劃任務開始日期，可以為組輸入空日期（''），還可以輸入特定時間（例如 2013-02-20 09:00）以獲得額外的精度或半天 |
| pPlanEnd: | (必需) 計劃的任務結束日期，可以為組輸入空日期（''） |
| pClass: | (必需) 任務的css類(任務標籤的樣式類，如：』ggroupblack』,』gtaskblue』,』gtaskgreen』等) |
| pLink: | (可選) 任何http鏈接在工具提示中會顯示為「更多資訊」的鏈接。 |
| pMile: | (可選) 指出這是否是一個里程碑式的任務 - 數字:1 表示 里程碑任務，0 表示 不是里程碑任務 |
| pRes: | (可選) 資源名稱 |
| pComp: | (必需) 完成百分比，數字 |
| pGroup: | (可選) 指示這是否是組任務（父） - 數字： 0 - 正常任務，1 - 標準組任務，2 - 組合任務 |
| pParent: | (必需) 已存在的任務的pID，這表示此任務成為已識別任務的子任務。 數字頂級任務應將pParent設定為0 |
| pOpen: | (必需) 指示在繪製圖表時是否打開標準組任務。 必須為所有專案設定值，但只能由標準組任務使用。 數字，1 =展開開，0 =收起 |
| pDepend: | (可選) 逗號分隔這個任務依賴的id列表。 將從每個列出的任務中畫一條箭頭到該項任務;每個id可以選擇後跟一個依賴關係型別後綴。 有效值是:FS - 完成到開始（如果省略後綴，則為預設值）;SF - 開始到完成;SS』 - 開始啟動;FF - 完成到完成； 如果存在，則後綴必須直接新增到id中。123SS |
| pCaption: | (可選) 如果 CaptionType 設定為 Caption，將在工作列後面會新增標題 |
| pNotes: | (可選) 將在此任務的工具提示中顯示詳細的任務資訊 |
| pGantt: | (必需) javascript JSGantt.GanttChart對像從中進行設定。 預設為「g」用於向後相容 |
| pCost: | 任務的成本，數字 |
| pBarText: | (可選) 用於包含任務條中的文字 |
//JScript
UgGanttChart01.AddTask("22","Define Chart <strong>API</strong>","2017-02-25","2017-03-17","ggroupblack","","0","Brain","0","1","0","1","","","Some Notes text","","1000","2017-04-01","2017-04-15","","ex. bar text","");
UgGanttChart01.Draw;
1
2
3
2
3
//PasScript
UgGanttChart01.AddTask('22','Define Chart <strong>API</strong>','2017-02-25','2017-03-17','ggroupblack','','0','Brain','0','1','0','1','','','Some Notes text','','1000','2017-04-01','2017-04-15','','ex. bar text','');
UgGanttChart01.Draw;
1
2
3
2
3
// Make sure to add code blocks to your code group
# 3.3.2. AddTaskItemObject
procedure AddTaskItemObject(TaskItem: TTaskItem);
1
設定新增任務項對象。
//JScript
var TaskItem;
TaskItem = TTaskItem;
TaskItem.pID = "22";
TaskItem.pName = "Define Chart <strong>API</strong>";
TaskItem.pStart = "2017-02-25";
TaskItem.pEnd = "2017-03-17";
TaskItem.pPlanStart = "2017-04-01";
TaskItem.pPlanEnd = "2017-04-15 12:00";
TaskItem.pClass = "ggroupblack";
TaskItem.pLink = "";
TaskItem.pMile = "0";
TaskItem.pRes = "Brain";
TaskItem.pComp = "0";
TaskItem.pGroup = "1";
TaskItem.pParent = "0";
TaskItem.pOpen = "1";
TaskItem.pDepend = "";
TaskItem.pCaption = "";
TaskItem.pCost = "1000";
TaskItem.pNotes = "Some Notes text";
TaskItem.pBarText = "ex. bar text";
UgGanttChart01.AddTaskItemObject(TaskItem);
UgGanttChart01.Draw;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//PasScript
var
TaskItem: TTaskItem;
begin
TaskItem := TTaskItem.Create;
TaskItem.pID := '22';
TaskItem.pName := 'Define Chart <strong>API</strong>';
TaskItem.pStart := '2017-02-25';
TaskItem.pEnd := '2017-03-17';
TaskItem.pPlanStart := '2017-04-01';
TaskItem.pPlanEnd := '2017-04-15 12:00';
TaskItem.pClass := 'ggroupblack';
TaskItem.pLink := '';
TaskItem.pMile := '0';
TaskItem.pRes := 'Brain';
TaskItem.pComp := '0';
TaskItem.pGroup := '1';
TaskItem.pParent := '0';
TaskItem.pOpen := '1';
TaskItem.pDepend := '';
TaskItem.pCaption := '';
TaskItem.pCost := '1000';
TaskItem.pNotes := 'Some Notes text';
TaskItem.pBarText := 'ex. bar text';
UgGanttChart01.AddTaskItemObject(TaskItem);
UgGanttChart01.Draw;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Make sure to add code blocks to your code group
# 3.3.3. AddTaskItemJSON
procedure AddTaskItemJSON(TaskItem: string)
1
使用JSON字串的方式來新增任務項。
//JScript
UgGanttChart01.AddTaskItemJSON("{"
+"pID: 22,"
+"pName: \"Define Chart <strong>API</strong>\","
+"pStart: \"2017-02-25\","
+"pEnd: \"2017-03-17\","
+"pPlanStart: \"2017-04-01\","
+"pPlanEnd: \"2017-04-15 12:00\","
+"pClass: \"ggroupblack\","
+"pLink: \"\","
+"pMile: 0,"
+"vpRes: \"Brian\","
+"pComp: 0,"
+"pGroup: 1,"
+"pParent: 0,"
+"pOpen: 1,"
+"pDepend: \"\","
+"pCaption: \"\","
+"pCost: 1000,"
+"pNotes: \"Some Notes text\","
+"pBarText: \"ex. bar text\","
+"category: \"My Category\","
+"sector: \"Finance\""
+"}");
UgGanttChart01.Draw;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
begin
UgGanttChart01.AddTaskItemJSON('{'
+'pID: 22,'
+'pName: "Define Chart <strong>API</strong>",'
+'pStart: "2017-02-25",'
+'pEnd: "2017-03-17",'
+'pPlanStart: "2017-04-01",'
+'pPlanEnd: "2017-04-15 12:00",'
+'pClass: "ggroupblack",'
+'pLink: "",'
+'pMile: 0,'
+'vpRes: "Brian",'
+'pComp: 0,'
+'pGroup: 1,'
+'pParent: 0,'
+'pOpen: 1,'
+'pDepend: "",'
+'pCaption: "",'
+'pCost: 1000,'
+'pNotes: "Some Notes text",'
+'pBarText: "ex. bar text",'
+'category: "My Category",'
+'sector: "Finance"'
+'}');
UgGanttChart01.Draw;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Make sure to add code blocks to your code group
# 3.3.4. RemoveTaskItem
procedure RemoveTaskItem(pID: Integer);
1
移除選定的任務項。移除任務項后，請使用 Draw 來更新繪圖的資訊。
# 3.3.5. ClearTasks
procedure ClearTasks;
1
清除所有的任務項。清除任務項后，請使用 Draw 來更新繪圖的資訊。
# 3.3.6. Draw
procedure Draw;
1
更新甘特圖的繪圖資訊。
# 3.3.7. AddLang
procedure AddLang(lang: string; value: string);
1
設定新增語言，此方法有兩個參數。第一個是語言的字串識別符號，第二個是包含所有替換文字對的對象，預設的設定為：
| 鍵值 | 顯示文字 | 對應中文 | 鍵值 | 顯示文字 | 對應中文 | 鍵值 | 顯示文字 | 對應中文 |
|---|---|---|---|---|---|---|---|---|
| january | January | 01 | sunday | Sunday | 星期日 | format | Format | 檢視 |
| february | February | 02 | monday | Monday | 星期一 | hour | Hour | 時 |
| march | March | 03 | tuesday | Tuesday | 星期二 | day | Day | 日 |
| april | April | 04 | wednesday | Wednesday | 星期三 | week | Week | 周 |
| maylong | May | 05 | thursday | Thursday | 星期四 | month | Month | 月 |
| june | June | 06 | friday | Friday | 星期五 | quarter | Quarter | 季 |
| july | July | 07 | saturday | Saturday | 星期六 | hours | Hours | 小時 |
| august | August | 08 | sun | Sun | 星期日 | days | Days | 天 |
| september | September | 09 | mon | Mon | 星期一 | weeks | Weeks | 周 |
| october | October | 10 | tue | Tue | 星期二 | months | Months | 月 |
| november | November | 11 | wed | Wed | 星期三 | quarters | Quarters | 季度 |
| december | December | 12 | thu | Thu | 星期四 | hr | Hr | 小時 |
| jan | Jan | 1月 | fri | Fri | 星期五 | dy | Day | 天 |
| feb | Feb | 2月 | sat | Sat | 星期六 | wk | Wk | 周 |
| mar | Mar | 3月 | resource | Resource | 資源 | mth | Mth | 月 |
| apr | Apr | 4月 | duration | Duration | 耗時 | qtr | Qtr | 季度 |
| may | May | 5月 | comp | %Comp. | 完成度 | hrs | Hrs | 小時 |
| jun | Jun | 6月 | completion | Completion | 完成度 | dys | Days | 天 |
| jul | Jul | 7月 | startdate | Start Date | 開始日期 | wks | Wks | 周 |
| aug | Aug | 8月 | enddateEnd | Date | 結束日期 | mths | Mths | 月 |
| sep | Sep | 9月 | moreinfo | More Information | 更多資訊 | qtrs | Qtrs | 季度 |
| oct | Oct | 10月 | notes | Notes | 備註 | |||
| nov | Nov | 11月 | ||||||
| dec | Dec | 12月 |
//JScript
UgGanttChart01.AddLang("zh",
"{\"format\":\"檢視\",\"hour\":\"時\",\"day\":\"日\",\"week\":\"周\",\"month\":\"月\",\"quarter\":\"季\",\"hours\":\"小時\",\"days\":\"天\", " +
"\"weeks\":\"周\",\"months\":\"月\",\"quarters\":\"季度\",\"hr\":\"小時\",\"dy\":\"天\",\"wk\":\"周\",\"mth\":\"月\",\"qtr\":\"季度\",\"hrs\":\"小時\", " +
"\"dys\":\"天\",\"wks\":\"周\",\"mths\":\"月\",\"qtrs\":\"季度\",\"resource\":\"資源\",\"duration\":\"耗時\",\"comp\":\"完成度\"," +
"\"completion\":\"完成度\",\"startdate\":\"開始日期\",\"enddate\":\"結束日期\",\"moreinfo\":\"更多資訊\",\"notes\":\"備註\"," +
"\"january\":\"01\",\"february\":\"02\",\"march\":\"03\",\"april\":\"04\",\"maylong\":\"05\",\"june\":\"06\",\"july\":\"07\"," +
"\"august\":\"08\",\"september\":\"09\",\"october\":\"10\",\"november\":\"11\",\"december\":\"12\",\"jan\":\"1月\"," +
"\"feb\":\"2月\",\"mar\":\"3月\",\"apr\":\"4月\",\"may\":\"5月\",\"jun\":\"6月\",\"jul\":\"7月\",\"aug\":\"8月\",\"sep\":\"9月\",\"oct\":\"10月\",\"nov\":\"11月\"," +
"\"dec\":\"12月\",\"sunday\":\"星期日\",\"monday\":\"星期一\",\"tuesday\":\"星期二\",\"wednesday\":\"星期三\",\"thursday\":\"星期四\"," +
"\"friday\":\"星期五\",\"saturday\":\"星期六\",\"sun\":\"星期日\",\"mon\":\"星期一\",\"tue\":\"星期二\",\"wed\":\"星期三\",\"thu\":\"星期四\",\"fri\":\"星期五\",\"sat\":\"星期六\"}");
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
UgGanttChart01.AddLang('zh',
'{"format":"檢視","hour":"時","day":"日","week":"周","month":"月","quarter":"季","hours":"小時","days":"天", ' +
'"weeks":"周","months":"月","quarters":"季度","hr":"小時","dy":"天","wk":"周","mth":"月","qtr":"季度","hrs":"小時", ' +
'"dys":"天","wks":"周","mths":"月","qtrs":"季度","resource":"資源","duration":"耗時","comp":"完成度",' +
'"completion":"完成度","startdate":"開始日期","enddate":"結束日期","moreinfo":"更多資訊","notes":"備註",' +
'"january":"01","february":"02","march":"03","april":"04","maylong":"05","june":"06","july":"07",' +
'"august":"08","september":"09","october":"10","november":"11","december":"12","jan":"1月",' +
'"feb":"2月","mar":"3月","apr":"4月","may":"5月","jun":"6月","jul":"7月","aug":"8月","sep":"9月","oct":"10月","nov":"11月",' +
'"dec":"12月","sunday":"星期日","monday":"星期一","tuesday":"星期二","wednesday":"星期三","thursday":"星期四",' +
'"friday":"星期五","saturday":"星期六","sun":"星期日","mon":"星期一","tue":"星期二","wed":"星期三","thu":"星期四","fri":"星期五","sat":"星期六"}');
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 3.3.8. PrintChart
procedure PrintChart(W: Integer; H: Integer);
1
設定頁面的大小以觸發瀏覽器列印圖表。
# 3.3.9. GetXMLProject
procedure GetXMLProject;
1
以 GanttChart 改進的 XML 格式返回包含整個專案的字串。可通過OnGetXMLProject事件來獲取此字串資訊。
# 3.3.10. GetXMLTask
procedure GetXMLTask(pID: Integer; pIdx: Boolean);
1
以 GanttChart 改進的 XML 格式返回包含指定任務項的字串。此處的pIdx僅可設定為False。可通過OnGetXMLTask事件來獲取此字串資訊。
# 3.3.11. ParseXML
procedure ParseXML(xml: string);
1
將外部定義的xml檔案匯入至專案中。方法中的xml為指定的檔案所在的地址。xml檔案的結構如下。
<project>
<task>
<pID>25</pID>
<pName>WCF Changes</pName>
<pStart></pStart>
<pEnd></pEnd>
<pPlanStart></pPlanStart>
<pPlanEnd></PlanEnd>
<pClass>gtaskred</pClass>
<pLink></pLink>
<pMile>0</pMile>
<pRes></pRes>
<pComp>0</pComp>
<pGroup>1</pGroup>
<pParent>2</pParent>
<pOpen>1</pOpen>
<pCost></pCost>
<pDepend>2,24</pDepend>
<pCaption>A caption</pCaption>
<pNotes>Text - can include limited HTML</pNotes>
</task>
</project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
欄位定義如上面對 TaskItem 參數的描述。 pClass 元素在 XML 檔案中是可選的，對於組任務預設為 ggroupblack，對於普通任務預設為gtaskblue，對於里程碑預設為 gmilestone。 XML 匯入不需要 pGantt 元素。
# 3.3.12. ParseXMLString
procedure ParseXMLString(xmlstr: string);
1
設定通過xml字串匯入專案至甘特圖中。使用的xml字串結構可參考ParseXML中的描述。
# 3.3.13. ParseJSON
procedure ParseJSON(json: string)
1
設定通過JSON文字檔案匯入專案至甘特圖中。JSON文字檔案的結構如下。
{
"pID": 1,
"pName": "Define Chart API",
"pStart": "",
"pEnd": "",
"pPlanStart": "",
"pPlanEnd": "",
"pClass": "ggroupblack",
"pLink": "",
"pMile": 0,
"pRes": "Brian",
"pComp": 0,
"pGroup": 1,
"pParent": 0,
"pOpen": 1,
"pDepend": "",
"pCaption": "",
"pCost": "",
"pNotes": "Some Notes text",
"pBarText": "ex. bar text",
"category": "My Category",
"sector": "Finance"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3.3.14. InitGantt
procedure InitGantt;
1
呼叫此方法后，可初始化甘特圖的顯示。
# 4. TUgFullCalendar
此控制元件為日曆顯示的元件，可用於設定日程顯示的相關功能。
# 4.1. 屬性
# 4.1.1. CalendarOptions
property CalendarOptions: TCalendarOptions;
1
用於設定日曆的相關選項。此項下的各屬性需在設計階段進行設定，在運行階段修改相關屬性無效。
# 4.1.1.1. AllDaySlot
property AllDaySlot: Boolean;
1
設定日程表在周與日下頂部的 全天 行是否顯示。
# 4.1.1.2. AllDayText
property AllDayText: String;
1
設定日程表在周與日下頂部的 全天 欄顯示的文字。
# 4.1.1.3. AspectRatio
property AspectRatio: Double;
1
設定日程表的寬高比，預設為 1.35。日程表是塊級元素，會盡量撐滿寬度。
# 4.1.1.4. BusinessHours
property BusinessHours: TStringList;
1
可用於強調特殊顯示日曆中的某些時間段。
你也可以自定義要強調的時間段，比如以下的示例表示為工作日為每週一至週四的10點至18點。
{
dow: [ 1, 2, 3, 4 ],
start: '10:00',
end: '18:00'
}
1
2
3
4
5
2
3
4
5
你也可以定義多個不同日期不同時間段。填寫時注意各括號以及符號的格式，填寫格式不正確將導致日曆無法正常顯示。
[{
dow: [ 1, 2, 3 ],
start: '08:00',
end: '18:00'
},
{
dow: [ 4, 5 ],
start: '10:00',
end: '16:00'
}]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 4.1.1.5. ButtonIcons
property ButtonIcons: TStringList;
1
定義頭部按鈕顯示的圖示，以下為填寫的示例。
{
prev: 'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
}
1
2
3
4
5
6
2
3
4
5
6
這些屬性值都是 UgFullcalendar 提供的CSS名稱，這些css名稱繫結了字型圖示。
如果不想顯示任何圖示，則可以將此屬性設定為 false。
# 4.1.1.6. ButtonText
property ButtonText: TStringList;
1
設定日曆的頭部按鈕文字。
{
today: 'today',
month: 'month',
week: 'week',
day: 'day',
list: 'list'
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 4.1.1.7. ColumnHeader
property ColumnHeader: Boolean;
1
在周/日檢視中是否顯示列頭部的標題資訊。
# 4.1.1.8. ColumnHeaderFormat
property ColumnHeaderFormat: TStringList;
1
設定在日曆的列標題上顯示的文字格式。預設的格式會隨著語言設定項 locale 的變化而變化。
在 月 模式下，如果列標題要顯示星期的簡寫，比如 週一 、 週三 之類的，可按照以下方式進行設定。
'ddd'
1
在 周 模式下，如果要顯示星期以及日期資訊，可按照以下方式進行設定。
'ddd M/D'
1
在 日 模式下，如果要顯示星期的完整寫法，比如 星期一 、 星期三 之列的，可按照以下方式進行設定。
'dddd'
1
如果列標題需要程式化控制的，可使用 ColumnHeaderText 與 ColumnHeaderHtml。
# 4.1.1.9. ColumnHeaderHtml
property ColumnHeaderHtml: TStringList;
1
這個屬性將接收一個代表單個列日期的時刻對象，並且必須返回一個要注入的 HTML 字串。
function(mom) {
if (mom.weekday() === 5) {
return '<b>Friday!</b>';
} else {
return '<i>' + mom.format('LLL') + '</i>';
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 4.1.1.10. ColumnHeaderText
property ColumnHeaderText: TStringList;
1
以程式設計方式產生將顯示在日曆列標題上的文字。函式的寫法如下。
function(mom) {
if (mom.weekday() === 5) {
return 'Friday!';
} else {
return mom.format('LLL');
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
此函式將接收一個表示單個列日期的時刻對象，並且必須返回一個要顯示的字串。
如果您只是使用格式化字串對日期進行字串化，則推薦使用 ColumnHeaderFormat。
# 4.1.1.11. ContentHeight
property ContentHeight: string;
1
設定日曆內容的高度，值可以為數字，函式Function，'auto'。
預設情況下，此值未設定，日程表的高度由aspectRatio決定。如果設定了一個整數，日曆的高度將被固定，如果內容太多，則會出現滾動條。 如果指定了一個函式，每次請求高度更新時都會呼叫這個函式。這個函式應該返回一個畫素值。如果設定為'auto'，日曆高度將會自動適用高度，呈現自然高度並且沒有滾動條。
# 4.1.1.12. CustomButtons
property CustomButtons: TStringList;
1
可以為 Header 部分自定義按鈕。
在 CustomButtons 中進行如下定義：
{
myCustomButton: {
text: '自定義按鈕',
click: function() {
alert('點選了自定義按鈕!');
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
在 Header 中進行如下定義：
{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
1
2
3
4
5
2
3
4
5
設定完成後運行示例，在日曆頭部的按鈕中可以找到 自定義按鈕。
# 4.1.1.13. DayClick
property DayClick: TStringList;
1
當用戶點選日曆上面某一天的時候觸發，回撥方法：
function( date, jsEvent, view, [ resourceObj ] ) { }
1
date是使用者點選的那一天的Date對象，使用者點選日程周檢視和日程天檢視的時間槽也一樣的。
當用戶點選日程周檢視和日程天檢視的時間槽時，allDay是false，其他全是true。
jsEvent是原生的 javascript 事件，包含點選座標之類的資訊。view是目前的可視元件 。
以下為元件鏈接至OnDayClick事件的呼叫方式，如果不清楚相關呼叫的方式，請不要隨意修改。
function(date, jsEvent, view) {console.log(event);top.ajaxRequest([CalendarJSName], "OnDayClick" , ["date="+date.format()]);}
1
# 4.1.1.14. DayPopverFormat
property DayPopoverFormat: string;
1
設定點選更多事件 eventLimitClick 彈出的標題日期格式。預設："dddd, MMMM D" 。
# 4.1.1.15. DefaultDate
property DefaultDate: string;
1
當初次載入日曆的時候顯示的初始日期。如果未指定，則預設是目前日期。
# 4.1.1.16. DefaultView
property DefaultView: string;
1
當日歷初始載入時的預設檢視。預設值是 month，它可以是可用檢視中的任意值。
UgFullCalendar有多種不同的檢視，用來顯示日期和事件，包括以下9種檢視：
month：月檢視basicWeek：基礎周檢視basicDay：基礎天檢視agendaWeek：議程周檢視agendaDay：議程天檢視listYear：年份列表listMonth：月份列表listWeek：周列表listDay：天列表
你可以定義 Header 的按鈕讓使用者可以切換檢視，可以使用 DefaultView 設定初始的檢視。
# 4.1.1.17. DisplayEventEnd
property DisplayEventEnd: Boolean;
1
是否在日曆上顯示事件結束時間，預設值設定為 False。如果 DisplayEventTime 設定為 False 的情況下，事件的結束時間無論如何都不會顯示。
# 4.1.1.18. DisplayEventTime
property DisplayEventTime: Boolean;
1
是否顯示事件時也顯示時間。如果是全天時間則不會顯示時間。如果設定為 False ，則不會在事件上顯示時間。
# 4.1.1.19. Droppable
property Droppable: Boolean;
1
確定是否可以將外部 jQuery UI 可拖動項拖放到日曆上。此選項適用於 jQuery UI 可拖動項。 您必須下載適當的 jQuery UI 檔案並初始化一個可拖動元素。 此外，您必須將日曆的 Droppable 選項設定為 True。
# 4.1.1.20. Editable
property Editable: Boolean;
1
是否允許事件可以被編輯，值為布爾型別，預設值為 False 。 Editable 決定了日程事項是否可以被調整和拖拽，這個過程會同時調整開始和結束時間。如果想單獨設定是否可以拖拽和調整，可以使用 EventStartEditable 和 EventDurationEditable 來代替。
# 4.1.1.21. EventBackgroundColor
property EventBackgroundColor: string;
1
設定日程事件的背景色，值為字串型別。可以使用任何css的顏色格式，例如#f00，#ff0000，rgb(255,0,0)或者red。此設定可以被每個數據源的 backgroundColor 屬性和每個日程的 backgroundColor 屬性覆蓋。
# 4.1.1.22. EventBorderColor
property EventBorderColor: string;
1
設定日程事件的邊框顏色，值為字串型別。可以使用任何css的顏色格式，例如#f00，#ff0000，rgb(255,0,0)或者red。此設定可以被每個數據源的 borderColor 屬性和每個日程的 borderColor 屬性覆蓋。
# 4.1.1.23. EventClick
property EventClick: TStringList;
1
當點選日曆中某個事件的時候觸發 eventClick 回撥：
function( event, jsEvent, view ) { }
1
event是 Event Object 對象，包含了日程的資訊（例如日期，標題等）jsEvent是原生的 javascript 事件，包含「點選座標」之類的資訊。view是目前的可視對象。
以下為元件鏈接至 OnEventClick 事件的呼叫方式，如果不清楚相關呼叫的方式，請不要隨意修改。
function( event, jsEvent, view ) {console.log(event);top.ajaxRequest([CalendarJSName], "OnEventClick" , ["id="+event.id,"title="+event.title]);}
1
# 4.1.1.24. EventColor
property EventColor: String;
1
設定所有日程事件的背景色和邊框顏色，值為字串型別。可以使用任何css的顏色格式，例如#f00，#ff0000，rgb(255,0,0)或者red。此設定可以被每個數據源的 color 屬性和每個日程的 color 屬性覆蓋。
# 4.1.1.25. EventDrop
property EventDrop: TStringList;
1
回撥函式，當拖動結束且日程移動另一個時間時觸發：
function( event, delta, revertFunc, jsEvent, ui, view ) { }
1
event是事件對象，包含目前日程的資訊（時間，標題等）delta表示事件被移動的時間量revertFunc是一個函式，如果被呼叫的話，日程會恢復到拖拽前的時間（就是被還原），當ajax失敗的時候比較有用。jsEvent是原生的js對象，包含滑鼠點選座標等資訊。ui是 jQuery UI 對象。view是目前的可視對象。
以下為元件鏈接至 OnEventDrop 事件的呼叫方式，如果不清楚相關呼叫的方式，請不要隨意修改。
function( event, delta, revertFunc, jsEvent, ui, view ) {console.log(event);if (!confirm("Are you sure about this change?")) {revertFunc();}top.ajaxRequest([CalendarJSName], "OnEventDrop" , ["id="+event.id,"title="+event.title,"start="+event.start.format()]);}
1
# 4.1.1.26. EventDurationEditable
property EventDurationEditable: Boolean;
1
是否允許通過 resize 調整日程的結束時間，預設值為true。此設定可以覆蓋數據源的 durationEditable 屬性和單個日程的 durationEditable 屬性。
# 4.1.1.27. EventLimit
property EventLimit: Boolean;
1
設定是否限制顯示在一天的事件數。當事件太多時，會顯示一個看起來像「+ 2更多」的鏈接。這發生在當用戶點選鏈接的具體行動是由 EventLimitClick 控制。
false值（預設值）將顯示所有事件。true值將將事件數限制為日單元格的高度。
對於議程檢視中的全天部分，true 值將限制事件數為5。
# 4.1.1.28. EventLimitClick
property EventLimitClick: string
1
當用戶點選「更多」鏈接時發生的動作，支援"popover", "week", "day", view name, function。
"popover"，預設，在單元格上顯示一個矩形面板，並顯示當天的全部事件列表。"week"，進入周檢視。"day"，進入日檢視。view name，進入定義的任意可用檢視。function，觸發回撥函式。
# 4.1.1.29. EventLimitText
property EventLimitText: string
1
設定日曆事件超出限制條數的文字，預設： more，當然這個設定要生效的話要依賴 EventLimit 的設定。
# 4.1.1.30. EventOrder
property EventOrder: string
1
確定具有相同日期/時間的的垂直排序方式。
String / Array / Function, default: "title"
1
預設情況下，UgFullCalendar決定具有較長持續時間和較早開始時間的事件被排序在其他事件之上。 但是，事件往往具有相同的確切的開始時間和持續時間，對於全天事件尤其如此。 預設情況下，當發生這種情況時，事件按標題按字母順序排序。
# 4.1.1.31. EventResizableFromStart
property EventResizableFromStart: Boolean;
1
設定是否允許從開始處調整事件的長短。
# 4.1.1.32. EventResize
property EventResize: TStringList
1
回撥函式，當日程事件調整（resize）結束並且事件被改變時觸發：
function( event, delta, revertFunc, jsEvent, ui, view ) { }
1
event是 Event Object 對象，包含目前日程的資訊（時間，標題等）delta表示事件被移動的時間量revertFunc是一個函式，如果被呼叫的話，日程會恢復到拖拽前的時間（就是被還原），當ajax失敗的時候比較有用。jsEvent是原生的js對象，包含滑鼠點選座標等資訊。ui空對象。view是目前的可視對象。
以下為元件鏈接至 OnEventResize 事件的呼叫方式，如果不清楚相關呼叫的方式，請不要隨意修改。
function( event, delta, revertFunc, jsEvent, ui, view ) {console.log(event);if (!confirm("is this okay?")) {revertFunc();}top.ajaxRequest([CalendarJSName], "OnEventResize" , ["id="+event.id,"title="+event.title,"start="+event.start.format()]);}
1
# 4.1.1.33. EventResourcesEditable
property EventResourceEditable: Boolean;
1
確定使用者是否可以在資源之間拖動事件。預設值繼承自主可編輯標誌，預設為 False。
# 4.1.1.34. Events
property Events: TStringList;
1
設定初始化狀態下陣列型別的事件數據源。事件數據以陣列的形式給UgFullCalendar進行呼叫。
[
{
title : 'event1',
start : '2017-11-01'
},
{
title : 'event2',
start : '2017-11-05',
end : '2017-11-07'
},
{
title : 'event3',
start : '2017-11-09T12:30:00',
allDay : false
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 4.1.1.35. EventStartEditable
property EventStartEditable: Boolean;
1
是否允許通過拖拽調整日程的開始時間，預設值為true。此設定可以覆蓋數據源的 startEditable 屬性和單個日程的 startEditable 屬性。
# 4.1.1.36. EventTextColor
property EventTextColor: string;
1
設定日程事件的文字顏色。可以使用任何css的顏色格式，例如#f00，#ff0000，rgb(255,0,0)或者red。此設定可以被每個數據源的 textColor 屬性和每個日程的 textColor 屬性覆蓋。
# 4.1.1.37. EventTimeFormat
property EventTimeFormat: string;
1
設定事件上顯示的時間的格式。
以下格式將會被顯示為7:00，為12小時制式的顯示方式。
h:mm
1
以下格式將會被顯示為7p。
h(:mm)t
1
如果需要顯示24小時制的時間，請使用以下格式。
H:mm
1
# 4.1.1.38. FirstDay
property FirstDay: Integer;
1
設定每週的第一天，預設0（週日），其取值必須代表一週中的某一天，0=週日，1=週一，2=週二，以此類推。如果把 WeekNumberCalculation 的值設為'ISO'，則預設值是1（週一）。
# 4.1.1.39. FixedWeekCount
property FixedWeekCount: Boolean;
1
設定月檢視模式下顯示的週數，預設 true 。如果是 true 則每次固定顯示6周，如果設定為 false ，則每月根據實際週數顯示4，5，6周。
# 4.1.1.40. Footer
property Footer: Boolean;
1
用於定義日曆尾部內容，預設 false ，即不顯示尾部資訊。與 Header 相同，也支援header的屬性參數。
# 4.1.1.41. HandleWindowResize
property HandleWindowResize: Boolean;
1
用來設定當視窗大小改變的時候，自動調整日曆的大小。預設值為 true。當設定為 true 的時候，瀏覽器 Resize 的時候會自動調整日程表的大小。
# 4.1.1.42. Header
property Header: TStringList;
1
用於定義日曆頭部的按鈕和標題。預設程式碼是：
{
left: 'title',
center: '',
right: 'today prev,next'
}
1
2
3
4
5
2
3
4
5
如果直接將header選項設定為 false，則不會顯示頭部內容。使用類似上面的一個對象，包含left，center和right，值是字串型別的，使用逗號或者空格分隔開，區別在於 : 空格分隔，按鈕之間有間隙；使用逗號 , 分隔，按鈕之間沒有間隙，即緊鄰。字串可以使用下面的值：
title：包含目前月/周/日內容
prev：按鈕，用於切換到上一 月/周/日
next： 按鈕，用於切換到下一 月/周/日
prevYear：按鈕，用於切換到上一年
nextYear ：按鈕，用於切換到下一年
today：按鈕，返回目前月/周/日
a View Name：用於切換到指定View
如果為這些屬性指定一個空字串，則不會顯示任何內容。
# 4.1.1.43. Height
property Height: string;
1
設定整個日曆的高度（包括頭），其中可填寫的數值為數字整型、函式、'parent'、'auto'。預設情況下，此值未設定，日程表的高度由 AspectRatio決定。
如果設定了一個整數，日曆的高度將被固定，如果顯示的內容超過了設定的高度值，則會出現滾動條。
如果指定了一個函式，每次請求高度更新時都會呼叫這個函式。這個函式應該返回一個畫素值。
如果設定為 'parent' ，日曆的高度將會與父容器元素匹配。
如果設定為 'auto' ，日曆高度將會自動適用高度，呈現自然高度並且沒有滾動條。
# 4.1.1.44. HiddenDays
property HiddenDays: string;
1
在日曆中不顯示一週中的某幾天，陣列形式，從0-6分別表示週日（Sunday）-週一（Monday），如以下表述方式為隱藏週二和週四：
[ 2, 4 ]
1
以下表述方式為隱藏週一、週三、週五：
[ 1, 3, 5 ]
1
預設不隱藏任何一天，除非 Weekends 設定成 false。
# 4.1.1.45. IsRTL
property IsRTL: Boolean;
1
將日曆展示為從右向左顯示。預設 false 。這個選項主要用於一些如阿拉伯語的書寫習慣。
# 4.1.1.46. ListDayAltFormat
property ListDayAltFormat: string;
1
設定列表檢視中右側日期格式，可以是字串也可以是布林值，如果為 false ，則不顯示。
# 4.1.1.47. ListDayFormat
property ListDayFormat: string;
1
設定列表檢視中右側日期格式，可以是字串也可以是布林值，如果為 false ，則不顯示。
# 4.1.1.48. Locale
property Locale: String;
1
自定義語言和本地化選項。字串，預設是 zh-cn 。可選擇其它的語言項進行設定。
# 4.1.1.49. MaxTime
property MaxTime: string;
1
設定日程最大時間，預設 24:00:00 。
# 4.1.1.50. MinTime
property MinTime: string;
1
設定日程開始最小時間，通過滾動條滾動展示其他時間事件，預設"00:00:00"。
# 4.1.1.51. NavLinkDayClick
property NavLinkDayClick: TStringList;
1
當點選天名稱的時候觸發回撥函式，觸發函式后不會跳轉到對應的檢視。
在下方的示例中填寫了用於觸發 OnNavLinkDayClick 的函式，如不瞭解其含義請不要隨意修改預設的設定。
function(date, jsEvent) {console.log("day", date.format()); console.log("coords", jsEvent.pageX, jsEvent.pageY);top.ajaxRequest([CalendarJSName], "OnNavLinkDayClick" , ["date="+date.format()]);}
1
# 4.1.1.52. NavLinks
property NavLinks: Boolean;
1
允許 日/周 的名稱是否可點選，包括周次(WeekNumber)，點選之後可以跳轉到對於的檢視，預設 false 。
# 4.1.1.53. NavLinkWeekClick
property NavLinkWeekClick: TStringList;
1
當點選日曆左側的週數（第幾周）時，觸發回撥函式。觸發函式后不會跳轉到對應的檢視。
在下方的示例中填寫了用於觸發 OnNavLinkWeekClick 的函式，如不瞭解其含義請不要隨意修改預設的設定。
function(weekStart, jsEvent) {console.log("week start", weekStart.format()); console.log("coords", jsEvent.pageX, jsEvent.pageY);top.ajaxRequest([CalendarJSName], "OnNavLinkWeekClick" , ["date="+weekStart.format()]);}
1
# 4.1.1.54. NextDayThreshold
property NextDayThreshold: string;
1
當一個事件的結束時間跨越到第二天的時間時，就像一天中的時間呈現最短的持續時間。預設：09:00:00（上午9點）。
# 4.1.1.55. NoEventsMessage
property NoEventsMessage: string;
1
如果在給定的日期範圍內沒有任何事件，則在列表檢視中顯示的文字，預設是：沒有事件顯示。
# 4.1.1.56. NowIndicator
property NowIndicator: Boolean;
1
是否顯示指示目前時間的標記，預設 false。當用戶檢視日曆時，指示器會自動重新定位。
# 4.1.1.57. ScrollTime
property ScrollTime: string;
1
設定預設滾動到的時間點，可以通過滾動條滾動顯示不再檢視區內的時間。預設是06:00:00(早上6點)。
# 4.1.1.58. Select
property Select: TStringList;
1
在日曆中選擇某個時間之後觸發該回調函式。
function( start, end, jsEvent, view, [ resource ] )
1
start：表示你選中區域的開始時間，Date對象。end：表示你選中區域的結束時間，Date對象。當allday為true的時候，endDate可以包括最後一天（其實就是<和<=的區別）。jsEvent：是原始Js event對象，包含滑鼠座標等。如果是通過 select方法 選中的，jsEvent是undefined。 以下為元件鏈接至OnSelect事件的呼叫方式，如果不清楚相關呼叫的方式，請不要隨意修改。
function( start, end, jsEvent, view,) {console.log(jsEvent); top.ajaxRequest([CalendarJSName], "OnSelect" , ["start="+$.fullCalendar.formatDate(start,"YYYY-MM-DD HH:mm:ss"),"end="+$.fullCalendar.formatDate(end,"YYYY-MM-DD HH:mm:ss")]);calendar.fullCalendar("unselect");}
1
# 4.1.1.59. Selectable
property Selectable: Boolean;
1
是否允許使用者單擊或者拖拽日曆中的天和時間隙。預設false。
# 4.1.1.60. SelectAllow
property SelectAllow: TStringList;
1
使用回撥函式精確控制可選區域。
function(selectInfo)
1
selectInfo 對像有3個屬性：
start：開始時間end：結束時間resourceId：資源id
# 4.1.1.61. SelectMinDistance
property SelectMinDistance: Integer;
1
在滑鼠按下後允許滑行一定的距離可以選擇。預設是0，即不限制滑鼠必須移動的距離。
# 4.1.1.62. SelectOverlap
property SelectOverlap: Boolean;
1
確定是否允許使用者選擇事件佔用的時間段。當可選選項被啟用並給出 false 時，將不允許使用者選擇與日曆上的事件相交的時間段。 如果給出 true（預設值），使用者將能夠自由選擇任何時間段。
# 4.1.1.63. ShowNonCurrentDates
property ShowNonCurrentDates: Boolean;
1
在月檢視中，是否顯示上個月和下個月的日期，預設true。
# 4.1.1.64. SlotDuration
property SlotDuration: string;
1
顯示時間間隔，預設00:30:00，即30分鐘。
# 4.1.1.65. SlotEventOverlap
property SlotEventOverlap: string;
1
設定日程檢視中的事件是否可以重疊，預設值為true，事件會相互重疊，最多一半會被遮住。
# 4.1.1.66. SlotLabelFormat
property SlotLabelFormat: TStringList;
1
設定日曆y軸上顯示的時間文字格式。預設為h(:mm)a。
# 4.1.1.67. SlotLabelInterval
property SlotLabelInterval: string;
1
設定時間軸展示時間間隔文字，它可以自動根據 SlotDuration 來決定，如果 SlotDuration 的值為30分鐘，那它的值就是1小時。
# 4.1.1.68. SlotWidth
property SlotWidth: string;
1
確定每個時間軸槽的寬度。 指定為畫素數。如果未指定，將自動計算一個合理的值。
# 4.1.1.69. ThemeSystem
property ThemeSystem: string;
1
指定日曆使用哪種風格面板。有以下三種皮膚供選擇：
standard：預設，使用UgFullcalendar自帶的面板。bootstrap3：使用bootstrap3風格，需要下載 (opens new window)對應的css樣式檔案，jquery-ui：使用jquery-ui風格，需要下載 (opens new window)對應的css樣式
此外，UgFullcalendar還支援Bootstrap的其他第三方風格。
# 4.1.1.70. TimeZone
property TimeZone: string;
1
設定日曆的時區範圍。可以是false、local、UTC或者字串如America/Chicago。
false：沒有時區如果不儲存時區資訊，那麼所有活動事件在所有客戶機上呈現一致性，時間上跟時區就沒關係了。
'local'：客戶機時區使用本地時區，則你的活動事件在不同時區的客戶機上會顯示客戶機的當前所在時區的時間。
'UTC'：世界標準時間日曆中的事件活動以標準時間展示。
時區字串：例如
America/Chicago根據世界各地時區差別，定製某個時區時間。
# 4.1.1.71. TitleFormat
property TitleFormat: TStringList;
1
設定日曆頭部的標題格式。
比如目前屬性設定為以下內容：
'YYYY MMMM'
1
則在月模式下，會按照格式進行顯示，比如2021年 十二月。
如果按照下述方式進行設定：
'YYYY MMM D'
1
在周模式下，會按照格式進行顯示，比如 2021 12月 19-25。
如果按照下述方式進行設定：
'YYYY MMMM D'
1
在日模式下，會按照格式進行顯示，比如2021年12月15。
# 4.1.1.72. TitleRangeSeparator
property TitleRangeSeparator: string;
1
確定在工具欄標題中格式化日期範圍時的分隔符文字。其設定與 TitleFormat 協同工作。
# 4.1.1.73. UnSelectAuto
property UnselectAuto: Boolean;
1
設定當點選頁面其他地方的時候，是否清除已選擇的區域，預設值 true。只有當 Selectable 設定為 true 的時候才有效。
# 4.1.1.74. UnSelectCancel
property UnselectCancel: string;
1
指定某些元素忽略 UnselectAuto 選項（貌似必須是form表單）。預設為空。遵循 Jquery selecter，點選元素，不會清除選中狀態。
# 4.1.1.75. ValidRange
property ValidRange: TStringList;
1
限制日曆可用日期範圍，有效範圍之外的日期會變灰，使用者無法將時間拖動會調整到這些區域。導航箭頭也會不可用。以下程式碼只可用的日期範圍是2017-05-01～2017-06-01：
{
start: '2017-05-01',
end: '2017-06-01'
}
1
2
3
4
2
3
4
# 4.1.1.76. Weekends
property Weekends: Boolean;
1
用來設定是否在日曆中顯示週末，預設為true。
# 4.1.1.77. weekNumberCalculation
property WeekNumberCalculation: string;
1
設定用於計算和顯示週數的方法，預設是"local"，也可以設定成"ISO"，如果設定成ISO后，預設的每週第一天是1（星期一）。
# 4.1.1.78. WeekNumbers
property WeekNumbers: Boolean;
1
是否在日曆中顯示第幾周，預設false。如果設定成true，則會在月/基本檢視中左邊一列顯示週數。
# 4.1.1.79. WeekNumbersWithinDays
property WeekNumbersWithinDays: Boolean;
1
在月/基本檢視中顯示週數的樣式，預設false。
# 4.1.1.80. WindowResizeDelay
property WindowResizeDelay: Integer;
1
當調整視窗大小后，延時多少毫秒後日歷重新調整大小。目的是避免過於頻繁的調整大小，導致效能變差。
# 4.2. 事件
# 4.2.1. OnSelect
//JScript
function UgFullCalendarOnSelect(sender,startdate,enddate){};
1
2
2
//PasScript
procedure UgFullCalendarOnSelect(sender: tobject;startdate: string;enddate: string);
1
2
2
// Make sure to add code blocks to your code group
在日曆中選擇某個時間之後觸發，原理請參考 Select。
# 4.2.2. OnNavLinkDayClick
//JScript
function UgFullCalendarOnNavLinkDayClick(sender,date){};
1
2
2
//PasScript
procedure UgFullCalendarOnNavLinkDayClick(sender: tobject;date: string);
1
2
2
// Make sure to add code blocks to your code group
當點選天名稱的時候觸發事件，關於原理說明請參考 NavLinkDayClick。
# 4.2.3. OnNavLinkWeekClick
//JScript
function UgFullCalendarOnNavLinkWeekClick(sender,date){};
1
2
2
//PasScript
procedure UgFullCalendarOnNavLinkWeekClick(sender: tobject;date: string);
1
2
2
// Make sure to add code blocks to your code group
當點選日曆左側的週數（第幾周）時，觸發事件，關於原理的說明請參考 NavLinkWeekClick。
# 4.2.4. OnDayClick
//JScript
function UgFullCalendarOnDayClick(sender,date){};
1
2
2
//PasScript
procedure UgFullCalendarOnDayClick(sender: tobject;date: string);
1
2
2
// Make sure to add code blocks to your code group
當用戶點選日曆上面某一天的時候觸發事件。關於原理說明請參考 DayClick。
# 4.2.5. OnEventClick
//JScript
function UgFullCalendarOnEventClick(sender,id,title){};
1
2
2
//PasScript
procedure UgFullCalendarOnEventClick(sender: tobject;id: string;title: string);
1
2
2
// Make sure to add code blocks to your code group
當點選日曆中某個事件的時候觸發。關於原理請參考 EventClick。
# 4.2.6. OnEventDrop
//JScript
function UgFullCalendarOnEventDrop(sender,id,title,start){};
1
2
2
//PasScript
procedure UgFullCalendarOnEventDrop(sender: tobject;id: string;title: string;start: string);
1
2
2
// Make sure to add code blocks to your code group
當拖動結束且日程移動另一個時間時觸發事件，關於原理說明請參考 EventDrop。
# 4.2.7. OnEventResize
//JScript
function UgFullCalendarOnEventResize(sender,id,title,start){};
1
2
2
//PasScript
procedure UgFullCalendarOnEventResize(sender: tobject;id: string;title: string;start: string);
1
2
2
// Make sure to add code blocks to your code group
當日程事件調整（resize）結束並且事件被改變時觸發事件，關於原理說明請參考 EventResize。
# 4.3. 方法
# 4.3.1. ResizeWidget
procedure ResizeWidget;
1
使用此方法後會重新調整元件的大小以匹配控制元件區域的邊框。
# 4.3.2. AddEvent
procedure AddEvent(const Value: TEventObject);
1
在日曆中新增一個事項。新增的事項對像TEventObject中的可選屬性項說明如下。
| 屬性 | 說明 |
|---|---|
| Id | string型別，事件的唯一標識。重複事件的不同實體應該都具有相同的ID。 |
| Title | String，必選，事件名稱。 |
| AllDay | Boolean型別，true或false，可選項。 事件是否發生在特定的時間。 該屬性影響是否顯示事件的時間。 此外，在議程檢視中，確定是否顯示在「全天」部分。 |
| StartStr | 事件開始日期/時間，必選。格式為ISO8601字串或UNIX時間戳 |
| EndStr | 事件結束日期/時間，可選。格式為ISO8601字串或UNIX時間戳 |
| Url | 事件鏈接地址，字串，可選。 當單擊事件的時候會跳轉到對應的url。 |
| ClassName | string型別，可選。 一個css類（或者一組），附加到事件的 DOM 元素上。 |
| Editable | true或false，可選。 只針對目前的單個事件，其他事件不受影響。 |
| StartEditable | true或false，可選。 覆蓋目前事件的eventStartEditable選項 |
| DurationEditable | true或false，可選。 覆蓋目前事件的eventDurationEditable選項 |
| ResourceEditable | true或false，可選。 覆蓋目前事件的 eventResourceEditable選項 |
| Rendering | 允許渲染事件，如背景色等。可以為空，也可以是"background", or"inverse-background" |
| Overlap | true或false，可選。 覆蓋目前事件的eventOverlap選項。 如果設定為false，則阻止此事件被拖動/調整為其他事件。 還可以防止其他事件在此事件中被拖動/調整大小。 |
| Constraint | 事件id，"businessHours"，對象，可選。 覆蓋目前事件的eventConstraint選項。 |
| Source | Event Source Object事件源 |
| BackgroundColor | 和 eventBackgroundColor 作用一樣，設定事件的背景色。 |
| BorderColor | 和 eventBorderColor 作用一樣，設定事件的邊框。 |
| TextColor | 和 eventTextColor 作用一樣，設定事件的文字顏色 |
新增事項的示例用法如下。
//JScript
var EventObject = new TEventObject();
EventObject.Id = "1";
EventObject.Title = "event1";
EventObject.StartStr = "2022-01-15 12:00:00";
EventObject.EndStr = "2022-01-18 13:00:00";
UgFullCalendar01.AddEvent(EventObject);
EventObject.Free;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
Var
EventObject: TEventObject;
begin
EventObject := TEventObject.Create;
EventObject.Id := '1';
EventObject.Title := 'event1';
EventObject.StartStr := '2022-01-15 12:00:00';
EventObject.EndStr := '2022-01-18 13:00:00';
UgFullCalendar01.AddEvent(EventObject);
EventObject.Free;
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 4.3.3. Prev
procedure Prev;
1
跳轉至日曆頁面的前一頁。
# 4.3.4. Next
procedure Next;
1
跳轉至日曆頁面的后一頁。
# 4.3.5. PrevYear
procedure PrevYear;
1
跳轉至日曆前一年的頁面。
# 4.3.6. NextYear
procedure NextYear;
1
跳轉至日曆后一年的頁面。
# 4.3.7. Today
procedure Today;
1
當日歷處於非今天狀態的頁面時，呼叫此方法可快速跳轉至今天的日曆頁面。
# 4.3.8. GoToDate
procedure GotoDate(value: string);
1
設定日曆頁面跳轉至指定的日期。
//JScript
UgFullCalendar01.GotoDate("2021-01-12");
1
2
2
//PasScript
UgFullCalendar01.GotoDate('2021-01-12');
1
2
2
// Make sure to add code blocks to your code group
# 4.3.9. IncrementDate*
procedure IncrementDate(value: string);
1
在目前選擇的日期上，前進或後退的時長。有以下幾種表達方式。
//JScript
UgFullCalendar01.IncrementDate("\"23:59\""); // 時/分
UgFullCalendar01.IncrementDate("\"23:59:59\""); // 時/分/秒
UgFullCalendar01.IncrementDate("\"1.23:59:59\""); // 日/時/分/秒
UgFullCalendar01.IncrementDate("{ days:1, hours:23, minutes:59 }"); // 特定對像
1
2
3
4
5
2
3
4
5
//PasScript
UgFullCalendar01.IncrementDate('"23:59"'); // 時/分
UgFullCalendar01.IncrementDate('"23:59:59"'); // 時/分/秒
UgFullCalendar01.IncrementDate('"1.23:59:59"'); // 日/時/分/秒
UgFullCalendar01.IncrementDate('{ days:1, hours:23, minutes:59 }'); // 特定對像
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
# 4.3.10. ChangeView
procedure ChangeView(value: string);
1
切換到另一個檢視。所有可用的檢視可檢視 DefaultView 。
//JScript
UgFullCalendar01.ChangeView("agendaDay");
1
2
2
//PasScript
UgFullCalendar01.ChangeView('agendaDay');
1
2
2
// Make sure to add code blocks to your code group
# 4.3.11. RemoveEvents
procedure RemoveEvents(value: string);
1
呼叫此方法后，可從日程表中移除指定的事件。如果 value專案未設定指定的參數的話，則會刪除所有的日程資訊。如果 value 項被指定為 Id，則刪除所有此Id值的日程事項。
//JScript
UgFullCalendar01.RemoveEvents(""); //刪除所有事項
UgFullCalendar01.RemoveEvents("1"); //刪除Id為1的事項
1
2
3
2
3
//PasScript
UgFullCalendar01.RemoveEvents(''); //刪除所有事項
UgFullCalendar01.RemoveEvents('1'); //刪除Id為1的事項
1
2
3
2
3
// Make sure to add code blocks to your code group
# 4.3.12. SetOption
procedure SetOption(name: string; value: string);
1
由於UgFullCalendar中的屬性不支援通過在運行過程中通過程式直接修改生效，需呼叫此方法來實現。
比如要動態修改 Locale ，可通過以下方式來進行動態修改。
//JScript
UgFullCalendar01.SetOption("locale","zh-tw");
1
2
2
//PasScript
UgFullCalendar01.SetOption(''locale','zh-tw');
1
2
2
// Make sure to add code blocks to your code group
# 5. TUgLeafletMap
此控制元件為專業的互動式地圖顯示控制元件。
# 5.1. 屬性
# 5.1.1. MapOptions
property MapOptions: TMapOptions;
1
設定地圖相關的設定選項。
# 5.1.1.1. AnimationOptions
property AnimationOptions: TAnimationOptions;
1
動畫效果的相關設定專案。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| fadeAnimation | Boolean | 是否啟用淡出淡出動畫，預設為True。 |
| markerZoomAnimation | Boolean | Marker 標記是否使用縮放動畫進行縮放，預設為True。 |
| transform3DLimit | Integer | 定義了 CSS 轉換的最大尺寸。預設值為223，其取值不應發生變化。 |
| zoomAnimation | Boolean | 是否啟用地圖縮放動畫，預設為True。 |
| zoomAnimationThreshold | Integer | 如果縮放差異超過此值，則不會為縮放設定動畫，預設取值為4。 |
# 5.1.1.2. ControlOptions
property ControlOptions: TControlOptions;
1
控制的相關設定專案。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| attrubitionControl | Boolean | 預設情況下，是否將版權控制元件新增到地圖中。 |
| zoomControl | Boolean | 預設情況下，是否將縮放控制元件新增至地圖中。 |
# 5.1.1.3. fullscreenControl
property fullscreenControl: Boolean;
1
設定是否在地圖上新增全屏顯示的按鈕。此項僅在地圖首次初始化前可設定，初始化后的修改不生效。
# 5.1.1.4. InteractionOptions
property InteractionOptions: TInteractionOptions;
1
設定互動相關的選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| boxZoom | Boolean | 是否可以在按住 shift 鍵的同時拖動滑鼠將地圖縮放到指定的矩形區域。 |
| closePopupOnClick | Boolean | 如果不希望使用者點選地圖時彈出視窗自動關閉，則可以將其設定為 false。 |
| doubleClickZoom | String | 地圖是否可以通過雙擊來放大，以及在按住 shift 的同時雙擊來縮小。如果設定為 'center'，不管滑鼠在哪裡，雙擊縮放都將縮放到檢視的中心。 |
| dragging | Boolean | 地圖是否可以通過 滑鼠/觸控式螢幕 進行拖動。 |
| zoomDelta | Double | 控制元件在進行縮放的操作時地圖縮放的級別改變的數值大小，設定為小於1的數值可以允許縮放更精細化與顆粒化 |
| zoomSnap | Integer | 強制設定地圖的縮放級別為這個值的倍數，預設情況下，縮放級別將是其最接近的整數； 數值為0意味著不進行強制設定 |
# 5.1.1.5. KeyboardNavigationOptions
property KeyboardNavigationOptions: TKeyboardNavigationOptions;
1
設定鍵盤導航設定的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| keyboard | Boolean | 地圖是否獲得焦點，並且允許使用者通過鍵盤和 +/- 來進行瀏覽地圖。 |
| keyboardPanDelta | Integer | 按下方向鍵時，地圖平移的畫素數量。 |
# 5.1.1.6. MapStateOptions
property MapStateOptions: TMapStateOptions;
1
設定地圖狀態的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| center | string | 地圖初始化時的中心點位置，以陣列的形式來表示[30,120] |
| crs | string | 該地圖使用的座標系。如果你不確定此處表示的座標系是什麼意思，請不要更改它。 |
| maxBounds | string | 當這個選項被設定后，地圖將被限制在指定的地理邊界內， 當用戶平移將地圖拖動到檢視以外的範圍時會出現彈回的效果， 並且也不允許縮小檢視到指定範圍以外的區域（這取決於地圖的尺寸） |
| maxZoom | Integer | 地圖的最大縮放級別。 |
| minZoom | Integer | 地圖的最小縮放級別。 |
| renderer | string | 在地圖上繪製向量圖層的預設方法，預設為 L.SVG 或 L.Canvas， 這取決於瀏覽器是否支援。 |
| zoom | Integer | 設定地圖初始化時的縮放等級。 |
# 5.1.1.7. MouseWheelOptions
property MouseWheelOptions: TMouseWheelOptions;
1
設定地圖滑鼠滾輪操作的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| scrollWheelZoom | string | 地圖是否允許通過使用滑鼠滾輪進行縮放。如果設定為'center'，不管滑鼠在哪裡，都將會放大到檢視的中心。 |
| wheelDebounceTime | Integer | 限制滾輪的觸發速度（以毫秒為單位）。預設情況下，使用者通過滾輪縮放的次數間隔不能小於 40 毫秒。 |
| wheelPxPerZoomLevel | Integer | 多少滾動畫素意味著一個完整縮放級別的更改。 較小的值將使滾輪變焦更快（反之亦然）。 |
# 5.1.1.8. PanningInertiaOptions
property PanningInertiaOptions: TPanningInertiaOptions;
1
設定在修改地圖中心的方法中使用到的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| easeLinearity | Double | 平移動畫緩動的曲率因子（三次貝塞爾曲線的一個參數）。1.0 表示線性動畫，這個數字越小，曲線越彎曲。 |
| inertia | Boolean | 如果啟用，地圖的平移會有一種慣性效應，即地圖在拖動時形成動力，並在一段時間內繼續向同一方向移動。此項設定可提高在觸控式螢幕設備上的使用體驗。預設情況下是啟用的。 |
| inertiaDeceleration | Integer | 慣性運動減速的速度，以畫素/秒為單位。 |
| inertiaMaxSpeed | Integer | 慣性運動的最大速度，以畫素/秒為單位。 |
| maxBoundsViscosity | Integer | 如果設定了 maxBounds，這個選項將控制拖動地圖時邊界的穩固程度。預設值為 0.0，允許使用者以正常速度在界外拖動，更高的值會減慢地圖在界外的拖動速度，而 1.0 使界外完全穩固，防止使用者在界外拖動。 |
| worldCopyJump | Boolean | 啟用該選項后，當你平移到世界的另一個 "copy" 時，地圖會跟蹤並無縫跳轉到原來的副本，這樣所有的覆蓋物如 markers（標記）和 vector layers（向量圖層）都仍然可見。 |
# 5.1.1.9. preferCanvas
property preferCanvas: Boolean;
1
是否使用 Canvas 來渲染 Path（路徑）。預設情況下，所有 Path 都是使用 SVG 進行渲染。
# 5.1.1.10. TouchInterationOptions
property TouchInterationOptions: TTouchInterationOptions;
1
設定地圖觸控互動的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。
| 屬性名稱 | 型別 | 說明 |
|---|---|---|
| bounceAtZoomLimits | Boolean | 如果您不希望在地圖縮放超過最小/最大縮放範圍時反彈，請將其設定為 false。 |
| tap | Boolean | 是否啟用 mobile hacks 以支援 taps（在 iOS / Android上 修復 200ms 點選延遲）和 touch（觸發 contextmenu 事件）。 |
| taptolerance | Integer | 使用者在觸控時，移動手指的畫素數超過此值時被認為是有效的 tap。 |
| touchZoom | string | 地圖是否允許通過兩根手指的觸控拖動進行縮放。如果通過 'center'，就會放大到檢視的中心，而不管 touch 事件（手指）在哪裡。對具有 touch-capable 功能的網路瀏覽器來說是啟用的。 |
# 5.2. 事件
| 事件名稱 | 觸發條件 |
|---|---|
| OnMarkerClick | 當點選地圖中的標記時觸發事件 |
| OnMapClick | 當點選地圖上的內容時觸發事件 |
| OnMapLocation | 當地圖定位時觸發事件 |
| OnCurrentPosition | 設定目前定位時觸發事件 |
# 5.3. 方法
# 5.3.1. InitMap
procedure InitMap;
1
呼叫此方法后，地圖控制元件將初始化。
# 5.3.2. GetCenter
procedure GetCenter;
1
獲取
# 5.3.3. GetCurrentPosition
procedure GetCurrentPosition;
1
獲取目前地圖的定位資訊。
# 5.3.4. PrintMap
procedure PrintMap;
1
呼叫地圖的列印功能。
# 5.3.5. AddNavBar
procedure AddNavBar;
1
在地圖中新增導航欄的元件。
# 5.3.6. AddScale
procedure AddScale;
1
在地圖中新增比例尺的元件。
# 5.3.7. SetView
procedure SetView(Lat: string; Lng: string; maxZoom: Integer; Options: string);
1
用指定的動畫選項來設定地圖的檢視。
//JScript
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.setView("39.924317","116.390619",13);
1
2
3
2
3
//PasScript
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.setView('39.924317','116.390619',13);
1
2
3
2
3
// Make sure to add code blocks to your code group
# 5.3.8. SetZoom
procedure SetZoom(Zoom: Integer; Options: string);
1
設定地圖的縮放級別。
//JScript
//設定放大級別
UgLeafletMap01.SetZoom(18);
1
2
3
2
3
//PasScript
//設定放大級別
UgLeafletMap01.SetZoom(18);
1
2
3
2
3
// Make sure to add code blocks to your code group
# 5.3.9. ZoomIn
procedure ZoomIn(Zoom: Integer; Options: string);
1
設定放大地圖級別的數量。
//JScript
//放大
UgLeafletMap01.ZoomIn(1);
1
2
3
2
3
//PasScript
//放大
UgLeafletMap01.ZoomIn(1);
1
2
3
2
3
// Make sure to add code blocks to your code group
# 5.3.10. ZoomOut
procedure ZoomOut(Zoom: Integer; Options: string);
1
設定縮小地圖級別的數量。
//JScript
//縮少
UgLeafletMap01.ZoomOut(1);
1
2
3
2
3
//PasScript
//縮少
UgLeafletMap01.ZoomOut(1);
1
2
3
2
3
// Make sure to add code blocks to your code group
# 5.3.11. SetZoomAround
procedure SetZoomAround(Lat: string; Lng: string; Zoom: Integer; Options: string)
1
設定縮放地圖，同時保持地圖上的指定地理位置不變（功能類似於滾動縮放和雙擊縮放操作）。
# 5.3.12. FitBounds
procedure FitBounds(LatLngBounds: string; Options: string);
1
將地圖的檢視設定在給定的矩形地理範圍內,地圖會自動計算最大縮放級別和中心點。
# 5.3.13. FitWorld
procedure FitWorld(Options: string);
1
設定一個包含整個世界的地圖檢視，其縮放級別為最大。
# 5.3.14. PanTo
procedure PanTo(Lat: string; Lng: string; Options: string);
1
將地圖平移到一個指定的中心點。
# 5.3.15. SetMinZoom
procedure SetMinZoom(zoom: Integer);
1
設定地圖的最小縮放級別。
# 5.3.16. SetMaxZoom
procedure SetMaxZoom(zoom: Integer);
1
設定地圖的最大縮放級別。
# 5.3.17. Locate
procedure Locate(setView: Boolean; maxZomm: Integer; watch: Boolean; timeout: Integer; maximumAge: Integer; enableHighAccuracy: Boolean);
1
獲取目前設備的定位資訊，此方法要求瀏覽器訪問的網站運行在https模式下。
| 選項 | 型別 | 預設 | 說明 |
|---|---|---|---|
| watch | Boolean | false | 如果為 true，則開始使用 W3C watchPosition 方法連續觀察位置變化（而不是檢測一次）。之後你可以使用 StopLocate 方法停止觀察。 |
| setView | Boolean | false | 如果為 true，則根據檢測精度自動將地圖檢視設定為使用者位置，如果地理定位失敗，則自動設定為世界檢視。 |
| maxZoom | Integer | Infinity | 使用 setView 選項時，自動檢視設定的最大縮放。 |
| timeout | Integer | 10000 | 在觸發 locationerror 事件之前等待來自地理位置響應的毫秒數 。 |
| maximumAge | Integer | 0 | 檢測到的位置的最大時長。如果自上次地理定位響應以來經過的毫秒數少於此毫秒數，locate 則將返回快取的位置。 |
| enableHighAccuracy | Boolean | false | 啟用高精度 |
# 5.3.18. StopLocate
procedure StopLocate;
1
使用此方法后，停止定位。
# 5.3.19. AddTileLayer
procedure AddTilelayer(value: TTileLayer);
1
使用此方法可在地圖上載入瓦片圖層。
//JScript
var TileLayer,TileLayer1;
//建立圖層配置
TileLayer= new TTileLayer();
TileLayer.Id = "1";
TileLayer.tileLayer = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
TileLayer.minZoom = 1;
TileLayer.maxZoom = 18;
TileLayer.noWrap = true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer);
//建立圖層配置
TileLayer1= new TTileLayer();
TileLayer1.Id = "2";
TileLayer1.tileLayer = "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={TOKEN}";
TileLayer1.minZoom = 1;
TileLayer1.maxZoom = 18;
TileLayer1.noWrap = true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
Var
TileLayer,TileLayer1:TTileLayer;
begin
//建立圖層配置
TileLayer:=TTileLayer.Create;
TileLayer.Id := '1';
TileLayer.tileLayer := 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
TileLayer.minZoom := 1;
TileLayer.maxZoom := 18;
TileLayer.noWrap := true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer);
//建立圖層配置
TileLayer1:=TTileLayer.Create;
TileLayer1.Id := '2';
TileLayer1.tileLayer := 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={TOKEN}';
TileLayer1.minZoom := 1;
TileLayer1.maxZoom := 18;
TileLayer1.noWrap := true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer1);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Make sure to add code blocks to your code group
其中的瓦片圖層使用的URL地址為以下的格式：
'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'
1
{s} 是指可用的子域之一（按順序使用，以幫助解決每個域的瀏覽器並行請求限制；子域值在選項中指定;預設為 a, b 或 c , 可以省略), {z} — 縮放級別, {x} 和 {y} — 瓦片座標。 {r} 可以用來在URL中新增 "@2x" 以載入視網膜瓦片。
# 5.3.20. LayerGroupAddLayer
procedure LayerGroupAddLayer(Id: string)
1
將給定的圖層新增到組中。
//JScript
UgLeafletMap01.LayerGroupAddLayer("1");
UgLeafletMap01.LayerGroupAddLayer("2");
UgLeafletMap01.MapAddLayerGroup;
UgLeafletMap01.MapAddControlLayers;
1
2
3
4
5
2
3
4
5
//PasScript
begin
UgLeafletMap01.LayerGroupAddLayer('1');
UgLeafletMap01.LayerGroupAddLayer('2');
UgLeafletMap01.MapAddLayerGroup;
UgLeafletMap01.MapAddControlLayers;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
# 5.3.21. FeatureGroupAddLayer
procedure FeatureGroupAddLayer(Id: string);
1
將給定的圖層新增至要素組中。
# 5.3.22. MapAddTileLayer
procedure MapAddTilelayer(Id: string);
1
為地圖新增給定的瓦片圖層。
# 5.3.23. MapAddLayerGroup
procedure MapAddLayerGroup;
1
為地圖新增特定的組。
# 5.3.24. MapAddFeatureGroup
procedure MapAddFeatureGroup;
1
為地圖新增特定的要素組。
# 5.3.25. MapAddControlLayers
procedure MapAddControlLayers;
1
為地圖新增控制層。
# 5.3.26. SpeedUp
procedure SpeedUp;
1
加快標記的移動速度。
# 5.3.27. SpeedDown
procedure SpeedDown;
1
減慢標記的移動速度。
# 5.3.28. Start
procedure Start;
1
設定開始移動標記。
# 5.3.29. Pause
procedure Pause;
1
設定暫停移動標記。
# 5.3.30. Stop
procedure Stop;
1
設定停止移動標記。
# 5.3.31. AddMarker
procedure AddMarker(value: TMarker);
1
在地圖上新增一個標記。
//JScript
var Marker,Icon;
//建立圖示
Icon = new TBaseIcon();
Icon.IconUrl = "files/car_red.png";
//建立Marker
Marker = TMarker;
Marker.Id = "2";
Marker.Keyboard = true;
Marker.Title = "";
Marker.Alt = " ";
Marker.Lat = "30.675048";
Marker.Lng = "120.604017";
Marker.Icon = Icon.ToString;
UgLeafletMap01.AddMarker(Marker);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//PasScript
Var
Marker:TMarker;
Icon:TBaseIcon;
begin
//建立圖示
Icon:= TBaseIcon.Create;
Icon.IconUrl := 'files/car_red.png';
//建立Marker
Marker := TMarker.Create;
Marker.Id := '2';
Marker.Keyboard := true;
Marker.Title := '';
Marker.Alt := ' ';
Marker.Lat := '30.675048';
Marker.Lng := '120.604017';
Marker.Icon := Icon.ToString;
UgLeafletMap01.AddMarker(Marker);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Make sure to add code blocks to your code group
# 5.3.32. DeleteAllMarker
procedure DeleteAllMarker;
1
刪除地圖上所有的標記資訊。
# 5.3.33. DeleteMarker
procedure DeleteMarker(Id: string);
1
刪除指定的地圖示記。
# 5.3.34. SetMarkerPosition
procedure SetMarkerPosition(Id: string; Lat: string; Lng: string);
1
設定指定的地圖示記指向的地理位置。
UgLeafletMap01.SetMarkerPosition('1','30.675048','120.604017');
1
# 5.3.35. SetMarkerPopupContent
procedure SetMarkerPopupContent(Id: string; Content: string);
1
設定地圖示記對應的彈出視窗中顯示的文字內容。
//JScript
var Marker,Circle;
Marker = new TMarker();
Marker.Id = "location";
Marker.Lat = lat;
Marker.Lng = lng;
UgLeafletMap01.AddMarker(Marker);
Circle= new TCircle();
Circle.Id = "location";
Circle.LatLngs = "["+lat+","+lng+"]";
Circle.Radius = trunc(StrToFloat(radius));
UgLeafletMap01.AddCircle(circle);
UgLeafletMap01.SetMarkerPopupContent("location","You are in " +radius+ " meters radius");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
procedure UgLeafletMap01OnMapLocation(sender: tobject;lat: string;lng: string;radius: string);
Var
Marker:TMarker;
Circle:TCircle;
begin
Marker := TMarker.Create;
Marker.Id := 'location';
Marker.Lat := lat;
Marker.Lng := lng;
UgLeafletMap01.AddMarker(Marker);
Circle:=TCircle.Create;
Circle.Id := 'location';
Circle.LatLngs := '['+lat+','+lng+']';
Circle.Radius := trunc(StrToFloat(radius));
UgLeafletMap01.AddCircle(circle);
UgLeafletMap01.SetMarkerPopupContent('location','You are in ' +radius+ ' meters radius');
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Make sure to add code blocks to your code group
# 5.3.36. SetMarkerTooltipContent
procedure SetMarkerTooltipContent(Id: string; Content: string);
1
設定與地圖示記繫結的工具提示顯示的內容。
//JScript
UgLeafletMap01.SetMarkerTooltipContent("1","I am here~~~");
1
2
2
//PasScript
UgLeafletMap01.SetMarkerTooltipContent('1','I am here~~~');
1
2
2
// Make sure to add code blocks to your code group
1
# 5.3.37. AddPopup
procedure AddPopup(value: TPopup);
1
新增彈出對話方塊元件。
//JScript
var Popup;
Popup= new TPopup();
Popup.Id = "1";
Popup.Lat = "30.675048";
Popup.Lng = "120.604017";
Popup.Content = "<p>I am the First Popup<p>This is the Second</br>";
UgLeafletMap01.AddPopup(Popup);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
Var
Popup:TPopup;
begin
Popup:=TPopup.Create;
Popup.Id := '1';
Popup.Lat := '30.675048';
Popup.Lng := '120.604017';
Popup.Content := '<p>I am the First Popup<p>This is the Second</br>';
UgLeafletMap01.AddPopup(Popup);
end;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 5.3.38. DeleteAllPopup
procedure DeleteAllPopup;
1
刪除所有的彈出對話方塊元件。
# 5.3.39. DeletePopup
procedure DeletePopup(Id: string);
1
刪除指定的對話方塊元件。
# 5.3.40. SetPopupPosition
procedure SetPopupPosition(Id: string; Lat: string; Lng: string);
1
設定繫結的彈出對話方塊元件顯示的經緯度位置。
# 5.3.41. SetPopupContent
procedure SetPopupContent(Id: string; Content: string);
1
設定繫結的彈出對話方塊元件顯示的文字內容。
# 5.3.42. AddPolyline
procedure AddPolyline(value: TPolyline);
1
在地圖中新增折線。
//JScript
var Polyline;
Polyline= new TPolyline();
Polyline.Id = "1";
Polyline.LatLngs = "[[31.51, 120.68],[32.77, 122.43]]";
Polyline.Color = "green";
UgLeafletMap01.AddPolyline(Polyline);
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
Var
Polyline:TPolyline;
begin
Polyline:=TPolyline.Create;
Polyline.Id := '1';
Polyline.LatLngs := '[[31.51, 120.68],[32.77, 122.43]]';
Polyline.Color := 'green';
UgLeafletMap01.AddPolyline(Polyline);
end;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// Make sure to add code blocks to your code group
# 5.3.43. DeleteAllPolyline
procedure DeleteAllPolyline;
1
刪除所有的折線。
# 5.3.44. DeletePolyline
procedure DeletePolyline(Id: string);
1
刪除指定的折線。
# 5.3.45. AddPolylineLatLng
procedure AddPolylineLatLng(Id: string; LatLng: string);
1
為指定的折線圖形根據目標經緯度的座標點新增折線。
# 5.3.46. AddPolygon
procedure AddPolygon(value: TPolygon);
1
在地圖中新增一個多邊形。
//JScript
var Polygon;
Polygon= new TPolygon();
Polygon.Id = "1";
Polygon.LatLngs = "[[30.51, 120.68],[37.77, 122.43],[34.04, 118.2]]";
Polygon.Color = "red";
UgLeafletMap01.AddPolygon(Polygon);
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
Var
Polygon:TPolygon;
begin
Polygon:=TPolygon.Create;
Polygon.Id := '1';
Polygon.LatLngs := '[[30.51, 120.68],[37.77, 122.43],[34.04, 118.2]]';
Polygon.Color := 'red';
UgLeafletMap01.AddPolygon(Polygon);
end;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// Make sure to add code blocks to your code group
# 5.3.47. DeleteAllPolygon
procedure DeleteAllPolygon;
1
刪除地圖上所有的多邊形。
# 5.3.48. DeletePolygon
procedure DeletePolygon(Id: string);
1
刪除地圖上指定的多邊形。
# 5.3.49. AddPolygonLatLng
procedure AddPolygonLatLng(Id: string; LatLng: string);
1
為指定的多邊形根據目標經緯度的座標點新增折線。
# 5.3.50. AddRectangle
procedure AddRectangle(value: TRectangle);
1
為地圖新增矩形。
//JScript
var Rectangle;
Rectangle= new TRectangle();
Rectangle.Id = "1";
//給定矩形指定的邊界，合圍的區域就是矩形
Rectangle.LatLngs = "[[54.559322, -5.767822], [56.1210604, -3.021240]]";
Rectangle.Color = "red";
Rectangle.Weight = 1;
UgLeafletMap01.AddRectangle(Rectangle);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
Var
Rectangle:TRectangle;
begin
Rectangle:=TRectangle.Create;
Rectangle.Id := '1';
//給定矩形指定的邊界，合圍的區域就是矩形
Rectangle.LatLngs := '[[54.559322, -5.767822], [56.1210604, -3.021240]]';
Rectangle.Color := 'red';
Rectangle.Weight := 1;
UgLeafletMap01.AddRectangle(Rectangle);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 5.3.51. DeleteAllRectangle
procedure DeleteAllRectangle;
1
刪除所有的矩形。
# 5.3.52. DeleteRectangle
procedure DeleteRectangle(Id: string);
1
刪除矩形。
# 5.3.53. AddRectangleLatLng
procedure AddRectangleLatLng(Id: string; LatLng: string)
1
根據給定的經緯度位置新增一個邊。
# 5.3.54. AddCircle
procedure AddCircle(value: TCircle);
1
新增一個圓形。
//JScript
var Circle;
Circle= new TCircle();
Circle.Id = "1";
//圓中心點的位置
Circle.LatLngs = "[30.675048,120.604017]";
//圓的半徑，以米為單位
Circle.Radius = 200;
UgLeafletMap01.AddCircle(Circle);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
Var
Circle:TCircle;
begin
Circle:=TCircle.Create;
Circle.Id := '1';
//圓中心點的位置
Circle.LatLngs := '[30.675048,120.604017]';
//圓的半徑，以米為單位
Circle.Radius := 200;
UgLeafletMap01.AddCircle(Circle);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
# 5.3.55. DeleteAllCircle
procedure DeleteAllCircle;
1
刪除所有的圓。
# 5.3.56. DeleteCircle
procedure DeleteCircle(Id: string);
1
刪除指定的圓。
# 5.3.57. SetCirclePosition
procedure SetCirclePosition(Id: string; Lat: string; Lng: string)
1
重新設定繫結的圓形的位置。
# 5.3.58. SetCircleRadius
procedure SetCircleRadius(Id: string; Radius: Integer);
1
重新設定指定的圓的半徑。
# 5.3.59. AddCircleMarker
procedure AddCircleMarker(value: TCircleMarker);
1
新增一個帶圓中心點的標記。
//JScript
var CircleMarker;
CircleMarker= new TCircleMarker();
CircleMarker.Id = "1";
CircleMarker.LatLngs = "[30.675048,120.604017]";
CircleMarker.Radius = 200;
UgLeafletMap01.AddCircleMarker(CircleMarker);
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
Var
CircleMarker:TCircleMarker;
begin
CircleMarker:=TCircleMarker.Create;
CircleMarker.Id := '1';
CircleMarker.LatLngs := '[30.675048,120.604017]';
CircleMarker.Radius := 200;
UgLeafletMap01.AddCircleMarker(CircleMarker);
end;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// Make sure to add code blocks to your code group
# 5.3.60. DeleteAllCircleMarker
procedure DeleteAllCircleMarker;
1
刪除所有的帶標記的圓。
# 5.3.61. SetCircleMarkerPosition
procedure SetCircleMarkerPosition(Id: string; Lat: string; Lng: string)
1
重新設定標記圓標定的位置。
# 5.3.62. SetCircleMarkerRadius
procedure SetCircleMarkerRadius(Id: string; Radius: Integer)
1
重新設定標記圓標定的半徑。
# 5.3.63. AddImageOverlay
procedure AddImageOverlay(value: TImageOverlay);
1
新增圖片的圖層。
//JScript
var ImageOverlay;
ImageOverlay= new TImageOverlay();
ImageOverlay.Id = "1";
ImageOverlay.Url = "files/car_red.png";
ImageOverlay.Bounds = "[[ 30, 120], [ 31.5, 121.88]]";
UgLeafletMap01.AddImageOverlay(ImageOverlay);
UgLeafletMap01.setZoom(8);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
Var
ImageOverlay:TImageOverlay;
begin
ImageOverlay:=TImageOverlay.Create;
ImageOverlay.Id := '1';
ImageOverlay.Url := 'files/car_red.png';
ImageOverlay.Bounds := '[[ 30, 120], [ 31.5, 121.88]]';
UgLeafletMap01.AddImageOverlay(ImageOverlay);
UgLeafletMap01.setZoom(8);
end;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 5.3.64. DeleteAllImageOverlay
procedure DeleteAllImageOverlay;
1
刪除所有的圖片圖層。
# 5.3.65. DeleteImageOverlay
procedure DeleteImageOverlay(Id: string);
1
刪除指定的圖片圖層。
# 5.3.66. SetImageOverlayBounds
procedure SetImageOverlayBounds(Id: string; LatLng: string)
1
設定圖片圖層顯示的邊界。
# 5.3.67. AddVideoOverlay
procedure AddVideoOverlay(value: TVideoOverlay);
1
新增視訊的圖層。
//JScript
var videoOverlay;
videoOverlay= new TVideoOverlay();
videoOverlay.Id = "1";
videoOverlay.Url = "https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/6ceb8e64340179614968700929/v.f30.mp4";
videoOverlay.Bounds = "[[ 30, 120], [ 31.5, 121.88]]";
UgLeafletMap01.AddVideoOverlay(videoOverlay);
UgLeafletMap01.setZoom(8);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
Var
videoOverlay:TVideoOverlay;
begin
videoOverlay:=TVideoOverlay.Create;
videoOverlay.Id := '1';
videoOverlay.Url := 'https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/6ceb8e64340179614968700929/v.f30.mp4';
videoOverlay.Bounds := '[[ 30, 120], [ 31.5, 121.88]]';
UgLeafletMap01.AddVideoOverlay(videoOverlay);
UgLeafletMap01.setZoom(8);
end;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group
# 5.3.68. DeleteAllVideoOverlay
procedure DeleteAllVideoOverlay;
1
刪除所有的視訊圖層。
# 5.3.69. DeleteVideoOverlay
procedure DeleteVideoOverlay(Id: string);
1
刪除指定的視訊圖層。
# 5.3.70. SetVideoOverlayBounds
procedure SetVideoOverlayBounds(Id: string; LatLng: string);
1
設定視訊圖層的邊界。
# 6. TUgTimeLine
此控制元件顯示為一條時間線，可通過自定義操作來實現相關方法的操作。
# 6.1. 屬性
# 6.1.1. Carousel
property Carousel: Boolean;
1
是否開啟時間線控制元件中內容的輪播功能。此功能僅對有多行顯示的時間線事項有效。
# 6.1.2. CarouselInterval
property CarouselInterval: Integer;
1
此屬性僅在 Carousel 屬性設定為 True的情況下可用，表示為輪播切換內容的時間間隔，單位為毫秒。
# 6.1.3. TimeLineHTML
property TimeLineHTML: TStringList;
1
此屬性中的內容為構建的時間線內容的源HTML內容，比如在需要重新構建時間線時，可使用UgTimeLine.TimeLineHTML.Clear來清空時間線上的內容。
# 6.2. 方法
# 6.2.1. LoadTimeLine
procedure LoadTimeLine;
1
呼叫此方法后，可載入時間線。
# 6.2.2. ADDT
function AddDT(const dt: string): string;
1
設定用於增加時間線上的時間節點。其中dt參數為要顯示在時間線時間節點上的字元內容。
//JScript
UgTimeline01.TimeLineHTML.Clear;
UgTimeline01.AddDT("2022年1月");
UgTimeline01.AddDD("1月1日","Event Heading","library/js/timeline/img/cat03.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","right");
UgTimeline01.LoadTimeLine;
1
2
3
4
5
2
3
4
5
//PasScript
UgTimeline01.TimeLineHTML.Clear;
UgTimeline01.AddDT('2022年1月');
UgTimeline01.AddDD('1月1日','Event Heading','library/js/timeline/img/cat03.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.','right');
UgTimeline01.LoadTimeLine;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
增加的時間線節點顯示如下圖。
# 6.2.3. AddDD
function AddDD(const time: string; const header: string; const img: string; const desc: string; dir: string): string;
1
呼叫此方法以增加時間線上的專案。專案中的參數說明如下。
| 名稱 | 說明 |
|---|---|
| time | 設定時間線事項的標註時間 |
| header | 設定時間線事項顯示的標題 |
| img | 設定時間線事項顯示的圖片的地址 |
| desc | 設定時間線事項的具體描述內容 |
| dir | 設定時間線事項顯示在時間線上的位置left：事項顯示於時間線的左側right：事項顯示於時間線的右側 |
以下為時間線顯示的關鍵功能程式的示例。
//JScript
UgTimeline01.TimeLineHTML.Clear;
UgTimeline01.AddDT("2022年1月");
UgTimeline01.AddDD("1月1日","Event Heading","library/js/timeline/img/cat03.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","right");
UgTimeline01.LoadTimeLine;
1
2
3
4
5
2
3
4
5
//PasScript
UgTimeline01.TimeLineHTML.Clear;
UgTimeline01.AddDT('2022年1月');
UgTimeline01.AddDD('1月1日','Event Heading','library/js/timeline/img/cat03.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.','right');
UgTimeline01.LoadTimeLine;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
增加的時間線專案顯示如下。
# 6.2.4. AddROW
function AddROW(const img: string; const desc: string): string
1
用於在多行顯示的時間線專案中增加一行資訊。其中的參數說明如下。
| 名稱 | 說明 |
|---|---|
| img | 設定時間線事項顯示的圖片的地址 |
| desc | 設定時間線事項的具體描述內容 |
如需使用此方法，則需要搭配 AddDD_Begin 與 AddDD_End 來使用。一個具體的使用示例如下。
//JScript
UgTimeline01.AddDD_Begin("10月10日","Event Heading","left");
UgTimeline01.AddROW("library/js/timeline/img/cat01.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
UgTimeline01.AddROW("library/js/timeline/img/cat02.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
UgTimeline01.AddROW("library/js/timeline/img/cat02.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
UgTimeline01.AddDD_End;
UgTimeline01.AddDD_Begin("10月11日","Event Heading","right");
UgTimeline01.AddROW("library/js/timeline/img/cat01.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
UgTimeline01.AddROW("library/js/timeline/img/cat02.png","Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
UgTimeline01.AddDD_End;
UgTimeline01.LoadTimeLine;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//PasScript
UgTimeline01.AddDD_Begin('10月10日','Event Heading','left');
UgTimeline01.AddROW('library/js/timeline/img/cat01.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
UgTimeline01.AddROW('library/js/timeline/img/cat02.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
UgTimeline01.AddROW('library/js/timeline/img/cat02.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
UgTimeline01.AddDD_End;
UgTimeline01.AddDD_Begin('10月11日','Event Heading','right');
UgTimeline01.AddROW('library/js/timeline/img/cat01.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
UgTimeline01.AddROW('library/js/timeline/img/cat02.png','Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
UgTimeline01.AddDD_End;
UgTimeline01.LoadTimeLine;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Make sure to add code blocks to your code group
顯示的效果如下。
# 6.2.5. AddDD_Begin
function AddDD_Begin(const time: string; const header: string; dir: string): string;
1
新增多行的時間線事項的起始部分，如時間節點，標題，位置等相關參數。參數說明如下。
| 名稱 | 說明 |
|---|---|
| time | 設定時間線事項的標註時間 |
| header | 設定時間線事項顯示的標題 |
| dir | 設定時間線事項顯示在時間線上的位置left：事項顯示於時間線的左側right：事項顯示於時間線的右側 |
關於用法請參考 AddRow。
# 6.2.6. AddDD_End
function AddDD_End: string;
1
確認結束目前的多行時間線事項的新增。
關於用法請參考 AddRow。
# 7. TUgGridCard
此元件顯示為分行顯示的卡片列表，可將資料庫中顯示的內容作為卡片列表進行顯示。
# 7.1. 屬性
# 7.1.1. Cards
property Cards: TStringList;
1
設定卡片顯示內容的HTML格式原始碼。通過相關方法產生的原始碼會顯示於此。一個典型的單元格式文字樣式如下。
<div class="product-card" onclick="cardclick('W-EQ-DEM-2009-2','ESP32CAM-MQTT傳輸圖片','ESP32CAM的圖片數據通過MQTT協議進行傳輸，接收資訊后回傳至界面，解析並顯示。','','library/js/grid-product-cards/images/W-EQ-DEM-2009-s.jpg')">
<img src="library/js/grid-product-cards/images/W-EQ-DEM-2009-s.jpg"/>
<h2>ESP32CAM-MQTT傳輸圖片</h2>
<h3>ESP32CAM的圖片數據通過MQTT協議進行傳輸，接收資訊后回傳至界面，解析並顯示。</h3>
<h4></h4>
</div>
1
2
3
4
5
6
2
3
4
5
6
# 7.1.2. DataSet
property DataSet: TDataSet;
1
設定卡片控制元件繫結的數據集控制元件。
# 7.2. 事件
# 7.2.1. OnCardClick
//JScript
function UgGridCard01OnCardClick(sender,aid,atitle,adescription,aprice,aimg){}
1
2
2
//PasScript
proceudre UgGridCardOnCardClick(sender:TObject,aid,atitle,adescription,aprice,aimg: string)
1
2
2
// Make sure to add code blocks to your code group
當點選卡片中的專案時觸發事件，事件中會包含點選的專案的 ID，標題，描述，價格欄，圖片源等資訊。
//JScript
function UgGridCard01OnCardClick(sender,aid,atitle,adescription,aprice,aimg)
{
Var F;
if (Pos ("APP",atitle) != 0){
ShowMessage(UGMM.LT("點選的範例為APP範例，不能在WEB頁面中打開"));
return;
}
F = UGMM.GetWebSubForm(aid);
TUgWebForm(F).Caption =atitle;
try{
if (F.ShowModal == mrOK){
}
}
Finally{
TUgWebForm(F).Close;
UGMM.DelWebSubForm(aid);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//PasScript
proceudre UgGridCardOnCardClick(sender:TObject,aid,atitle,adescription,aprice,aimg: string)
var
F: TUgWebForm;
begin
if Pos('APP',atitle) <> 0 then
begin
ShowMessage(UGMM.LT('點選的範例為APP範例，不能在WEB頁面中打開'));
exit;
end;
F := UGMM.GetWebSubForm(aid);
TUgWebForm(F).Caption :=atitle;
try
if F.ShowModal = mrOK then
begin
end;
Finally
TUgWebForm(F).Close;
UGMM.DelWebSubForm(aid);
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Make sure to add code blocks to your code group
# 7.3. 方法
# 7.3.1. AddCard
procedure AddCard(AID: string; ATitle: string; ADescription: string; APrice: string; AImg: string;AIcons: TStringList)
1
呼叫此方法以新增一個新的卡片至卡片列表中。在呼叫此方法后，需再呼叫 LoadCard 才可以將新增的卡片顯示出來。其中 AIcons 可不填寫，表示不使用圖示按鈕。
//JScript
UgGridCard01.AddCard("W-EQ-DEM-2009-2","ESP32CAM-MQTT傳輸圖片","ESP32CAM的圖片數據通過MQTT協議進行傳輸，接收資訊后回傳至界面，解析並顯示。","","library/js/grid-product-cards/images/W-EQ-DEM-2009-s.jpg");
UgGridCard01.LoadCard;
1
2
3
2
3
//PasScript
UgGridCard01.AddCard('W-EQ-DEM-2009-2','ESP32CAM-MQTT傳輸圖片','ESP32CAM的圖片數據通過MQTT協議進行傳輸，接收資訊后回傳至界面，解析並顯示。','','library/js/grid-product-cards/images/W-EQ-DEM-2009-s.jpg');
UgGridCard01.LoadCard;
1
2
3
2
3
// Make sure to add code blocks to your code group
# 7.3.2. LoadDataSet
procedure LoadDataSet;
1
設定載入控制元件繫結的數據集。
//JScript
cdsProduct.DataNodeName = "FastWeb";
cdsProduct.CommandText = "Select FileName as ID,Caption as Title,Remark as Description, NULL as Price, Img from Task_ProductExample Order by Product,Caption";
cdsProduct.Open;
UgGridCard01.LoadDataSet;
1
2
3
4
5
2
3
4
5
//PasScript
cdsProduct.DataNodeName := 'FastWeb';
cdsProduct.CommandText := 'Select FileName as ID,Caption as Title,Remark as Description, NULL as Price, Img from Task_ProductExample Order by Product,Caption';
cdsProduct.Open;
UgGridCard01.LoadDataSet;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
# 7.3.3. LoadCard
procedure LoadCard;
1
在使用 AddCard 或者 Clear 后，呼叫此方法可將卡片列表重新整理顯示。
# 7.3.4. Clear
procedure Clear;
1