FastWeb数据控制控件

• 适用平台： WEB(桌面)

  FastWeb提供了一套丰富的数据展示控件，同时也提供链接数据库和访问数据的控件，在特定组件上，及时显示连接的数据库的资料，或显示经由查询，统计，运算数据库回传的资料。在本章节中将介绍通过FastWeb的数据展示控件，讲解如何连接数据库和查询、展现数据。

1. 连接数据库（WEB）

1.1. 创建数据库

  本示例中将使用SQLServer作为演示用的数据库引擎，首先需要创建一个演示用的数据库test，并在其中创建表Table_Test。

CREATE TABLE [dbo].[Table_Test](
	[FCode] [nvarchar](50) NOT NULL,
	[FName] [nvarchar](50) NOT NULL,
 CONSTRAINT [PK_Table_Test] PRIMARY KEY CLUSTERED 
(
	[FCode] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, 
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

1.2. 设置连接

1.2.1. 使用FD连接

  使用FireDAC连接时，需要在服务端部署好对应的数据库，然后在客户端使用TUgFDConnection进行连接。

  在设计器窗口中放置UgFDConnection，UgFDQuery、UgDataSource和UgDBGrid。

• 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	设置其连接的数据集

• UgDBGrid01

属性	取值	说明
DataSource	UgDataSource01	设置其连接的数据源

  设置脚本内容如下：

//JScript
{
  UgFDConnection01.Connected = True;
  UgFDQuery01.SQL.Text = "SELECT * FROM Table_Test";
  UgFDQuery01.Open;
}

//PasScript
Begin
  UgFDConnection01.Connected := True;
  UgFDQuery01.SQL.Text := 'SELECT * FROM Table_Test';
  UgFDQuery01.Open;
End.

// 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与一个UgDBGrid。

  如图所示，接下来介绍以下图中显示的控件的作用。

  UgRFConnection控件用来与TARS进行连接，TARS可以支持目前主流的数据库。

  UgRFDataSet控件是用来进行数据库的查询、添加、删除和修改的控件，它需要通过UgRFConnection控件关联到数据库上。

  UgDataSource控件是数据源控件，如果一个表格或者其他数据展示控件需要展示一个表的数据，那么首先必须将它关联到一个数据源上。

  UgDBGrid控件就是其中一种数据展示控件。它需要绑定UgDataSource才能显示数据。

  接下来，需要进行控件属性的设置。

• UgRFConnection01

属性	取值	说明
ConnectionDefName	test	TARS中的连接设置的名称
LoginOptions.UserName		根据设定的TARS用户名与密码填写
LoginOptions.Password		根据设定的TARS用户名与密码填写
ForceEncryption		若启用了连接加密，则选择True
SecureKey		根据设定的TARS安全码填写
ServerAddr		根据设定的TARS服务器的地址填写
ServerPort		根据设定的TARS服务器的端口填写

• UgRFDataSet01

属性	取值	说明
Connection	UgRFConnection01	指定数据集连接的名称

• UgDataSource01

属性	取值	说明
DataSet	UgRFDataSet01	指定绑定的数据集

• UgDBGrid01

属性	取值	说明
DataSource	UgDataSource01	指定数据源

  设置脚本内容如下：

//JScript
{
  UgRFConnection01.Active = True;
  UgRFDataSet01.Close;
  UgRFDataSet01.SQL.Text = "SELECT * FROM Table_Test";
  UgRFDataSet01.Open;
}

//PasScript
Begin
  UgRFConnection01.Active := True;
  UgRFDataSet01.Close;
  UgRFDataSet01.SQL.Text := 'SELECT * FROM Table_Test';
  UgRFDataSet01.Open;
End.

// Make sure to add code blocks to your code group

  启动该示例，可以查看连接效果。

1.3. 操作数据库

  操作数据库的方式包括增、删、改、查，接下来将介绍使用两组控件实现数据库的操作功能。

1.3.1. 使用FD操作数据库

  在FD中，用于进行数据操作的控件是UgFDQuery，可以实现增删改查的功能。常用功能如下表：

属性或方法	说明
Close	关闭
Open	执行查询语句
SQL.Clear	清空SQL语句
SQL.Add('SQL语句')	添加SQL语句
FieldByName('字段名')	取某字段值
RecordCount	查询获取到的记录数量
Eof	表末尾标志
Bof	表开头标志
First	挪到第一条记录
Last	挪到最后一条记录

  本节使用上述的表格Table_Test作为演示。范例如图所示。

• 使用UgFDQuery操作数据

  UgFDQuery查询数据，只需要将执行的SQL查询语句传进去，然后再执行其Open方法即可获得查询结果，UgFDQuery本身就是一个数据集，可以存储查询结果记录集，默认当前指针指向第一条记录。

//JScript
function UgBitBtn01OnClick(sender)
//连接数据库
{
  UgFDConnection01.Connected = True;
  if (UgFDConnection01.Connected)
  {
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + "  DataBase Connected.");
  }
}

function UgBitBtn02OnClick(sender)
//查询数据
{
  if (UgFDConnection01.Connected == False)
  {
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " The database is not connected, please connect before querying.");
    Exit;
  }
  UgFDQuery01.SQL.Text = "SELECT * FROM Table_Test WHERE FCode != :p1";  //设定SQL
  UgFDQuery01.ParamByName("p1").Text = "0102";  //传递p1参数的值
  UgFDQuery01.Open;
  
  //判断是否查到数据
  if (UgFDQuery01.RecordCount > 0)
  {
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + "Qurey Records:" + IntToStr(UgFDQuery01.RecordCount));
  }
  else
  {
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " No data found.");
    Exit;
  }
  
  //循环列举数据详情
  While (!UgFDQuery01.Eof)
  {
    //添加一条记录内容
    UgMemo01.Lines.Add(UgFDQuery01.FieldByName("FCode").AsString + " " + UgFDQuery01.FieldByName("FName").AsString);
    //切换到下一条记录
    UgFDQuery01.Next;
  }
}

