數據控制控制元件
# 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
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 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;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
Begin
UgFDConnection01.Connected := True;
UgFDQuery01.SQL.Text := 'SELECT * FROM Table_Test';
UgFDQuery01.Open;
End.
1
2
3
4
5
6
2
3
4
5
6
// 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;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
Begin
UgRFConnection01.Active := True;
UgRFDataSet01.Close;
UgRFDataSet01.SQL.Text := 'SELECT * FROM Table_Test';
UgRFDataSet01.Open;
End.
1
2
3
4
5
6
7
2
3
4
5
6
7
// 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));
}
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
//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;
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// 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;
1
表格中目前選擇的列號。
# 2.1.2. CurrRow
property CurrRow: Integer;
1
表格中目前選擇的行號。
# 2.1.3. Columns
property Columns: TUniDesktopDBGridColumns;
1
設定表格中使用的欄位列。
在界面上雙擊該控制元件，打開欄位編輯器。在該界面下，可以指定表格中顯示的欄位內容，以及指定每個表格的寬度大小。
其中使用的表格列的部分屬性如下：
| 屬性 | 說明 |
|---|---|
| Editor | 繫結該欄位的編輯控制元件 |
| FieldName | 欄位的名稱 |
| GroupHeader | 欄位表格頭的群組名稱，可以將同組內的欄位表頭設定為同一個名稱 |
| WidgetColumn | 如果使用到表格內的儀表內容，可使用該屬性下的設定 |
| Enable | 是否啟用元件 |
| Widget | 啟用控制元件的名稱， 使用的元件型別為Widget組中的部分元件，例如TUgButtonWidget等 |
# 2.1.4. ClicksToEdit
property ClicksToEdit: Integer;
1
單元格進入編輯狀態需要點選的次數。
# 2.1.5. DataSource
property DataSource: TDataSource;
1
表格需使用的數據源，此處需指定數據源控制元件。
# 2.1.6. EmptyText*
property EmptyText: string;
1
當控制元件內容為空時顯示的文字內容。
# 2.1.7. EnableLocking
property EnableLocking: Boolean;
1
是否鎖定表格列，這樣可以在操作滾動條時能讓特定列始終保持顯示狀態，比如可以用於鎖定序號或者名稱的表格列。
# 2.1.8. ForceFit
property ForceFit: Boolean;
1
是否使表格中的欄位列強制適應控制元件的寬度。若設定為True則可以使表格中的每一個欄位列都可以顯示出來。
# 2.1.9. HeaderTitle
property HeaderTitle: string;
1
設定表格的標題。
# 2.1.10. HeaderTitleAlign
property HeaderTitleAlign: TAlignment;
1
設定表格標題的對齊方式。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| taLeftJustify | 標題左對齊 | |
| taCenter | 標題居中 |  |
| taRightJustify | 標題居右 |  |
# 2.1.11. Options
property Options: TUniDBGridOptions;
1
表格設定的相關選項。
| 名稱 | 說明 |
|---|---|
| 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;
1
是否禁止在表頭或表末進行跳轉。
# 2.1.13. ReadOnly
property ReadOnly: Boolean;
1
該屬性設定表格是否處於只讀模式。
# 2.1.14. RowEditor
property RowEditor: Boolean;
1
該屬性設定是否顯示行編輯器。
# 2.1.15. StripeRows
property StripeRows: Boolean;
1
是否啟用交替顏色的表格。
# 2.1.16. Summary
property Summary: TUniCustomGridSummary;
1
設定彙總使用的資訊。
# 2.1.17. TrackOver
property TrackOver: Boolean;
1
當滑鼠在表格上移動時是否對對應行進行高亮顯示。
# 2.1.18. WebOptions
property WebOptions: TUniCustomDBGridWebOptions;
1
設定網頁的相關選項。
| 名稱 | 說明 |
|---|---|
| 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;
1
設定過濾條件資訊。
| 名稱 | 說明 |
|---|---|
| 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;
1
單元格進入編輯狀態需要點選的次數。
# 3.1.2. DataSource
property DataSource: TDataSource;
1
表格需使用的數據源，此處需指定數據源控制元件。
# 3.1.3. EmptyText*
property EmptyText: string;
1
當控制元件內容為空時顯示的文字內容。
# 3.1.4. ForceFit
property ForceFit: Boolean;
1
是否使表格中的欄位列強制適應控制元件的寬度。若設定為True則可以使表格中的每一個欄位列都可以顯示出來。
# 3.1.5. HeaderTitle
property HeaderTitle: string;
1
設定表格的標題。
# 3.1.6. HeaderTitleAlign
property HeaderTitleAlign: TAlignment;
1
設定表格標題的對齊方式。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| taLeftJustify | 標題左對齊 | |
| taCenter | 標題居中 |  |
| taRightJustify | 標題居右 |  |
# 3.1.7. IdField
property IdField: WideString;
1
目前選擇項的用於構成樹形結構的ID欄位名稱。
# 3.1.8. IdParentField
property IdParentField: WideString;
1
目前選擇項的用於構成樹形結構的雙親ID欄位名稱。
# 3.1.9. Options
property Options: TUniDBGridOptions;
1
表格設定的相關選項。
| 名稱 | 說明 |
|---|---|
| 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;
1
表格中目前選擇的列號。
# 4.1.2. CurrRow
property CurrRow: Integer;
1
表格中目前選擇的行號。
# 4.1.3. ClicksToEdit
property ClicksToEdit: Integer;
1
單元格進入編輯狀態需要點選的次數。
# 4.1.4. DataSource
property DataSource: TDataSource;
1
表格需使用的數據源，此處需指定數據源控制元件。
# 4.1.5. EmptyText*
property EmptyText: string;
1
當控制元件內容為空時顯示的文字內容。
# 4.1.6. HeaderTitle
property HeaderTitle: string;
1
設定表格的標題。
# 4.1.7. HeaderTitleAlign
property HeaderTitleAlign: TAlignment;
1
設定表格標題的對齊方式。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| taLeftJustify | 標題左對齊 | |
| taCenter | 標題居中 | |
| taRightJustify | 標題居右 | |
# 4.2. 事件
| 名稱 | 觸發條件 |
|---|---|
| OnCellClick | 點選表格中的單元格觸發該事件 |
# 5. TUgDBVerticalTreeGrid
該元件顯示為一個豎向的樹形列表，使用該元件需要在同一個表中顯示欄位，這些欄位間有一些是父結點資訊，一些是子結點資訊，在其中需要進行設定。
在界面上雙擊該控制元件，打開欄位編輯器。在該界面下，可以指定表格中顯示的欄位內容，以及指定每個表格的寬度大小。
# 5.1. 屬性
| 屬性 | 說明 |
|---|---|
| CurrCol | 目前表格中選擇的列號 |
| CurrRow | 目前表格中選擇的行號 |
| ClicksToEdit | 進入編輯狀態需要點選的次數 |
| DataSource | 設定數據源 |
| EmptyText | 當控制元件內容為空時顯示的文字資訊 |
| HeaderTitle | 表格頭的標題 |
| HeaderTitleAlign | 設定表格頭標題的對齊方式 |
# 5.1.1. CurrCol
property CurrCol: Integer;
1
表格中目前選擇的列號。
# 5.1.2. CurrRow
property CurrRow: Integer;
1
表格中目前選擇的行號。
# 5.1.3. ClicksToEdit
property ClicksToEdit: Integer;
1
單元格進入編輯狀態需要點選的次數。
# 5.1.4. DataSource
property DataSource: TDataSource;
1
表格需使用的數據源，此處需指定數據源控制元件。
# 5.1.5. EmptyText*
property EmptyText: string;
1
當控制元件內容為空時顯示的文字內容。
# 5.1.6. HeaderTitle
property HeaderTitle: string;
1
設定表格的標題。
# 5.1.7. HeaderTitleAlign
property HeaderTitleAlign: TAlignment;
1
設定表格標題的對齊方式。
| 名稱 | 說明 | 圖例 |
|---|---|---|
| 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;
1
檢查選擇的索引向項是否被選中。
# 10. TUgDBDateTimePicker
該元件顯示為事件日期選擇器，其功能與TUgDateTimePicker類似。
# 10.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 是否在日期處顯示清除按鈕 |
| DataField | 顯示對應內容的欄位名稱 |
| DataSource | 對應的數據源控制元件的名稱 |
| DateFormat | 日期的顯示格式 |
| DateMode | 日期的模式 |
| DateTime | 日期時間 |
| FirstDayOfWeek | 設定一週的開始 |
| Kind | 設定顯示模式 |
| TimeFormat | 在DateFormat模式下，規定時間的顯示模式 |
# 10.1.1. ClearButton
property ClearButton: Boolean;
1
是否在控制元件中顯示清除按鈕。
//JScript
UgDBDateTimePicker01.ClearButton = True;
1
2
2
//PasScript
UgDBDateTimePicker01.ClearButton := True;
1
2
2
// Make sure to add code blocks to your code group
# 10.1.2. DateFormat
property DateFormat: string;
1
設定日期的顯示格式。
//JScript
UgDBDateTimePicker01.DateFormat = "yyyy/MM/dd";
1
2
2
//PasScript
UgDBDateTimePicker01.DateFormat := 'yyyy/MM/dd';
1
2
2
// Make sure to add code blocks to your code group
# 10.1.3. DateMode
property DateMode: TUniDateMode;
1
設定日期時間的顯示內容。
| 名稱 | 圖示 |
|---|---|
| dtmDateOnly |  |
| dtmDateTime |  |
# 10.1.4. DateTime
property DateTime: TDateTime;
1
設定顯示的日期與時間。
# 10.1.5. FirstDayOfWeek
property FirstDayOfWeek: TCalDayOfWeek;
1
設定一週的第一天。預設為dowMonday。
# 10.1.6. Kind
property Kind: TUniDateTimeKind;
1
設定控制元件的時間日期選擇框的型別。目前該控制元件暫時無法實現在屬性編輯器中進行Kind屬性的更改。推薦使用指令碼進行更改。
//JScript
UgDBDateTimePicker01.Kind = tUniDate;
UgDBDateTimePicker01.Kind = tUniDateTime;
UgDBDateTimePicker01.Kind = tUniTime;
1
2
3
4
2
3
4
//PasScript
UgDBDateTimePicker01.Kind := tUniDate;
UgDBDateTimePicker01.Kind := tUniDateTime;
UgDBDateTimePicker01.Kind := tUniTime;
1
2
3
4
2
3
4
// Make sure to add code blocks to your code group
| 名稱 | 說明 |
|---|---|
| tUniDate |  |
| tUniDateTime |  |
| tUniTime |  |
# 10.1.7. TimeFormat
property TimeFormat: string;
1
設定時間的顯示格式。
//JScript
UgDBDateTimePicker01.Kind = tUniTime;
UgDBDateTimePicker01.TimeFormat = "HH mm ss";
1
2
3
2
3
//PasScript
UgDBDateTimePicker01.Kind := tUniTime;
UgDBDateTimePicker01.TimeFormat := 'HH mm ss';
1
2
3
2
3
// Make sure to add code blocks to your code group
1
# 11. TUgDBComboBox
該元件顯示為一個覈取方塊，其功能與TUgComboBox相似。
# 11.1. 屬性
| 屬性 | 說明 |
|---|---|
| ClearButton | 是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕 |
| DataField | 顯示對應內容的欄位名稱 |
| DataSource | 對應的數據源控制元件的名稱 |
| ItemIndex | 目前選擇項的索引 |
| Items | 可供選擇的專案集合 |
| ReadOnly | 若為True，則文字框中的內容僅用於顯示，不可進行編輯修改的操作 |
# 11.1.1. ClearButton
property ClearButton: Boolean;
1
改屬性可控制是否在包含內容的文字框中顯示可用於清除文字框內容的清除按鈕，若為True則顯示該按鈕。
# 11.1.2. ItemIndex
property ItemIndex: Integer;
1
設定當前選擇項的索引值。
# 11.1.3. Items
property Items: TStrings;
1
設定可選專案的集合。
//JScript
//清空
UgDBComboBox01.Items.Clear;
//新增
UgDBComboBox01.Items.Add("New");
1
2
3
4
5
6
2
3
4
5
6
//PasScript
//清空
UgDBComboBox01.Items.Clear;
//新增
UgDBComboBox01.Items.Add('New');
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 11.1.4. ReadOnly
property ReadOnly: Boolean;
1
該屬性若為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 | 對應的數據源控制元件的名稱 |