Blazor网格组件概述
本文提供了一个快速的入门Blazor数据网格组件几秒钟后就能运行了。有一个视频教程和关键功能的列表。
Telerik Blazor数据网格提供了一组全面的随时可用的功能。它们涵盖了从分页、排序、过滤、编辑和分组到行虚拟化、优化的数据读取、键盘导航和可访问性支持的所有内容。
Telerik Blazor网格是在本地Blazor基础上构建的，由一家拥有悠久历史的公司制作企业级网格。这就产生了一个高度可定制的网格，可以提供快速的照明性能。
的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建Blazor数据网格
- 使用
TelerikGrid标签。 - 分配网格
数据的参数。IEnumerable < T >财产,或使用OnRead事件．我们会用数据这一次。的网格数据绑定文章比较两种选择。 - (可选)启用一些数据操作，如分页、排序或过滤。
- 添加
GridColumn在GridColumns标签。每一列场应该指向要显示的模型属性。使用nameof ()或者普通字段名。定义用户友好的列标题年代或DisplayFormat用于数值和日期值．
开始与Blazor网格
@* Telerik Blazor Grid with some common features *@ @code{私有列表 GridData {get;设置;} protected override void OnInitialized() {GridData =新列表<产品>();var rnd = new Random();For (int I = 1;I <= 30;i++) {GridData。添加(new Product { Id = i, Name = "Product name " + i, Price = (decimal)(rnd.Next(1, 50) * 3.14), Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date, Discontinued = i % 5 == 0 }); } base.OnInitialized(); } public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } public DateTime Released { get; set; } public bool Discontinued { get; set; } } } 视频教程
如果你喜欢视频指导，看这个短Blazor Grid视频教程。它涵盖以下主题:
- Telerik Blazor网格介绍
- 添加TelerikRootComponent到MainLayout
- 添加一个Blazor网格
- 配置列
- 启用附加功能
数据绑定
的是向网格提供数据的两种主要方法——通过数据参数，并通过OnRead事件．数据提供了简单,而OnRead允许更多的灵活性在复杂情况下，和性能当有大量的数据时。
数据操作
Blazor Grid支持开箱即用的所有基本数据操作:
编辑
Grid可以对其当前数据执行CRUD操作——添加、编辑和删除行。它公开事件，使您可以控制编辑并向实际数据源提交更改。
Grid提供了几种具有不同用户体验的编辑模式——取消、内联和弹出。
看到网格CRUD操作概述欲知详情。
虚拟化
Blazor Grid具有UI虚拟化功能，以提高浏览器性能:
列的功能
Grid列提供了一组丰富的功能，为您的应用程序场景提供了极大的灵活性。主要栏目特点包括:
模板
Grid支持在组件的各个部分(如数据单元格、页眉、页脚、编辑器等)中定制内容。看到网格模板．
更多网格功能
- 选择-通过单击或复选框选择一行或多行
- 状态-以编程方式获取或设置Grid配置
- 工具栏-在标题单元格上方的工具栏中定义用户操作
- 层次结构- nest网格和可视化亲子关系之间的数据记录
- 拖放行-在网格中移动行或在不同网格之间移动行
- 加载动画-显示加载动画，提高长时间数据操作的用户体验
- 滚动——如果数据不符合当前组件的宽度和高度，网格将自动显示标准滚动条。
网格参数
下表列出了Grid参数，这些参数在组件文档的其他地方没有讨论过。检查网格API参考获取参数、方法和事件的完整列表。
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
类 |
字符串 |
类的附加CSS类< div class = " k-grid”>元素。使用它来应用自定义样式或超越主题．例如,改变网格字体大小． |
高度 |
字符串 |
高度样式任何支持的CSS单元． |
通航 |
保龄球 |
使键盘导航． |
宽度 |
字符串 |
中的宽度样式任何支持的CSS单元．Grid没有默认宽度，但会水平展开以填充其容器。 |
网格参考和方法
Grid有一些方法来执行动作，比如:
要执行这些方法，请通过获取对Grid实例的引用@ref．
如何获取网格引用和调用方法
Autofit所有列 @code {private TelerikGrid TheGrid {get;设置;}私有无效AutoFit() {TheGrid.AutoFitAllColumns();} private IEnumerable GridData = Enumerable。Range(1,5) .Select(x => new GridModel {Id = x, Text = "一些更长的文本在这里不适合单行，我们想展开它" + x});公共类GridModel{公共int Id{获取;设置;}公共字符串文本{获取; set; } } }