愛招飛幫助手冊
目录

時間線(WEB)

# FastWeb之時間線(WEB)

# 1. 說明

  本示例採用與資料庫結合的方式，將資料庫中的時間線事項顯示在時間線上從而實現時間線顯示的功能。在使用此示例前，請先檢查 節點資料庫 中的 FastWeb 連線設定是否有效。

  通過本範例學習，可以掌握 TUgTimeLine 的使用方法，並結合實體實現時間線展示的功能。

# 2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgPageControl元件，控制元件名稱為UgPageControl01。

  2：TUgPanel元件，控制元件名稱為 UgPanel01。

  3：TUgButton元件，控制元件名稱為 btnAddLine。

  4：TUgButton元件，控制元件名稱為 btnEditLine。

  5：TUgButton元件，控制元件名稱為 btnDeleteLine。

  6：TUgButton元件，控制元件名稱為 btnCreateLine。

  7：TUgDBGrid元件，控制元件名稱為 UgDBGrid01。

  8：TUgClientDataSet元件，控制元件名稱為 cdsLine。

  9：TUgDataSource元件，控制元件名稱為 dsLine。

  10：在另一個標籤頁中的 TUgTimeLine元件，控制元件名稱為 UgTimeLine01。

  • UgWebRunFrame屬性設定

    • Height：設定頁面高度=600。
    • Width：設定頁面寬度=800。

  • 1： UgPageControl01屬性設定

    • Align：設定控制元件的對齊方式，設定為alClient。

      點選窗體結構與檢視器中的此控制元件，點選其左上角的新增圖示按鈕新增兩項 TabSheet。分別設定其 Caption 屬性為 時間線專案 與 時間線展示。

  • 2：UgPanel01屬性設定

      此控制元件是按鈕控制元件的容器。其位於第一個 TabSheet 中。

    • Align：設定控制元件的對齊方式，設定為 alTop 。
    • Height：設定控制元件的高度，設定為 40。

  • 3：btnAddLine屬性設定

    • Caption：設定顯示的字幕內容，設定為新增時間線專案。

  • 4：btnEditLine屬性設定

    • Caption：設定顯示的字幕內容，設定為編輯時間線專案。

  • 5：btnDeleteLine屬性設定

    • Caption：設定顯示的字幕內容，設定為刪除時間線專案。

  • 6：btnCreateLine屬性設定

    • Caption：設定顯示的字幕內容，設定為產生時間線。

  • 7：UgDBGrid01屬性設定

    UgDBGrid01 位於第一個 TabSheet 中。雙擊表格打開欄位編輯器，編輯以下的欄位內容。

    • Align：設定對齊方式，設定為alClient。
    • DataSource：設定數據來源，設定為 dsLine。
    • ReadOnly：設定表格是否為只讀，設定為 True。

  • 9：dsLine屬性設定

    • DataSet：設定繫結的數據集，設定為 cdsLine。

  • 10：UgTimeLine屬性設定

      此控制元件位於第二個 TabSheet 中。

    • Align：設定對齊方式，設定為 alClient。

# 3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。

# 3.1. 程式初始設定

  設定一個自定義函式，用於產生表單。

    //JScript
