愛招飛幫助手冊
目录

數據控制控制元件

# 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

# 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
    //PasScript
Begin
  UgFDConnection01.Connected := True;
  UgFDQuery01.SQL.Text := 'SELECT * FROM Table_Test';
  UgFDQuery01.Open;
End.
    1
    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
      //PasScript
Begin
  UgRFConnection01.Active := True;
  UgRFDataSet01.Close;
  UgRFDataSet01.SQL.Text := 'SELECT * FROM Table_Test';
  UgRFDataSet01.Open;
End.
      1
      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
        //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
        // 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 允許輸入的最小值

        # 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
          //PasScript
UgDBDateTimePicker01.ClearButton := True;
          1
          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
            //PasScript
UgDBDateTimePicker01.DateFormat := 'yyyy/MM/dd';
            1
            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
              //PasScript
UgDBDateTimePicker01.Kind := tUniDate;
UgDBDateTimePicker01.Kind := tUniDateTime;
UgDBDateTimePicker01.Kind := tUniTime;
              1
              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
                //PasScript
UgDBDateTimePicker01.Kind := tUniTime;
UgDBDateTimePicker01.TimeFormat := 'HH mm ss';
                1
                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
                  //PasScript
//清空
UgDBComboBox01.Items.Clear;

//新增
UgDBComboBox01.Items.Add('New');
                  1
                  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 對應的數據源控制元件的名稱
                  附加控制元件
                  圖表控制元件

                  ← 圖表控制元件→

                  Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved