数据控制控件
# FastWeb数据控制控件
- 适用平台： APP(移动端)
FastWeb提供了一套丰富的数据展示控件，同时也提供链接数据库和访问数据的控件，在本章节中将介绍通过FastWeb的数据展示控件，讲解如何连接数据库和查询、展现数据。
# 1. 连接数据库（APP）
# 1.1. 创建数据库
本节使用到名为Pass_Cust的数据表，其数据结构如下图所示。在初始向导中FastWeb已包含此数据表，可使用该数据表直接进行测试。如果需要自行创建数据表，可直接复制下方的SQL进行表结构的生成。在其中插入几条记录数据。
CREATE TABLE [dbo].[Pass_Cust](
[cust_id] [nvarchar](50) NOT NULL,
[cust_name] [nvarchar](50) NOT NULL,
[cust_age] [nvarchar](50) NULL,
[cust_sex] [nvarchar](50) NULL,
[cust_phone] [nvarchar](50) NULL,
[cust_money] [nvarchar](50) NULL,
[cust_date] [date] NULL,
[cust_time] [time](7) NULL,
[cust_memo] [nvarchar](max) NULL,
[cust_image] [image] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('09','李敏','25','女','13555555555')
INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('11','李华','27','女','13566666666')
INSERT INTO [dbo].[Cust](cust_id,cust_name,cust_age,cust_sex,cust_phone)
VALUES('36','杨林','26','男','13444444444')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 1.2. 设置连接
# 1.2.1. 使用FD连接
使用FireDAC连接时，需要在服务端部署好对应的数据库，然后在客户端使用TUgFDConnection进行连接。
在设计器窗口中放置UgFDConnection，UgFDQuery、UgDataSource和UgAppDBGrid。
- UgFDConnection01
| 属性 | 取值 | 说明 |
|---|---|---|
| LoginPrompt | False | 是否显示数据库用户登陆提示框 |
| Params.DriverID | MSSQL | 连接数据库的类型 |
| Params.Pooled | Falsed | 是否为连接池 |
| Params.Database | test | 连接的数据库名称 |
| Params.Server | . | 连接的数据库地址 |
| Params.OSAuthent | No | 是否进行系统认证 |
| Params.User_Name | 根据认证的数据库用户进行填写 | |
| Params.Password | 根据认证的数据库用户密码进行填写 |
- UgFDQuery01
| 属性 | 取值 | 说明 |
|---|---|---|
| Connection | UgFDConnection01 | 设置其连接使用的控件 |
| CachedUpdates | True | 设置缓存更新 |
- UgDataSource01
| 属性 | 取值 | 说明 |
|---|---|---|
| DataSet | UgFDQuery01 | 设置其连接的数据集 |
- UgAppDBGrid01
| 属性 | 取值 | 说明 |
|---|---|---|
| Align | alClient | 客户区占满 |
| DataSource | UgDataSource01 | 设置其连接的数据源 |
设置脚本内容如下：
//JScript
UgFDConnection01.Connected = True;
UgFDQuery01.SQL.Text = "SELECT cust_id as 编号,cust_name as 姓名, " +
"cust_age as 年龄, cust_sex as 性别, " +
"cust_phone as 手机, cust_money as 工资, cust_date as 日期, " +
"cust_time as 时间, cust_memo as 备注, cust_image as 图像 " +
"FROM Pass_Cust";
UgFDQuery01.Open;
UgAppDBGrid01.Columns.Items[0].Width = 80; //动态设置列宽度
UgAppDBGrid01.Columns.Items[1].Width = 80;
UgAppDBGrid01.Columns.Items[2].Width = 80;
UgAppDBGrid01.Columns.Items[3].Width = 80;
UgAppDBGrid01.Columns.Items[4].Width = 80;
UgAppDBGrid01.Columns.Items[5].Width = 80;
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
Begin
UgFDConnection01.Connected := True;
UgFDQuery01.SQL.Text := 'SELECT cust_id as 编号,cust_name as 姓名, ' +
'cust_age as 年龄, cust_sex as 性别, ' +
'cust_phone as 手机, cust_money as 工资, cust_date as 日期, ' +
'cust_time as 时间, cust_memo as 备注, cust_image as 图像 ' +
'FROM Pass_Cust';
UgFDQuery01.Open;
UgAppDBGrid01.Columns.Items[0].Width := 80; //动态设置列宽度
UgAppDBGrid01.Columns.Items[1].Width := 80;
UgAppDBGrid01.Columns.Items[2].Width := 80;
UgAppDBGrid01.Columns.Items[3].Width := 80;
UgAppDBGrid01.Columns.Items[4].Width := 80;
UgAppDBGrid01.Columns.Items[5].Width := 80;
End.
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
# 1.2.2. 使用TARS连接
在TARS中设置对该数据库的连接设置。注意需要填写连接名称、数据库名称Database，用户名User_Name，密码Password以及数据库的地址Server。设置完成后需重启TARS使连接设置生效。
在FastWeb的设计窗体中放置一个UgRFConnection、一个UgRFDataSet、一个UgDataSource与一个UgAppDBGrid。
如图所示，接下来介绍以下图中显示的控件的作用。
UgRFConnection控件用来与TARS进行连接，TARS可以支持目前主流的数据库。
UgRFDataSet控件是用来进行数据库的查询、添加、删除和修改的控件，它需要通过UgRFConnection控件关联到数据库上。
UgDataSource控件是数据源控件，如果一个表格或者其他数据展示控件需要展示一个表的数据，那么首先必须将它关联到一个数据源上。
UgAppDBGrid控件就是其中一种数据展示控件。它需要绑定UgDataSource才能显示数据。
接下来，需要进行控件属性的设置。
- UgRFConnection01
| 属性 | 取值 | 说明 |
|---|---|---|
| ConnectionDefName | FastWeb | TARS中的连接设置的名称 |
| LoginOptions.UserName | 根据设定的TARS用户名与密码填写 | |
| LoginOptions.Password | 根据设定的TARS用户名与密码填写 | |
| ForceEncryption | True | 若启用了连接加密，则选择True |
| SecureKey | 根据设定的TARS安全码填写 | |
| ServerAddr | 根据设定的TARS服务器的地址填写 | |
| ServerPort | 根据设定的TARS服务器的端口填写 |
- UgRFDataSet01
| 属性 | 取值 | 说明 |
|---|---|---|
| Connection | UgRFConnection01 | 指定数据集连接的名称 |
- UgDataSource01
| 属性 | 取值 | 说明 |
|---|---|---|
| DataSet | UgRFDataSet01 | 指定绑定的数据集 |
- UgAppDBGrid01
| 属性 | 取值 | 说明 |
|---|---|---|
| DataSource | UgDataSource01 | 指定数据源 |
设置脚本内容如下：
//JScript
UgFDConnection01.Connected = True;
UgFDQuery01.SQL.Text = "SELECT cust_id as 编号,cust_name as 姓名, " +
"cust_age as 年龄, cust_sex as 性别, " +
"cust_phone as 手机, cust_money as 工资, cust_date as 日期, " +
"cust_time as 时间, cust_memo as 备注, cust_image as 图像 " +
"FROM Pass_Cust";
UgFDQuery01.Open;
UgAppDBGrid01.Columns.Items[0].Width = 80; //动态设置列宽度
UgAppDBGrid01.Columns.Items[1].Width = 80;
UgAppDBGrid01.Columns.Items[2].Width = 80;
UgAppDBGrid01.Columns.Items[3].Width = 80;
UgAppDBGrid01.Columns.Items[4].Width = 80;
UgAppDBGrid01.Columns.Items[5].Width = 80;
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
Begin
UgRFConnection01.Active := True;
UgRFDataSet01.SQL.Text := 'SELECT cust_id as 编号,cust_name as 姓名, ' +
'cust_age as 年龄, cust_sex as 性别, ' +
'cust_phone as 手机, cust_money as 工资, cust_date as 日期, ' +
'cust_time as 时间, cust_memo as 备注, cust_image as 图像 ' +
'FROM Pass_Cust';
UgRFDataSet01.Open;
UgAppDBGrid01.Columns.Items[0].Width := 80; //动态设置列宽度
UgAppDBGrid01.Columns.Items[1].Width := 80;
UgAppDBGrid01.Columns.Items[2].Width := 80;
UgAppDBGrid01.Columns.Items[3].Width := 80;
UgAppDBGrid01.Columns.Items[4].Width := 80;
UgAppDBGrid01.Columns.Items[5].Width := 80;
End.
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
启动该示例，可以查看连接效果。
# 1.3. 操作数据库
操作数据库的方式包括增、删、改、查，接下来将介绍使用两组控件实现数据库的操作功能。
# 1.3.1. 使用FD操作数据库
在FD中，用于进行数据操作的控件是UgFDQuery，可以实现增删改查的功能。常用功能如下表：
| 属性或方法 | 说明 |
|---|---|
| Close | 关闭 |
| Open | 执行查询语句,打开数据集 |
| ExecSQL | 执行SQL语句 |
| SQL.Clear | 清空SQL语句 |
| SQL.Add('SQL语句') | 添加SQL语句 |
| FieldByName('字段名') | 取某字段值 |
| ParamsByName('变量名') | 变量名称 |
| RecordCount | 查询获取到的记录数量 |
| Eof | 表末尾标志 |
| Bof | 表开头标志 |
| First | 挪到第一条记录 |
| Last | 挪到最后一条记录 |
# 1.3.2. 使用TARS操作数据库
在TARS中，用于进行数据操作的控件是UgRFDataSet，可以实现增删改查的数据库功能。使用TARS连接，脚本代码与FD类似，此处不再赘述。
# 2. TUgAppDBGrid
该组件为通用数据显示组件，用于显示表格形式的数据记录。
# 2.1. 属性
| 属性 | 功能说明 |
|---|---|
| Columns | 设置表格列 |
| DataSource | 设置获取数据的数据来源 |
| Options | 设置数据表格的选项 |
| ReadOnly | 表格是否只读 |
| WebOptions | 设置网页显示的选项 |
# 2.1.1. Columns
property Columns: TUniDBGridColumns;
设置表格列。双击控件以打开表格列编辑器进行字段编辑。
# 2.1.2. DataSource
property DataSource: TDataSource;
设置获取数据的数据来源，通常使UgDataSource来作为数据源控件适用。
# 2.1.3. Options
property Options: TUniDBGridOptions;
设置数据表格的相关选项。
| 名称 | 说明 |
|---|---|
| dgEditing | 当表格被选中时允许编辑 |
| dgTitles | 如果该属性为True，则显示表头；否则不显示 |
| dgIndicator | 该属性对表格功能无影响 |
| dgColumnsResize | 允许用户对表格宽度进行调整 |
| dgColumnMove | 允许用户移动表格列 |
| dgColLines | 在表格列之间显示竖线 |
| dgRowLines | 在表格行之间显示横线 |
| dgRowSelect | 允许选择一整行，若未设置该选项则仅选择一个单元格 |
| dgCheckSelect | 在表格最左侧列中显示勾选框，用于进行勾选操作 |
| dgCheckSelectCheckOnly | 用户仅允许勾选勾选框作为表格选中 |
| dgAlwaysShowSelection | 是否始终显示表格的选择信息，即使当前表格不是激活状态 |
| dgConfirmDelete | 删除表格中的记录时是否会进行确认删除的操作 |
| dgMultiSelect | 是否允许选择多个行 |
| dgTitleClick | 是否允许响应表格列标题的点击操作，该操作会触发OnTitleClick事件 |
| dgFilterClearButton | 在过滤条件处显示清除按钮 |
| dgTabs | 该属性对表格功能无影响 |
| dgCancelOnExit | 该属性对表格功能无影响 |
| dgAutoRefreshRow | 当表格中的内容发生变化时自动刷新当前行 |
| dgDontShowSelected | 是否不显示选择的行 |
| dgRowNumbers | 是否显示行号 |
| dgPersistentSelection | 是否进行持久化选择 |
| dgDontReloadAfterEdit | 是否在编辑后不重载 |
# 2.1.4. ReadOnly
property ReadOnly: Boolean;
设置表格是否为只读状态。
# 2.1.5. WebOptions
property WebOptions: TUnimDBGridWebOptions;
设置网页显示的选项。
| 名称 | 说明 |
|---|---|
| FetchAll | 是否加载数据集的所有记录至内存中 |
| Paged | 是否显示分页信息 |
| PageSize | 设置记录在一页中的显示量 |
# 3. TUgAppDBListGrid
UgAppDBListGrid是带有UgAppDBList功能的表格，可以通过UgDataSource控件关联到表的一些字段。
# 3.1. 属性
| 属性 | 功能说明 |
|---|---|
| Columns | 设置表格列 |
| DataSource | 设置显示的数据源信息 |
| DisclosureIcon | 是否显示行尾部的图标 |
# 3.1.1. Cloumns
property Columns: TUniDBGridColumns;
设置表格列字段的信息。
双击控件打开表格列编辑器，编辑显示的表格列信息。
# 3.1.2. DataSource
property DataSource: TDataSource;
设置获取数据的数据来源，通常使用UgDataSource来作为数据源控件适用。
# 3.1.3. DisclosureIcon
property DisclosureIcon: Boolean;
设置是否在记录行末尾显示图标。
# 4. TUgAppDBEdit
UgAppDBEdit的外观用法与UgAppEdit类似，显示为一个可以编辑的文本框，相关属性可参考TUgAppEdit中的内容。
# 4.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| CharCase | 字符的大小写转换类型 |
| ClearButton | 是否在编辑框中显示清除按钮 |
| EmptyText | 当输入框中的内容为空时显示的文字内容 |
| PasswordChar | 密码输入的替代字符 |
# 4.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 4.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 4.1.3. CharCase
property CharCase: TEditCharCase;
设置字符的大小写转换类型。
| 名称 | 说明 |
|---|---|
| ecNormal | 普通模式，不进行大小写转换 |
| ecLowerCase | 将所有的字母转换为小写 |
| ecUpperCase | 将所有的字母转换为大写 |
# 4.1.4. ClearButton
property ClearButton: Boolean;
设置是否在编辑框中存在内容时，在编辑框右侧显示清除按钮，其样式如下图所示。
# 4.1.5. EmptyText
property EmptyText: string;
设置编辑框为空时编辑框内显示的提示内容。其样式如下图所示。当向编辑框中输入内容时该提示信息会被输入的内容覆盖。
# 4.1.6. PasswordChar
property PasswordChar: Char;
当输入的信息为敏感内容（比如密码）时使用的属性，该属性将输入的字符替换为该属性设定的字符。例如当该属性指定为*时，输入框的显示如下图所示。
# 5. TUgAppDBImage
UgAppDBImage是图像显示控件，可以通过UgDataSource控件关联到表的一个图像字段。
# 5.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| AutoSize | 是否根据图片自动控制控件的大小 |
| Center | 图片是否居中 |
| Stretch | 图片是否进行拉伸以适应控件大小 |
# 5.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 5.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 5.1.3. AutoSize
property AutoSize: Boolean;
是否根据图片自动控制控件的大小。
# 5.1.4. Center
property Center: Boolean;
图片是否在控件居中位置。
# 5.1.5. Stretch
property Stretch: Boolean;
设置图片是否进行拉伸以适应控件大小。
# 6. TUgAppDBSelect
UgAppDBSelect是数据文本选择控件，可以通过UgDataSource关联到表的一个文本字段。
# 6.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| ItemIndex | 控件当前选择项的索引号 |
| Items | 设置可选择的项目 |
| Sorted | 设置是否对选项进行排序 |
# 6.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 6.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 6.1.3. ItemIndex
property ItemIndex: Integer;
该属性指定当前选择项的索引号，索引号从0开始，默认选项为-1，即不选任何一个选项。
# 6.1.4. Items
property Items: TStrings;
设置选择项。点击属性右侧的[√]按钮或者双击该属性打开编辑窗口，输入选项的内容，每项均需要换行。
# 6.1.5. Sorted
property Sorted: Boolean;
该属性用于确定是否需要对选项进行排序。
# 6.2. 事件
| 事件 | 何时触发 |
|---|---|
| OnChange | 当选项发生变化时触发该事件 |
# 7. TUgAppDBDatePicker
UgAppDBDatePicker是数据库日期输入控件，可以通过UgDataSource控件关联到表的一个日期字段。
# 7.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| Date | 设置日期控件当前选择的日期 |
| DateFormat | 设置日期显示的格式 |
| MaxYear | 设置可选年份的最大数值 |
| MinYear | 设置可选年份的最小数值 |
| SlotOrder | 设置日期选择界面的年月日的排序顺序 |
# 7.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 7.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 7.1.3. Date
property Date: TDateTime;
设置日期控件当前选择的日期。该属性可以通过脚本赋值来实现显示当天日期的功能。
UgAppDatePicker01.Date := Date; //初始化为当天日期
# 7.1.4. DateFormat
property DateFormat: string
设置日期显示的格式。比如将日期格式设置为yyyy-MM-dd，则格式化输出的日期格式为2020-04-30。或者将日期格式设置为MM/dd/yy，则格式化输出的日期为04/30/20。
# 7.1.5. MaxYear
property MaxYear: Integer;
设置在日期显示中可选的最大年份数值。
# 7.1.6. MinYear
property MinYear: Integer;
设置在日期显示中可选的最小年份数值。
# 7.1.7. SlotOrder
property SlotOrder: string;
设置选项中的日期显示顺序。比如将其设置为y/m/d，则对应的选择器中显示的内容如下：
# 8. TUgAppDBMemo
UgAppDBMemo是数据库多行文本输入控件，可以通过UgDataSource控件关联到表的一个文本字段。
# 8.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| ClearButton | 是否显示清除按钮 |
| EmptyText | 在编辑框中内容为空时显示提示内容 |
| MaxRows | 允许输入的最大行数 |
| ReadOnly | 设置是否为只读 |
# 8.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 8.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 8.1.3. ClearButton
property ClearButton: Boolean;
设置当文本编辑框中存在内容时在编辑框右侧显示清除按钮。
# 8.1.4. EmptyText
property EmptyText: string;
设置文本框内容为空时显示的提示内容。
# 8.1.5. MaxRows
property MaxRows: Integer;
设置允许输入的最大行数。
# 8.1.6. ReadOnly
property ReadOnly: Boolean;
设置文本编辑框是否为只读状态。
# 9. TUgAppDBList
UgAppDBList是数据库下拉列表框组件，可以通过UgDataSource控件关联到表的一个文本字段。其功能与UgAppDBSelect类似，都可以用来做可选项的选择。
# 9.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| Items | 设置列表中的选项 |
| ItemIndex | 设置当前选中项的索引号 |
| DisclosureIcon | 是否在列表末尾显示选项 |
| Grouped | 是否对选项进行分组显示 |
| Sorted | 是否排序后进行显示 |
| Striped | 列是否使用交替的颜色进行显示 |
# 9.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 9.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 9.1.3. Items
property Items: TStrings;
设置选择项。点击属性右侧的[√]按钮或者双击该属性打开编辑窗口，输入选项的内容，每项均需要换行。
或者在脚本中对项目进行配置。
//JScript
UgAppDBList01.Clear;
UgAppDBList01.Items.Add("AAA111");
UgAppDBList01.Items.Add("张三");
UgAppDBList01.Items.Add("AAA222");
UgAppDBList01.Items.Add("王小虎");
UgAppDBList01.Items.Add("AAA333");
UgAppDBList01.Items.Add("赵本山");
UgAppDBList01.Items.Add("BBB111");
UgAppDBList01.Items.Add("王大拿");
UgAppDBList01.Items.Add("BBB222");
UgAppDBList01.Items.Add("张家国");
UgAppDBList01.Items.Add("BBB333");
2
3
4
5
6
7
8
9
10
11
12
13
//PasScript
UgAppDBList01.Clear;
UgAppDBList01.Items.Add('AAA111');
UgAppDBList01.Items.Add('张三');
UgAppDBList01.Items.Add('AAA222');
UgAppDBList01.Items.Add('王小虎');
UgAppDBList01.Items.Add('AAA333');
UgAppDBList01.Items.Add('赵本山');
UgAppDBList01.Items.Add('BBB111');
UgAppDBList01.Items.Add('王大拿');
UgAppDBList01.Items.Add('BBB222');
UgAppDBList01.Items.Add('张家国');
UgAppDBList01.Items.Add('BBB333');
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
# 9.1.4. ItemIndex
property ItemIndex: Integer;
该属性指定当前选择项的索引号，索引号从0开始，默认选项为-1，即不选任何一个选项。
# 9.1.5. DisclosureIcon
property DisclosureIcon: Boolean;
该属性用于在每项的右侧显示一个指示图标。例如，设置为True，其显示效果如下图。
# 9.1.6. Grouped
property Grouped: Boolean;
该属性用于设置选项是否进行分组显示。例如，设置为True，其显示效果如下图。
# 9.1.7. Sorted
property Sorted: Boolean;
是否对选项进行排序。例如，设置为True，其显示效果如下图。
# 9.1.8. Striped
property Striped: Boolean;
列是否使用交替的颜色进行显示。例如，设置为True，其显示效果如下图。
# 9.2. 事件
| 事件 | 何时触发 |
|---|---|
| OnDisClose | 当Disclosure=True时，点击选项右侧的图标时触发该事件 |
| OnSelect | 当点击控件中的选项时触发该事件 |
| OnClickHold | 当控件被点击并有保持点击状态时触发该事件 |
| OnDblClick | 当控件被双击时触发该事件 |
# 10. TUgAppDBNumberEdit
UgAppDBNumberEdit是数据库数字输入控件，可以通过UgDataSource控件关联到表的一个数字型字段。
# 10.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| MaxValue | 允许输入的最大值 |
| MinValue | 允许输入的最小值 |
# 10.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 10.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 10.1.3. MaxValue
property MaxValue: Real;
设置允许输入的最大值，默认为0，表示为不限制。
# 10.1.4. MinValue
property MinValue: Real;
设置允许输入的最小值，默认为0，表示不限制。
# 11. TUgAppDBSpinner
UgAppDBSpinner是数据库数字输入控件，可以通过UgDataSource控件关联到表的一个数字型字段。
# 11.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| MaxValue | 允许输入的最大值 |
| MinValue | 允许输入的最小值 |
| Step | 设定每按一次+ -按钮的数值增减量 |
# 11.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 11.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 11.1.3. MaxValue
property MaxValue: Real;
设置允许输入的最大值，默认为0，表示为不限制。
# 11.1.4. MinValue
property MinValue: Real;
设置允许输入的最小值，默认为0，表示不限制。
# 11.1.5. Step
property Step: Real
设置每次按下+ -按钮时数值的增量或者减量。
# 12. TUgAppDBCheckBox
UgAppDBCheckBox是数据库A/B输入控件，可以通过UgDataSource控件关联到表的一个文本字段或逻辑字段。
# 12.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| Caption | 设置控件的标签说明 |
# 12.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 12.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 12.1.3. Caption
property Caption: TCaption;
该属性用于设置控件的标签说明。
# 13. TUgAppDBToggle
UgAppDBToggle是数据库字段开关切换输入控件，可以通过UgDataSource控件关联到表的一个文本字段或逻辑字段。
# 13.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
# 13.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 13.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 13.2. 事件
| 名称 | 触发条件 |
|---|---|
| OnChange | 当开关状态发生变化时触发该事件 |
# 14. TUgAppDBTimePicker
UgAppDBTimePicker是数据库时间输入控件，可以通过UgDataSource控件关联到表的一个时间字段。
# 14.1. 属性
| 属性 | 功能说明 |
|---|---|
| DataSource | 设置控件的数据来源 |
| DataField | 设置控件对应显示的数据字段 |
| MinuteSteps | 设置单步的变化量 |
| Picker | 设置事件选择器的外观样式 |
| Time | 设置当前的时间 |
| TimeFormat | 设置时间显示的格式 |
# 14.1.1. DataSource
property DataSource: TDataSource;
设置数据获取的来源。
# 14.1.2. DataField
property DataField: WideString;
设置控件对应显示的数据字段。
# 14.1.3. MinuteSteps
property MinuteSteps: Integer;
设置分钟数调整的步进。
# 14.1.4. Picker
property Picker: TUniPickerType;
设置事件选择器的外观样式。
| 名称 | 说明 | 图示 |
|---|---|---|
| dptEdge | 卡片选择式 |  |
| dptFloated | 拨号盘式 |  |
# 14.1.5. TimeFormat
property TimeFormat: string;
设置时间格式，例如HH:mm，其时间显示格式为07:30。
# 14.1.6. Time
property Time: TTime;
设置时间。
//JScript
//显示时间
ShowMessage(TimeToStr(UgAppDBTimePicker01.Time));
2
3
//PasScript
//显示时间
ShowMessage(TimeToStr(UgAppDBTimePicker01.Time));
2
3
// Make sure to add code blocks to your code group