function UgBitBtn03OnClick(sender)
//插入
{
  if (UgFDConnection01.Connected == False)
  {
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " The database is not connected, please connect before querying.");
    Exit;
  }
  UgFDQuery01.Insert;
  UgFDQuery01.FieldByName("FID").AsString = UGMMGuid;
  UgFDQuery01.FieldByName("FCode").AsString = "0101";
  UgFDQuery01.FieldByName("FName").AsString = "Wang";
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ " Data inserted successfully!");
}

function UgBitBtn04OnClick(sender)
//删除
{
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " The database is not connected, please connect before querying.");
    Exit;
  End;
  if UgFDQuery01.IsEmpty Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " No data found.");
    Exit;
  End;
  UgFDQuery01.Delete;
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ " Record Delete!");  
}

function UgBitBtn05OnClick(sender)
//修改
{
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " The database is not connected, please connect before querying.");
    Exit;
  End;
  UgFDQuery01.Edit;
  UgFDQuery01.FieldByName("FCode").AsString = "0103";
  UgFDQuery01.FieldByName("FName").AsString = "Ming";
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ " Rows Affected!");  
}

function UgBitBtn06OnClick(sender)
//显示当前数据记录数
{
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + " The database is not connected, please connect before querying.");
    Exit;
  End;
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ "Query Records:" + IntToStr(UgFDQuery01.RecordCount));    
}

//PasScript
procedure UgBitBtn01OnClick(sender: tobject);
//连接数据库
begin
  UgFDConnection01.Connected := True;
  if UgFDConnection01.Connected = True Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + '  DataBase Connected.');
  End;
end;

procedure UgBitBtn02OnClick(sender: tobject);
//查询数据
begin
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' The database is not connected, please connect before querying.');
    Exit;
  End;
  UgFDQuery01.SQL.Text := 'SELECT * FROM Table_Test WHERE FCode <> :p1';  //设定SQL
  UgFDQuery01.ParamByName('p1').Text := '0102';  //传递p1参数的值
  UgFDQuery01.Open;
  
  //判断是否查到数据
  if UgFDQuery01.RecordCount > 0 Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' Qurey Records:' + IntToStr(UgFDQuery01.RecordCount));
  End
  Else
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' No data found.');
    Exit;
  End;
  
  //循环列举数据详情
  While not UgFDQuery01.Eof Do
  Begin
    //添加一条记录内容
    UgMemo01.Lines.Add(UgFDQuery01.FieldByName('FCode').AsString + ' ' + UgFDQuery01.FieldByName('FName').AsString);
    //切换到下一条记录
    UgFDQuery01.Next;
  End;
end;

