制图控件
# 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