时间轴视图

甘特时间线提供了四个预定义的视图，用于指示单个时隙所代表的时间:

基础知识

要为时间轴使用所需的视图:

1. 下< GanttViews >定义所需的视图。(您应该包含至少一个Timeline将显示的视图，否则组件将抛出异常)。

2. 使用视图公开的特性来控制它们的设置

                      @code {public GanttView SelectedView {get;设置; } = GanttView.Week; List Data { get; set; } class FlatModel { public int Id { get; set; } public int? ParentId { get; set; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } public int LastId { get; set; } = 1; protected override void OnInitialized() { Data = new List(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; Data.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { Data.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id)); if (foundItem != null) { foundItem.Title = item.Title; foundItem.Start = item.Start; foundItem.End = item.End; foundItem.PercentComplete = item.PercentComplete; } } private void DeleteItem(GanttDeleteEventArgs args) { var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = Data.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } Data.Remove(item); } }

查看参数

另请参阅

• 现场演示:甘特视图