procedure UgBitBtn03OnClick(sender: tobject);
//插入
begin
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' The database is not connected, please connect before querying.');
    Exit;
  End;
  UgFDQuery01.Insert;
  UgFDQuery01.FieldByName('FID').AsString := UGMM.CreateGuid;
  UgFDQuery01.FieldByName('FCode').AsString := '0101';
  UgFDQuery01.FieldByName('FName').AsString := 'Wang';
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ ' Row Ineserted');
end;

procedure UgBitBtn04OnClick(sender: tobject);
//删除
begin
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' The database is not connected, please connect before querying.');
    Exit;
  End;
  if UgFDQuery01.IsEmpty Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' No data found.');
    Exit;
  End;
  UgFDQuery01.Delete;
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ 'Rows Delete');  
end;

procedure UgBitBtn05OnClick(sender: tobject);
//修改
begin
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' The database is not connected, please connect before querying.');
    Exit;
  End;
  UgFDQuery01.Edit;
  UgFDQuery01.FieldByName('FCode').AsString := '0103';
  UgFDQuery01.FieldByName('FName').AsString := '小明';
  UgFDQuery01.Post;
  UgFDQuery01.ApplyUpdates(-1);
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ ' Rows Affected');  
end;

procedure UgBitBtn06OnClick(sender: tobject);
//显示当前数据记录数
begin
  if UgFDConnection01.Connected = False Then
  Begin
    UgMemo01.Lines.Add(DateTimeToStr(Now()) + ' The database is not connected, please connect before querying.');
    Exit;
  End;
  UgMemo01.Lines.Add(DateTimeToStr(Now())+ 'Rows Record:' + IntToStr(UgFDQuery01.RecordCount));    
end;

// Make sure to add code blocks to your code group

  SQL语句中可以带有参数，参数以冒号开头表示，比如':p1'、':v1'等。如果查询语句中的参数是一个固定值，则不一定必须使用参数传递，如果判断比较的值不确定，是一个变量，则需要用参数传递变量，再通过UgFDQuery01.ParamsByName('p1').Text := XXXX语句将变量传递进去。

1.3.2. 使用TARS操作数据库

  在TARS中，用于进行数据操作的控件是UgRFDataSet，可以实现增删改查的数据库功能。使用TARS连接，脚本代码与FD类似，此处不再赘述，可参考范例。

2. TUgDBGrid

  该组件为数据显示的表格。表格中的内容来源于查询获取到的数据集信息。

  在界面上双击该控件，打开字段编辑器。在该界面下，可以指定表格中显示的字段内容，以及指定每个表格的宽度大小。

2.1. 属性

属性	说明
CurrCol	当前表格中选择的列号
CurrRow	当前表格中选择的行号
Columns	设定表格列
ColumnsAutoSize	设定列宽是否跟随文字长度变化而变化
ClicksToEdit	进入编辑状态需要点击的次数
DataSource	设定数据源
EmptyText	当控件内容为空时显示的文字信息
EnableLocking	是否启用表格列锁定功能
ForceFit	是否强制使表格列宽适应控件宽度
HeaderTitle	表格头的标题
HeaderTitleAlign	设定表格头标题的对齐方式
Options	表格的相关设置
PreventWarp	是否禁止在表头或表末进行跳转
ReadOnly	是否开启只读模式
RowEditor	是否启用行编辑器
StripeRows	是否设置行使用颜色进行交替显示
Summary	汇总行信息的显示
TrackOver	当鼠标在表格上移动时是否对对应行进行高亮显示
TextSelection	表格列中的文字是否可以选择复制等操作
WebOptions	表格网页设置的选项

2.1.1. CurrCol

property CurrCol: Integer;

  表格中当前选择的列号。

2.1.2. CurrRow

property CurrRow: Integer;

  表格中当前选择的行号。

2.1.3. Columns

property Columns: TUniDesktopDBGridColumns;

  设定表格中使用的字段列。

  在界面上双击该控件，打开字段编辑器。在该界面下，可以指定表格中显示的字段内容，以及指定每个表格的宽度大小。

其中使用的表格列的部分属性如下：

属性	说明
Editor	绑定该字段的编辑控件
FieldName	字段的名称
GroupHeader	字段表格头的群组名称，可以将同组内的字段表头设定为同一个名称
WidgetColumn	如果使用到表格内的仪表内容，可使用该属性下的设置
Enable	是否启用组件
Widget	启用控件的名称， 使用的组件类型为Widget组中的部分组件，例如TUgButtonWidget等

