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;  
}

//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;

// 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;

//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.

// 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;
}

//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;

// 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;
}

//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;

// 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;
}

//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;

// 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;
  }
}

//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;

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

4. 运行结果

  使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  在时间线项目标签页中，可对时间线项目进行新增、编辑、删除等操作，点击 [创建时间线]，在时间线展示中可显示对应的时间线。