Blazor Gantt组件概述
的Blazor甘特图组件允许您轻松地说明任务集合。该组件由两个部分组成:
甘特分量是Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
时,将数据收集传递给甘特树时,组件将自动呈现必要的元素时间轴.
创造Blazor Gantt
添加
TelerikGantt
标记到Razor文件。设置它
数据
属性设置为将保存数据集合的变量。控件设置组件尺寸
宽度
而且高度
属性。在其
GanttViews
标签,设置所需的的观点.在其
GanttColumns
标签,设置所需的GanttColumn
实例的场
属性指向要显示的模型字段的名称。处理
OnUpdate
而且OnDelete
事件,以响应项的更改。
通用甘特图及其分层数据绑定。这个片段的80%是硬编码数据,旨在看起来真实*@ @code {public DateTime SelectedDate {get;设置;} = new DateTime(2019, 11,11,6,0,0);类FlatModel{公共int Id{获取;设置;}公共int?ParentId {get;设置; } 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; List Data { get; set; } 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 = "Employee " + i.ToString(), Start = new DateTime(2020, 12, 10 + i), End = new DateTime(2020, 12, 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 = " Employee " + i + " : " + j.ToString(), Start = new DateTime(2020, 12, 20 + j), End = new DateTime(2020, 12, 21 + 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); } }
数据绑定
若要在Telerik甘特图中显示数据,请定义GanttColumn实例——它们有一个模型场
并公开设置以控制可见性列的显示数据的格式,以及文本对齐。
Telerik Blazor甘特图是数据源不可知的-您可以根据您的项目使用任何数据库和服务,您只需要在托管它的组件的视图模型中获取数据模型集合到甘特图。
以下资源列表提供了不同场景下数据绑定甘特图的示例:
关于数据绑定工作方式的一般信息-甘特图数据绑定概述.
绑定到自引用的平面数据源-将甘特图绑定到平面自引用数据.
使用带有嵌套在每个项中的项集合的分层数据源-将甘特图绑定到层次数据.
编辑
甘特图可以对其当前数据收集执行CRUD操作,并公开允许您控制操作并将更改传输到实际数据源的事件。控件中的两个任务都可以编辑TreeList以及他们各自在时间轴.
排序
甘特图可以自动对数据进行排序。阅读更多关于Blazor Gantt排序的信息.
过滤
甘特图可以自动过滤数据。阅读更多关于Blazor Gantt过滤.
模板
组件公开用于自定义时间轴项呈现。阅读更多关于Blazor Gantt模板.
工具栏
Blazor Gantt组件有一个用于定义用户操作的专用工具栏。目前,它们主要是自定义操作,但在未来的版本中,您将能够添加诸如导出之类的功能。
滚动
当总列宽度超过甘特图的宽度时,您将得到一个水平滚动条。当行高度超过甘特图的高度时,您将得到一个垂直滚动条。
甘特树
甘特树是甘特图的左边部分。通过其数据绑定选项提供数据的部分。阅读更多关于Blazor甘特树的信息.
甘特时间表
甘特时间轴在时间轴视图中提供了甘特记录的可视化表示。组件的右边部分。它的配置类似于调度器的时间表视图。阅读更多关于Blazor Gantt Timeline的信息.
甘特依赖关系
Blazor Gantt允许定义依赖项,这些依赖项在时间轴组件的部分。依赖关系表示两个任务之间的关系。阅读更多关于Blazor Gantt依赖.
事件
Blazor Gantt触发CUD、展开/折叠和TreeList窗格宽度更改事件。处理这些事件以响应用户操作。阅读更多关于Blazor Gantt事件.
甘特参考和方法
要执行甘特方法,请通过获取对组件实例的引用@ref
.
甘特是一个通用部件。它的类型取决于它的模型的类型和对象的类型价值
.如果你不能提供价值
或数据
最初,你需要将相应的类型设置为TItem
而且TValue
参数.
下表列出了甘特方法。亦请参阅甘特API.
方法 | 描述 |
---|---|
重新绑定 |
刷新组件数据. |
@code{ private TelerikGantt GanttRef; }