function GetEditorForm(){
  Result = new TUgWebForm(UniApplication);
  Result.FreeOnClose = false;
  Result.Width = 530;
  Result.Height = 550;
  Result.Bordericons = biSystemMenu;
  
  var edId = new TUgEdit(Result);
  edId.Name = "edId";
  edId.Height = 22;
  edId.Enabled = true;
  edId.Parent = Result;
  edId.FieldLabel = UGMM.LT("事項ID");
  edId.FieldLabelSeparator = "";
  edId.FieldLabelAlign = laLeft;
  edId.Align = alTop;
  edId.Margins.Left = 8;
  edId.Margins.Right = 8;
  edId.AlignWithMargins = true;
  edId.EmptyText = "Id";
  edId.Enabled = false;

  var edTime = new TUgDateTimePicker(Result);
  edTime.Name = "edTime";
  edTime.Height = 22;
  edTime.Parent = Result;
  edTime.FieldLabel = UGMM.LT("日期");
  edTime.FieldLabelSeparator = "";
  edTime.FieldLabelAlign = laLeft;
  edTime.Align = alTop;
  edTime.Margins.Left = 8;
  edTime.Margins.Right = 8;
  edTime.AlignWithMargins = true;
  edTime.DateTime = StrToDateTime(FormatdateTime("yyyy-mm-dd",now()) + " 00:00:00");
  edTime.Kind = tUniDate; 

  var edHeader = new TUgEdit(Result);
  edHeader.Name = "edHeader";
  edHeader.Height = 22;
  edHeader.Enabled = true;
  edHeader.Parent = Result;
  edHeader.FieldLabel = UGMM.LT("標題");
  edHeader.FieldLabelSeparator = "";
  edHeader.FieldLabelAlign = laLeft;
  edHeader.Align = alTop;
  edHeader.Margins.Left = 8;
  edHeader.Margins.Right = 8;
  edHeader.AlignWithMargins = true;
  edHeader.EmptyText = UGMM.LT("請輸入標題");

  var edImg = new TUgEdit(Result);
  edImg.Name = "edImg";
  edImg.Height = 22;
  edImg.Enabled = true;
  edImg.Parent = Result;
  edImg.FieldLabel = UGMM.LT("圖片");
  edImg.FieldLabelSeparator = "";
  edImg.FieldLabelAlign = laLeft;
  edImg.Align = alTop;
  edImg.Margins.Left = 8;
  edImg.Margins.Right = 8;
  edImg.AlignWithMargins = true;
  edImg.EmptyText = UGMM.LT("請輸入圖片地址");

  var edDescr = new TUgHTMLMemo(Result);
  edDescr.Name = "edDescr";
  edDescr.Height = 315;
  edDescr.Enabled = true;
  edDescr.Parent = Result;
  edDescr.FieldLabel = UGMM.LT("描述");
  edDescr.FieldLabelSeparator = "";
  edDescr.FieldLabelAlign = laLeft;
  edDescr.Align = alTop;
  edDescr.Margins.Left = 8;
  edDescr.Margins.Right = 8;
  edDescr.AlignWithMargins = true;
  //edDescr.EmptyText:= UGMM.LT('背景顏色(css)');
  
  var edDir = TUgComboBox.Create(Result);
  edDir.Name = "edDir";
  edDir.Height = 22;
  edDir.Parent = Result;
  edDir.FieldLabel = UGMM.LT("方位");
  edDir.FieldLabelSeparator = "";
  edDir.FieldLabelAlign = laLeft;
  edDir.Align = alTop;
  edDir.Margins.Left = 8;
  edDir.Margins.Right = 8;
  edDir.AlignWithMargins = True;
  edDir.EmptyText = UGMM.LT("請選擇...");
  edDir.Items.CommaText = "left,right";
  edDir.Style = csDropDownList;
  
  var btOk = new TUgButton(Result);
  btOk.Name = "btOk";
  btOk.Height = 32;
  btOk.Parent = Result;
  btOk.Margins.Bottom = 6;
  btOk.Margins.Left = 8;
  btOk.Margins.Right = 8;
  btOk.Align = alBottom;
  btOk.Caption = UGMM.LT("儲存");
  btOk.ModalResult = mrOK;
  btOk.AlignWithMargins = True;  
}
    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
Function GetEditorForm:TUgWebForm;
Var
  edId: TUgEdit;
  edTime:TUgDateTimePicker;
  edHeader: TUgEdit;
  edImg: TUgEdit;
  edDescr: TUgHTMLMemo;
  edDir: TUgComboBox;
  btOk: TUgButton;