2.1.4. ClicksToEdit

property ClicksToEdit: Integer;

  单元格进入编辑状态需要点击的次数。

2.1.5. DataSource

property DataSource: TDataSource;

  表格需使用的数据源，此处需指定数据源控件。

2.1.6. EmptyText*

property EmptyText: string;

  当控件内容为空时显示的文字内容。

2.1.7. EnableLocking

property EnableLocking: Boolean;

  是否锁定表格列，这样可以在操作滚动条时能让特定列始终保持显示状态，比如可以用于锁定序号或者名称的表格列。

2.1.8. ForceFit

property ForceFit: Boolean;

  是否使表格中的字段列强制适应控件的宽度。若设置为True则可以使表格中的每一个字段列都可以显示出来。

2.1.9. HeaderTitle

property HeaderTitle: string;

  设定表格的标题。

2.1.10. HeaderTitleAlign

property HeaderTitleAlign: TAlignment;

  设定表格标题的对齐方式。

名称	说明	图例
taLeftJustify	标题左对齐
taCenter	标题居中
taRightJustify	标题居右

2.1.11. 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	是否不显示选择的行

2.1.12. PreventWarp

property PreventWrap: Boolean;

  是否禁止在表头或表末进行跳转。

2.1.13. ReadOnly

property ReadOnly: Boolean;

  该属性设置表格是否处于只读模式。

2.1.14. RowEditor

property RowEditor: Boolean;

  该属性设置是否显示行编辑器。

2.1.15. StripeRows

property StripeRows: Boolean;

  是否启用交替颜色的表格。

2.1.16. Summary

property Summary: TUniCustomGridSummary;

  设定汇总使用的信息。

2.1.17. TrackOver

property TrackOver: Boolean;

  当鼠标在表格上移动时是否对对应行进行高亮显示。

2.1.18. WebOptions

property WebOptions: TUniCustomDBGridWebOptions;

  设置网页的相关选项。

名称	说明
AppendPosition	新的项的添加的位置（当前行或者表尾）
CustomizableCells	是否允许自定义表格
DefaultFloatFormat	设置浮点数字段默认的浮点数显示格式
FetchAll	是否加载数据集的所有记录至内存中
KeyNavigation	是否可以使用键盘来进行数据集的导航功能
Paged	是否显示分页信息
PageSize	设置记录在一页中的显示量
RetainCursorOnSort	是否在分类后保留当前行

2.2. 字段列属性

  在数据表格中建立的字段有如下属性：

属性	说明
FieldName	对应的数据集的字段名称
Filtering	过滤条件的设置
ForceStringFormat	是否将表格中的所有数值强制转换成字符串格式
GroupHeader	设置字段的群组标题
Locked	是否冻结当前字段列（与Excel的冻结功能相似）
ReadOnly	是否只读
ShowSummary	显示汇总信息

2.2.1. Filtering

property Filtering: TUniColumnFilter;

  设置过滤条件信息。

名称	说明
PreValue	前一个过滤器的值
VarValue	当前过滤器的值
ChangeDelay	应用当前VarValue的值的过滤器的时间间隔
Editor	设定使用的编辑器
Enabled	是否启用过滤条件

2.3. 事件

名称	触发条件
OnAfterLoad	表格在经过数据加载后触发该事件
OnBodyClick	表格自身点击操作时触发该事件
OnBodyDbClick	表格在进行双击后触发该事件
OnCellClick	点击表格中的单元格触发该事件
OnClearFilters	当清除表格中的过滤条件时触发该事件
OnColumnFilter	当表格列进行过滤操作时触发该事件
OnColumnMove	当表格列进行移动时触发该事件
OnColumnResize	当表格列进行宽度调整时触发该事件

3. TUgDBTreeGrid

  该组件显示为一个显示数据表中数据结构的树形列表。

  在界面上双击该控件，打开字段编辑器。在该界面下，可以指定表格中显示的字段内容，以及指定每个表格的宽度大小。

3.1. 属性

属性	说明
ClicksToEdit	进入编辑状态需要点击的次数
DataSource	设定数据源
EmptyText	当控件内容为空时显示的文字信息
ForceFit	是否强制使表格列宽适应控件宽度
HeaderTitle	表格头的标题
HeaderTitleAlign	设定表格头标题的对齐方式
IdField	当前选择项的用于构成树形结构的ID字段名称
IdParentField	当前选择项的用于构成树形结构的双亲ID字段名称
Options	表格的相关设置

