Copyright © 2018-2022 All Rights Reserved.
了解最新技术文章
IgbDataGrid 是一个已弃用的控件。请改用IgbGrid 。如果您对如何在IgbGrid中实现有任何疑问，请联系我们的技术支持。
显示 Ignite UI for Blazor 中包含的数据网格的简单示例。
下面是在项目中使用数据网格的过程和数据绑定的示例。
在第 22 行添加代码。
<!DOCTYPE html>
<html> _ _
<头>
<元字符集= "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/ >
<title> Blazor_Grid </title> _ _ _ _
< base href = "/" />
< link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet" />
< link href = "css/app.css" rel = "stylesheet" />
< link href = "Blazor_Grid.styles.css" rel = "stylesheet" />
</头> _ _
<正文> _ _
< div id = "app" >加载中... </div>
< div id = "blazor-error-ui" >
发生了未处理的错误。
<a href="" class="reload">重新加载</a> _ _ _ _ _ _ _ _ _ _
<a class="dismiss"> 🗙 </a> _ _ _ _ _ _ _
</div> _ _
< script src = "_content/IgniteUI.Blazor/app.bundle.js" > </ script >
< script src = "_framework/blazor.webassembly.js" > </ script >
</正文> _ _
</html> _ _
在第 11 行添加代码以注册 DataGrid 模块。
命名空间Blazor_Grid
{
公开课计划
{
公共静态异步任务主要（字符串[] args ）
{
var builder = WebAssemblyHostBuilder.CreateDefault ( args ) ;
builder.RootComponents . Add < App >( " #app" ) ;
builder.Services.AddScoped ( sp = > new HttpClient { BaseAddress = new Uri ( builder.HostEnvironment.BaseAddress ) } ) ; _ _ _
builder.Services.AddIgniteUIBlazor ( typeof ( DataGridModule ) ) ; _ _
await builder.Build ( ) . RunAsync () ;
}
}
}
添加第 11 行代码，使 Blazor 控件的 Ignite UI 在组件上可用。
@使用System.Net.Http _ _ _ _
@使用System.Net.Http.Json _ _ _ _ _ _
@使用Microsoft.AspNetCore.Components.Forms _ _ _ _ _ _
@使用Microsoft.AspNetCore.Components.Routing _ _ _ _ _
@使用Microsoft.AspNetCore.Components.Web _ _ _ _ _
@using Microsoft.AspNetCore.Components.Web.Virtualization _ _ _ _ _ _ _ _
@using Microsoft.AspNetCore.Components.WebAssembly.Http _ _ _ _ _ _ _ _
@using Microsoft.JSInterop _ _
@使用Blazor_Grid _
@using Blazor_Grid.Shared _ _
@using IgniteUI.Blazor.Controls ; _ _ _ _
@页 ”/”
@using IgniteUI.Blazor.Controls
@inject IIgniteUIBlazor IgniteUIBlazor
@代码
{
public List < SaleInfo > DataSource { get; set; } = new List < SaleInfo > ();
受保护的覆盖无效 OnInitialized()
{
base.OnInitialized();
DataGridModule.Register(IgniteUIBlazor);
对于 (int i = 0; i < 10; i++)
{
this.DataSource.Add(新的销售信息
{
产品 ID = 1001 + i,
ProductName = $"产品{i+1}",
国家=“日本”，
订单日期 = 日期时间.今天
});
}
}
公开课 SaleInfo
{
公共双产品 ID { 得到;
公共字符串产品名称 { 得到;
公共字符串国家{得到;
public DateTime OrderDate { 获取；设置；
}
}
< DataGrid高度= "500px"
宽度= "500px"
数据源= "数据源"
DefaultColumnMinWidth = "100"
AutoGenerateColumns = "false" >
< NumericColumn Field = "ProductID" HeaderText = "Product ID" />
< TextColumn Field = "ProductName" HeaderText = "Product Name" />
< TextColumn Field = "Country" HeaderText = "Country of Origin" />
< DateTimeColumn Field = "OrderDate" HeaderText = "Order Date" />
</数据网格> _ _
售前咨询专员