Begin
  Result := TUgWebForm.Create(UniApplication);
  Result.FreeOnClose := False;
  Result.Width := 530;
  Result.Height := 550;
  Result.Bordericons :=biSystemMenu;
  
  edId:=TUgEdit.Create(Result);
  edId.Name := 'edId';
  edId.Height := 22;
  edId.Enabled := true;
  edId.Parent := Result;
  edId.FieldLabel := UGMM.LT('事項ID');
  edId.FieldLabelSeparator := '';
  edId.FieldLabelAlign := laLeft;
  edId.Align := alTop;
  edId.Margins.Left := 8;
  edId.Margins.Right := 8;
  edId.AlignWithMargins := True;
  edId.EmptyText:='Id';
  edId.Enabled := False;

  edTime:=TUgDateTimePicker.Create(Result);
  edTime.Name := 'edTime';
  edTime.Height := 22;
  edTime.Parent := Result;
  edTime.FieldLabel := UGMM.LT('日期');
  edTime.FieldLabelSeparator := '';
  edTime.FieldLabelAlign := laLeft;
  edTime.Align := alTop;
  edTime.Margins.Left := 8;
  edTime.Margins.Right := 8;
  edTime.AlignWithMargins := True;
  edTime.DateTime := StrToDateTime(FormatdateTime('yyyy-mm-dd',now()) + ' 00:00:00');
  edTime.Kind := tUniDate; 

  edHeader:=TUgEdit.Create(Result);
  edHeader.Name := 'edHeader';
  edHeader.Height := 22;
  edHeader.Enabled := true;
  edHeader.Parent := Result;
  edHeader.FieldLabel := UGMM.LT('標題');
  edHeader.FieldLabelSeparator := '';
  edHeader.FieldLabelAlign := laLeft;
  edHeader.Align := alTop;
  edHeader.Margins.Left := 8;
  edHeader.Margins.Right := 8;
  edHeader.AlignWithMargins := True;
  edHeader.EmptyText:= UGMM.LT('請輸入標題');

  edImg:=TUgEdit.Create(Result);
  edImg.Name := 'edImg';
  edImg.Height := 22;
  edImg.Enabled := true;
  edImg.Parent := Result;
  edImg.FieldLabel := UGMM.LT('圖片');
  edImg.FieldLabelSeparator := '';
  edImg.FieldLabelAlign := laLeft;
  edImg.Align := alTop;
  edImg.Margins.Left := 8;
  edImg.Margins.Right := 8;
  edImg.AlignWithMargins := True;
  edImg.EmptyText:= UGMM.LT('請輸入圖片地址');

  edDescr := TUgHTMLMemo.Create(Result);
  edDescr.Name := 'edDescr';
  edDescr.Height := 315;
  edDescr.Enabled := true;
  edDescr.Parent := Result;
  edDescr.FieldLabel := UGMM.LT('描述');
  edDescr.FieldLabelSeparator := '';
  edDescr.FieldLabelAlign := laLeft;
  edDescr.Align := alTop;
  edDescr.Margins.Left := 8;
  edDescr.Margins.Right := 8;
  edDescr.AlignWithMargins := True;
  
  edDir:=TUgComboBox.Create(Result);
  edDir.Name := 'edDir';
  edDir.Height := 22;
  edDir.Parent := Result;
  edDir.FieldLabel := UGMM.LT('方位');
  edDir.FieldLabelSeparator := '';
  edDir.FieldLabelAlign := laLeft;
  edDir.Align := alTop;
  edDir.Margins.Left := 8;
  edDir.Margins.Right := 8;
  edDir.AlignWithMargins := True;
  edDir.EmptyText:= UGMM.LT('請選擇...');
  edDir.Items.CommaText := 'left,right';
  edDir.Style := csDropDownList;
  
  btOk:=TUgButton.Create(Result);
  btOk.Name := 'btOk';
  btOk.Height := 32;
  btOk.Parent := Result;
  btOk.Margins.Bottom:= 6;
  btOk.Margins.Left := 8;
  btOk.Margins.Right := 8;
  btOk.Align := alBottom;
  btOk.Caption:= UGMM.LT('儲存');
  btOk.ModalResult := mrOK;
  btOk.AlignWithMargins := True;  
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
    107
    108
    109
    110
    111
    112
    113
    114
    // Make sure to add code blocks to your code group

      初始化設定的相關程式。

      //JScript
  UGMM.LC(Self);
  UgPageControl01.TabIndex = 0;
  cdsLine.DataNodeName = "FastWeb";
  cdsLine.CommandText = "Select * from Task_TimeLine Order By Time DESC,header,dir";
  cdsLine.Open; 
  
  btnAddLine.OnClick = &btnAddLineOnClick;
  btnEditLine.OnClick = &btnEditLineOnClick;
  btnDeleteLine.OnClick = &btnDeleteLineOnClick;
  btnCreateLine.OnClick = &btnCreateLineOnClick;
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      //PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  UgPageControl01.TabIndex := 0;
  cdsLine.DataNodeName := 'FastWeb';
  cdsLine.CommandText := 'Select * from Task_TimeLine Order By Time DESC,header,dir';
  cdsLine.Open;  