3.1.1. ClicksToEdit

property ClicksToEdit: Integer;

  单元格进入编辑状态需要点击的次数。

3.1.2. DataSource

property DataSource: TDataSource;

  表格需使用的数据源，此处需指定数据源控件。

3.1.3. EmptyText*

property EmptyText: string;

  当控件内容为空时显示的文字内容。

3.1.4. ForceFit

property ForceFit: Boolean;

  是否使表格中的字段列强制适应控件的宽度。若设置为True则可以使表格中的每一个字段列都可以显示出来。

3.1.5. HeaderTitle

property HeaderTitle: string;

  设定表格的标题。

3.1.6. HeaderTitleAlign

property HeaderTitleAlign: TAlignment;

  设定表格标题的对齐方式。

名称	说明	图例
taLeftJustify	标题左对齐
taCenter	标题居中
taRightJustify	标题居右

3.1.7. IdField

property IdField: WideString;

  当前选择项的用于构成树形结构的ID字段名称。

3.1.8. IdParentField

property IdParentField: WideString;

  当前选择项的用于构成树形结构的双亲ID字段名称。

3.1.9. 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	是否不显示选择的行

3.2. 字段列属性

  在数据表格中建立的字段有如下属性：

属性	说明
FieldName	对应的数据集的字段名称
Filtering	过滤条件的设置
ForceStringFormat	是否将表格中的所有数值强制转换成字符串格式
GroupHeader	设置字段的群组标题
Locked	是否冻结当前字段列（与Excel的冻结功能相似）
ReadOnly	是否只读
ShowSummary	显示汇总信息

3.3. 事件

名称	触发条件
OnCellClick	点击表格中的单元格触发该事件

4. TUgDBVerticalGrid

  该组件显示为竖向的数据表格，字段名是按行进行排列的，所有的列均为记录。

  在界面上双击该控件，打开字段编辑器。在该界面下，可以指定表格中显示的字段内容，以及指定每个表格的宽度大小。

4.1. 属性

属性	说明
CurrCol	当前表格中选择的列号
CurrRow	当前表格中选择的行号
ClicksToEdit	进入编辑状态需要点击的次数
DataSource	设定数据源
EmptyText	当控件内容为空时显示的文字信息
HeaderTitle	表格头的标题
HeaderTitleAlign	设定表格头标题的对齐方式

4.1.1. CurrCol

property CurrCol: Integer;

  表格中当前选择的列号。

4.1.2. CurrRow

property CurrRow: Integer;

  表格中当前选择的行号。

4.1.3. ClicksToEdit

property ClicksToEdit: Integer;

  单元格进入编辑状态需要点击的次数。

4.1.4. DataSource

property DataSource: TDataSource;

  表格需使用的数据源，此处需指定数据源控件。

4.1.5. EmptyText*

property EmptyText: string;

  当控件内容为空时显示的文字内容。

4.1.6. HeaderTitle

property HeaderTitle: string;

  设定表格的标题。

4.1.7. HeaderTitleAlign

property HeaderTitleAlign: TAlignment;

  设定表格标题的对齐方式。

名称	说明	图例
taLeftJustify	标题左对齐
taCenter	标题居中
taRightJustify	标题居右

4.2. 事件

名称	触发条件
OnCellClick	点击表格中的单元格触发该事件

5. TUgDBVerticalTreeGrid

  该组件显示为一个竖向的树形列表，使用该组件需要在同一个表中显示字段，这些字段间有一些是父结点信息，一些是子结点信息，在其中需要进行设置。

  在界面上双击该控件，打开字段编辑器。在该界面下，可以指定表格中显示的字段内容，以及指定每个表格的宽度大小。

5.1. 属性

属性	说明
CurrCol	当前表格中选择的列号
CurrRow	当前表格中选择的行号
ClicksToEdit	进入编辑状态需要点击的次数
DataSource	设定数据源
EmptyText	当控件内容为空时显示的文字信息
HeaderTitle	表格头的标题
HeaderTitleAlign	设定表格头标题的对齐方式

5.1.1. CurrCol

property CurrCol: Integer;

  表格中当前选择的列号。

5.1.2. CurrRow

property CurrRow: Integer;

  表格中当前选择的行号。

5.1.3. ClicksToEdit

property ClicksToEdit: Integer;

  单元格进入编辑状态需要点击的次数。

5.1.4. DataSource

property DataSource: TDataSource;

  表格需使用的数据源，此处需指定数据源控件。

5.1.5. EmptyText*

property EmptyText: string;

  当控件内容为空时显示的文字内容。

5.1.6. HeaderTitle

property HeaderTitle: string;

  设定表格的标题。

5.1.7. HeaderTitleAlign

property HeaderTitleAlign: TAlignment;

  设定表格标题的对齐方式。

名称	说明	图例
taLeftJustify	标题左对齐
taCenter	标题居中
taRightJustify	标题居右

5.2. 字段行属性

属性	说明
FieldName	字段名称
Id	当前字段的Id值，该值用于区分父结点与子结点信息
ParentId	父结点的Id

5.3. 事件

名称	触发条件
OnCellClick	点击表格中的单元格触发该事件

6. TUgDBText

  该组件显示为一个标签，其功能与TUgLabel类似。

6.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称

7. TUgDBEdit

  该组件显示为一个文本编辑框，其功能与TUgEdit类似。

7.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
PasswordChar	输入的字符为密码形式需要进行掩饰的则显示为设定的字符

8. TUgDBNumberEdit

  该组件显示为一个数值编辑框，其功能与TUgDBNumberEdit类似。

8.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
MaxValue	允许输入的最大值
MinValue	允许输入的最小值

9. TUgDBFormattedNumberEdit

  该组件为一个格式化数值的输入框，其功能与TUgFormattedNumberEdit类似。

9.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
DecimalPrecision	显示的小数位数
DecimalSeparator	显示的小数分隔符
FormattedInput.DecimalGroup	显示几位分一组
ThousandSeparator	千位分隔符
MaxValue	允许输入的最大值
MinValue	允许输入的最小值

13. TUgDBTagField

  该组件显示为一个可以进行下拉选择的选框，可以选择多个选项，以标签的形式显示在选择编辑框中。

13.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
Items	下拉选项中可选的项目
SelCount	已选择的标签数量
Count	下拉选项中可选的项目数量
Selected[..]	表示下拉选项中该位置的项目是否被选中

13.2. 事件

事件	触发条件
OnChange	当复选框选项发生变化时触发该事件
OnChangeValue	当复选框中的取值发生变化时触发该事件

13.3. 方法

13.3.1. GetSelected

function GetSelected(Index:Integer):Boolean;

  检查选择的索引向项是否被选中。

10. TUgDBDateTimePicker

  该组件显示为事件日期选择器，其功能与TUgDateTimePicker类似。

10.1. 属性

属性	说明
ClearButton	是否在日期处显示清除按钮
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
DateFormat	日期的显示格式
DateMode	日期的模式
DateTime	日期时间
FirstDayOfWeek	设定一周的开始
Kind	设定显示模式
TimeFormat	在DateFormat模式下，规定时间的显示模式

10.1.1. ClearButton

property ClearButton: Boolean;

  是否在控件中显示清除按钮。

//JScript
UgDBDateTimePicker01.ClearButton = True;

//PasScript
UgDBDateTimePicker01.ClearButton := True;

// Make sure to add code blocks to your code group

10.1.2. DateFormat

property DateFormat: string;

  设置日期的显示格式。

//JScript
UgDBDateTimePicker01.DateFormat = "yyyy/MM/dd";  

//PasScript
UgDBDateTimePicker01.DateFormat := 'yyyy/MM/dd';  

// Make sure to add code blocks to your code group

10.1.3. DateMode

property DateMode: TUniDateMode;

  设置日期时间的显示内容。

名称	图示
dtmDateOnly
dtmDateTime

10.1.4. DateTime

property DateTime: TDateTime;

  设置显示的日期与时间。

10.1.5. FirstDayOfWeek

property FirstDayOfWeek: TCalDayOfWeek;

  设置一周的第一天。默认为dowMonday。

10.1.6. Kind

property Kind: TUniDateTimeKind;

  设定控件的时间日期选择框的类型。目前该控件暂时无法实现在属性编辑器中进行Kind属性的更改。推荐使用脚本进行更改。

//JScript
UgDBDateTimePicker01.Kind = tUniDate;
UgDBDateTimePicker01.Kind = tUniDateTime;
UgDBDateTimePicker01.Kind = tUniTime;