End.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      // Make sure to add code blocks to your code group

      # 3.2. 事件設定

      • 3：btnAddLine-OnClick事件

        點選以新增時間線專案。

        //JScript
function btnAddLineOnClick(sender){
  var F = GetEditorForm;
  Try{
    F.Caption = UGMM.LT("新增時間線專案");
    var e = "";
    var b = true;
    While (b) {
      if (e != "") 
      MessageDlg(e,mtError,mbOK);
      TUgEdit(F.FindComponent("edID")).Text = UGMM.CreateGuid;
      if (F.ShowModal == mrOK){ 
      	Try{
         if (TUgEdit(F.FindComponent("edID")).Text == "")
            RaiseException(UGMM.LT("事項ID"));
            
          //新增到記憶體表
          cdsLine.Append;
          cdsLine.FieldByName("Id").AsString = TUgEdit(F.FindComponent("edId")).Text;
          cdsLine.FieldByName("Time").AsDateTime  = TUgDateTimePicker(F.FindComponent("edTime")).DateTime;
          cdsLine.FieldByName("Header").AsString  = TUgEdit(F.FindComponent("edHeader")).Text;
          cdsLine.FieldByName("Img").AsString = TUgEdit(F.FindComponent("edImg")).Text;
          cdsLine.FieldByName("Descr").AsString = TUgHTMLMemo(F.FindComponent("edDescr")).Lines.Text;
          cdsLine.FieldByName("Dir").AsString = TUgComboBox(F.FindComponent("edDir")).Text;
          cdsLine.Post;
          
          cdsLine.SubmitUpdates;
          b = False;
          }
        Except{RaiseException(ExceptionMessage);}
        }else
        b = False;
      }
  }
  Finally{
    F.Free;
  }
  cdsLine.Close;
  cdsLine.Open;
}
        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
        //PasScript
procedure btnAddLineOnClick(sender: tobject);
//新增時間線專案
Var
  F:TUgWebForm;
  b:Boolean;
  e:string;
  s:String;
  v:variant;
Begin
  F:=GetEditorForm;
  Try
    F.Caption := UGMM.LT('新增時間線專案');
    e:='';
    b:=True;
    While b do
    Begin
      if e<>'' then
      MessageDlg(e,mtError,mbOK);
      TUgEdit(F.FindComponent('edID')).Text := UGMM.CreateGuid;
      if F.ShowModal = mrOK then 
      Begin
        Try
          if TUgEdit(F.FindComponent('edID')).Text = '' then
            RaiseException(UGMM.LT('事項ID'));
          //新增到記憶體表
          cdsLine.Append;
          //v := UGMM.CreateGuid;
          cdsLine.FieldByName('Id').AsString := TUgEdit(F.FindComponent('edId')).Text;
          cdsLine.FieldByName('Time').AsDateTime  := TUgDateTimePicker(F.FindComponent('edTime')).DateTime;
          cdsLine.FieldByName('Header').AsString  := TUgEdit(F.FindComponent('edHeader')).Text;
          cdsLine.FieldByName('Img').AsString := TUgEdit(F.FindComponent('edImg')).Text;
          cdsLine.FieldByName('Descr').AsString := TUgHTMLMemo(F.FindComponent('edDescr')).Lines.Text;
          cdsLine.FieldByName('Dir').AsString := TUgComboBox(F.FindComponent('edDir')).Text;
          cdsLine.Post;
          
          cdsLine.SubmitUpdates;
          b := False;
        Except{ExceptionMessage}
          e:=ExceptionMessage;
        end;
      End else
        b:=False;
    End;
  Finally
    F.Free;
  end;
  cdsLine.Close;
  cdsLine.Open;
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
        // Make sure to add code blocks to your code group
        • 4：btnEditLine-OnClick事件

          點選以打開選擇的專案的編輯時間線視窗。

          //JScript
function btnEditLineOnClick(sender){
  var F = GetEditorForm;
  Try{
    F.Caption = UGMM.LT("修改時間線");
    var e = "";
    var b = true;
    TUgEdit(F.FindComponent("edId")).Text = cdsLine.FieldByName("Id").AsString;
    TUgEdit(F.FindComponent("edId")).Text = cdsLine.FieldByName("Id").AsString;
    TUgDateTimePicker(F.FindComponent("edTime")).DateTime = cdsLine.FieldByName("Time").AsDateTime;
    TUgEdit(F.FindComponent("edHeader")).Text = cdsLine.FieldByName("Header").AsString;
    TUgEdit(F.FindComponent("edImg")).Text = cdsLine.FieldByName("Img").AsString;
    TUgHTMLMemo(F.FindComponent("edDescr")).Lines.Text = cdsLine.FieldByName("Descr").AsString;
    TUgComboBox(F.FindComponent("edDir")).Text = cdsLine.FieldByName("Dir").AsString;
    While (b){
      if (e != "")
      MessageDlg(e,mtError,mbOK);
      if (F.ShowModal == mrOK){
        Try{
          if (TUgEdit(F.FindComponent("edId")).Text == "")
            RaiseException(UGMM.LT("事項ID"));
          //新增到記憶體表
          cdsLine.Edit;
          var v = TUgEdit(F.FindComponent("edId")).Text;
          cdsLine.FieldByName("Id").AsString = v;
          cdsLine.FieldByName("Time").AsDateTime  = TUgDateTimePicker(F.FindComponent("edTime")).DateTime;
          cdsLine.FieldByName("Header").AsString  = TUgEdit(F.FindComponent("edHeader")).Text;
          cdsLine.FieldByName("Img").AsString = TUgEdit(F.FindComponent("edImg")).Text;
          cdsLine.FieldByName("Descr").AsString = TUgHTMLMemo(F.FindComponent("edDescr")).Lines.Text;
          cdsLine.FieldByName("Dir").AsString = TUgComboBox(F.FindComponent("edDir")).Text;
          cdsLine.Post;
          
          cdsLine.SubmitUpdates;
          b = False;
          }
        Except{RaiseException(ExceptionMessage);}
        } else
        b = false;
      }
    }
  Finally{
    F.Free;
  }
  cdsLine.Close;
  cdsLine.Open;
}
          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
          //PasScript
procedure btnEditLineOnClick(sender: tobject);
//編輯時間線
Var
  F:TUgWebForm;
  b:Boolean;
  e:string;
  s:String;
  v:variant;
Begin
  F:=GetEditorForm;
  Try
    F.Caption := UGMM.LT('修改時間線');
    e:='';
    b:=True;
    TUgEdit(F.FindComponent('edId')).Text := cdsLine.FieldByName('Id').AsString;
    TUgEdit(F.FindComponent('edId')).Text := cdsLine.FieldByName('Id').AsString;
    TUgDateTimePicker(F.FindComponent('edTime')).DateTime  := cdsLine.FieldByName('Time').AsDateTime;
    TUgEdit(F.FindComponent('edHeader')).Text  := cdsLine.FieldByName('Header').AsString;
    TUgEdit(F.FindComponent('edImg')).Text := cdsLine.FieldByName('Img').AsString;
    TUgHTMLMemo(F.FindComponent('edDescr')).Lines.Text := cdsLine.FieldByName('Descr').AsString;
    TUgComboBox(F.FindComponent('edDir')).Text := cdsLine.FieldByName('Dir').AsString;
    While b do
    Begin
      if e<>'' then
      MessageDlg(e,mtError,mbOK);
      if F.ShowModal = mrOK then 
      Begin
        Try
          if TUgEdit(F.FindComponent('edId')).Text = '' then
            RaiseException(UGMM.LT('事項ID'));
          //新增到記憶體表
          cdsLine.Edit;
          v := TUgEdit(F.FindComponent('edId')).Text;
          cdsLine.FieldByName('Id').AsString := v;
          cdsLine.FieldByName('Time').AsDateTime  := TUgDateTimePicker(F.FindComponent('edTime')).DateTime;
          cdsLine.FieldByName('Header').AsString  := TUgEdit(F.FindComponent('edHeader')).Text;
          cdsLine.FieldByName('Img').AsString := TUgEdit(F.FindComponent('edImg')).Text;
          cdsLine.FieldByName('Descr').AsString := TUgHTMLMemo(F.FindComponent('edDescr')).Lines.Text;
          cdsLine.FieldByName('Dir').AsString := TUgComboBox(F.FindComponent('edDir')).Text;
          cdsLine.Post;
          
          cdsLine.SubmitUpdates;
          b := False;
        Except{ExceptionMessage}
          e:=ExceptionMessage;
        end;
      End else
        b:=False;
    End;
  Finally
    F.Free;
  end;
  cdsLine.Close;
  cdsLine.Open;
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
          // Make sure to add code blocks to your code group
          • 5：btnDeleteLine-OnClick事件

            點選以刪除選擇的時間線專案。

            //JScript
function btnDeleteLineOnClick(sender){
  if (cdsLine.IsEmpty)
  RaiseException(UGMM.LT("沒有記錄無法刪除"));
  
  if (MessageDlg(UGMM.LT("注意：是否刪除該事項？"),mtWarning,mbYes + mbNo) == mrYes){
     cdsLine.Delete;
     cdsLine.SubmitUpdates;
  }
  cdsLine.Close;
  cdsLine.Open;
}
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            //PasScript
procedure btnDeleteLineOnClick(sender: tobject);
//刪除時間線
begin
  if cdsLine.IsEmpty then
  RaiseException(UGMM.LT('沒有記錄無法刪除'));
  
  if MessageDlg(UGMM.LT('注意：是否刪除該事項？'),mtWarning,mbYes + mbNo) = mrYes then
  Begin
     cdsLine.Delete;
     cdsLine.SubmitUpdates;
  end;
  cdsLine.Close;
  cdsLine.Open;
end;
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            // Make sure to add code blocks to your code group
            • 6：btnCreateLine-OnClick事件

              點選以建立時間線。

              //JScript
function btnCreateLineOnClick(sender){
  UgTimeLine01.TimeLineHTML.Clear;
  Try{
    var cdsLineCount = new TUgClientDataSet(nil);
    cdsLineCount.DataNodeName = "FastWeb";
    cdsLine.First;
    while (!(cdsLine.Eof)){
      //檢查是否為同一天的型別，如有則合併同類在一個線中進行顯示，否則就分開獨立顯示
      LastDate = cdsLine.FieldByName("time").AsDateTime;
      cdsLineCount.Close;
      cdsLineCount.CommandText = "SELECT * FROM Task_TimeLine WHERE time = '" 
      + cdsLine.FieldByName("time").AsString + "' and header = '" 
      + cdsLine.FieldByName("header").AsString + "' and dir = '"
      + cdsLine.FieldByName("dir").AsString + "'";
      cdsLineCount.Open;
      //ShowMessage(IntToStr(cdsLineCount.RecordCount));
      if (cdsLineCount.RecordCount == 1){ 
        UgTimeLine01.AddDD(FormatdateTime("mm-dd",cdsLine.FieldByName("time").AsDateTime),
        cdsLine.FieldByName("header").AsString,
        cdsLine.FieldByName("img").AsString,
        cdsLine.FieldByName("descr").AsString,
        cdsLine.FieldByName("dir").AsString);
        cdsLine.Next;
      }
      if (cdsLineCount.RecordCount > 1 ){
        UgTimeLine01.AddDD_Begin(FormatdateTime("mm-dd",cdsLine.FieldByName("time").AsDateTime),
        cdsLine.FieldByName("header").AsString,
        cdsLine.FieldByName("dir").AsString);
        rcount = cdsLineCount.RecordCount;
        while (rcount != 0){
          UgTimeLine01.AddROW(cdsLine.FieldByName("img").AsString,
          cdsLine.FieldByName("descr").AsString);
          cdsLine.Next;
          rcount = rcount - 1;
          }
        UgTimeline01.AddDD_End;
        }
      
      //如果更新的月份與年份不同，則增加一個時間節點
      if ((MonthOf(LastDate) != MonthOf(cdsLine.FieldByName("time").AsDateTime)) || 
      (YearOf(LastDate) != YearOf(cdsLine.FieldByName("time").AsDateTime))){
        UgTimeLine01.AddDT(FormatdateTime("yyyy-mm",LastDate));
      }
      }
    UgTimeLine01.AddDT(FormatdateTime("yyyy-mm",LastDate));
    UgTimeline01.LoadTimeLine;
    UgPageControl01.TabIndex = 1;
  }
  Finally{
    cdsLineCount.Free;
  }
}
              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
              //PasScript
procedure btnCreateLineOnClick(sender: tobject);
//產生時間線的圖形
var
  LastDate: TDateTime;
  cdsLineCount: TUgClientDataSet;
  rcount: Integer;
begin
  UgTimeLine01.TimeLineHTML.Clear;
  Try
    cdsLineCount := TUgClientDataSet.Create(nil);
    cdsLineCount.DataNodeName := 'FastWeb';
    cdsLine.First;
    while not cdsLine.Eof do
    Begin
      //檢查是否為同一天的型別，如有則合併同類在一個線中進行顯示，否則就分開獨立顯示
      LastDate := cdsLine.FieldByName('time').AsDateTime;
      cdsLineCount.Close;
      cdsLineCount.CommandText := 'SELECT * FROM Task_TimeLine WHERE time = ''' 
      + cdsLine.FieldByName('time').AsString + ''' and header = ''' 
      + cdsLine.FieldByName('header').AsString + ''' and dir = '''
      + cdsLine.FieldByName('dir').AsString + '''';
      cdsLineCount.Open;
      //ShowMessage(IntToStr(cdsLineCount.RecordCount));
      if cdsLineCount.RecordCount = 1 then 
      Begin
        UgTimeLine01.AddDD(FormatdateTime('mm-dd',cdsLine.FieldByName('time').AsDateTime),
        cdsLine.FieldByName('header').AsString,
        cdsLine.FieldByName('img').AsString,
        cdsLine.FieldByName('descr').AsString,
        cdsLine.FieldByName('dir').AsString);
        cdsLine.Next;
      End;
      if cdsLineCount.RecordCount > 1 Then
      Begin
        UgTimeLine01.AddDD_Begin(FormatdateTime('mm-dd',cdsLine.FieldByName('time').AsDateTime),
        cdsLine.FieldByName('header').AsString,
        cdsLine.FieldByName('dir').AsString);
        rcount := cdsLineCount.RecordCount;
        while rcount <> 0 do
        Begin
          UgTimeLine01.AddROW(cdsLine.FieldByName('img').AsString,
          cdsLine.FieldByName('descr').AsString);
          cdsLine.Next;
          rcount := rcount - 1;
        End;
        UgTimeline01.AddDD_End;
      End;
      
      //如果更新的月份與年份不同，則增加一個時間節點
      if (MonthOf(LastDate) <> MonthOf(cdsLine.FieldByName('time').AsDateTime)) or 
      (YearOf(LastDate) <> YearOf(cdsLine.FieldByName('time').AsDateTime))  Then
      Begin
        UgTimeLine01.AddDT(FormatdateTime('yyyy-mm',LastDate));
      End;
    End;
    UgTimeLine01.AddDT(FormatdateTime('yyyy-mm',LastDate));
    UgTimeline01.LoadTimeLine;
    UgPageControl01.TabIndex := 1;
  Finally
    cdsLineCount.Free;
  end;
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
              // Make sure to add code blocks to your code group

              # 4. 運行結果

                使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

                在時間線專案標籤頁中，可對時間線專案進行新增、編輯、刪除等操作，點選 [建立時間線]，在時間線展示中可顯示對應的時間線。

              商務月曆(WEB)
              網路文件瀏覽(WEB)

              ← 網路文件瀏覽(WEB)→

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