//PasScript
UgDBDateTimePicker01.Kind := tUniDate;
UgDBDateTimePicker01.Kind := tUniDateTime;
UgDBDateTimePicker01.Kind := tUniTime;

// Make sure to add code blocks to your code group

名称	说明
tUniDate
tUniDateTime
tUniTime

10.1.7. TimeFormat

property TimeFormat: string;

  设置时间的显示格式。

//JScript
UgDBDateTimePicker01.Kind = tUniTime;
UgDBDateTimePicker01.TimeFormat = "HH mm ss";

//PasScript
UgDBDateTimePicker01.Kind := tUniTime;
UgDBDateTimePicker01.TimeFormat := 'HH mm ss';

// Make sure to add code blocks to your code group

11. TUgDBComboBox

  该组件显示为一个复选框，其功能与TUgComboBox相似。

11.1. 属性

属性	说明
ClearButton	是否在包含内容的文本框中显示可用于清除文本框内容的清除按钮
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
ItemIndex	当前选择项的索引
Items	可供选择的项目集合
ReadOnly	若为True，则文本框中的内容仅用于显示，不可进行编辑修改的操作

11.1.1. ClearButton

property ClearButton: Boolean;

  改属性可控制是否在包含内容的文本框中显示可用于清除文本框内容的清除按钮，若为True则显示该按钮。

11.1.2. ItemIndex

property ItemIndex: Integer;

  设定当前选择项的索引值。

11.1.3. Items

property Items: TStrings;

  设定可选项目的集合。

//JScript
//清空
UgDBComboBox01.Items.Clear;

//添加
UgDBComboBox01.Items.Add("New");

//PasScript
//清空
UgDBComboBox01.Items.Clear;

//添加
UgDBComboBox01.Items.Add('New');

// Make sure to add code blocks to your code group

11.1.4. ReadOnly

property ReadOnly: Boolean;

  该属性若为True，则文本框中的内容仅用于显示，不可进行编辑修改的操作。

11.2. 事件

事件	触发条件
OnChange	当复选框选项发生变化时触发该事件

12. TUgDBLookupComboBox

  该组件显示为选择框，使用方式与TUgDBComboBox类似，其选项的数据来源于数据表中的内容。

12.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
KeyField	关键值字段,该字段会随着选择回填至DataField字段中
ListField	用于在列表选择器中显示的字段名称，如需要显示多个字段名称的，使用 ; 分隔
ListSource	填写列表使用的数据源控件名称

13. TUgDBCheckBox

  该组件显示为选择确认框，其使用方式与TUgCheckBox类似。

13.1. 属性

属性	说明
Caption	对应的字幕名称
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称

14. TUgDBRadioGroup

  该组件为一组单选按钮，其使用方式与TUgRadioGroup类似。

14.1. 属性

属性	说明
Columns	设定选择项显示的列数
Caption	设定分组框显示的标签文字内容
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
Items	设置选项，回车换行
ItemIndex	设定默认选择的选项

15. TUgDBImage

  该组件是用于显示数据库中存放的图片字段的内容。其功能与TUgImage类似。

15.1. 属性

属性	说明
Center	图像画面是否在控件中居中
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
Stretch	是否对画面进行拉伸以适应图像控件的大小

16. TUgDBListBox

  该组件显示为一个列表选择框，其功能与TUgListBox类似。

16.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
ItemIndex	当前选择项的索引
Items	可供选择的项目集合

17. TUgDBLookupListBox

  该组件显示为一个列表选择框，其列表项的来源为数据表中的内容，其功能与TUgDBListBox类似。

17.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称
KeyField	关键值字段,该字段会随着选择回填至DataField字段中
ListField	用于在列表选择器中显示的字段名称
ListSource	填写列表使用的数据源控件名称

18. TUgDBMemo

  该组件为文本备忘编辑器。其功能与TUgMemo类似。

18.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称

19. TUgDBHTMLMemo

  该组件为HTML格式的文本备忘编辑器，其功能与TUgHTMLMemo类似。

19.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称

20. TUgDBLookupEdit

  此组件可作为查找编辑框使用，点击右侧的搜索按钮可打开查找界面去选择查找的数据来源。其功能与TUgLookupEdit类似。

20.1. 属性

属性	说明
DataField	显示对应内容的字段名称
DataSource	对应的数据源控件的名称