Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
Descripción general de las opciones de columnas de la cuadrícula Blazor
La Ignite UI for Blazor Data Grid admite la capacidad de agrupar, ocultar, ordenar, mover, anclar, filtrar y ordenar columnas directamente desde una interfaz de usuario expuesta en cada encabezado de columna.
Para habilitar la interfaz de usuario de opciones de columna, puede establecer la propiedad IsColumnOptionsEnabled
de la cuadrícula en verdadero.
すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。
Ejemplo de opciones de columna de cuadrícula de Blazor
EXAMPLE
MODULES
DATA GENERATOR
DATA SOURCE
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls;
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main (string [] 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 (IgbDataGridModule),
typeof (IgbGridColumnOptionsModule)
);
await builder.Build().RunAsync();
}
}
}
cs コピー using System;
using System.Collections.Generic;
using System.Linq;
namespace Infragistics.Samples
{
public static class DataGenerator
{
readonly static string [] websites = { ".com" , ".gov" , ".edu" , ".org" };
readonly static string [] emails = { "gmail.com" , "yahoo.com" , "twitter.com" };
readonly static string [] genders = { "male" , "female" };
readonly static string [] maleNames = { "Kyle" , "Oscar" , "Ralph" , "Mike" , "Bill" , "Frank" , "Howard" , "Jack" , "Larry" , "Pete" , "Steve" , "Vince" , "Mark" , "Alex" , "Max" , "Brian" , "Chris" , "Andrew" , "Martin" , "Mike" , "Steve" , "Glenn" , "Bruce" };
readonly static string [] femaleNames = { "Gina" , "Irene" , "Katie" , "Brenda" , "Casey" , "Fiona" , "Holly" , "Kate" , "Liz" , "Pamela" , "Nelly" , "Marisa" , "Monica" , "Anna" , "Jessica" , "Sofia" , "Isabella" , "Margo" , "Jane" , "Audrey" , "Sally" , "Melanie" , "Greta" , "Aurora" , "Sally" };
readonly static string [] lastNames = { "Adams" , "Crowley" , "Ellis" , "Martinez" , "Irvine" , "Maxwell" , "Clark" , "Owens" , "Rooney" , "Lincoln" , "Thomas" , "Spacey" , "MOrgan" , "King" , "Newton" , "Fitzgerald" , "Holmes" , "Jefferson" , "Landry" , "Berry" , "Perez" , "Spencer" , "Starr" , "Carter" , "Edwards" , "Stark" , "Johnson" , "Fitz" , "Chief" , "Blanc" , "Perry" , "Stone" , "Williams" , "Lane" , "Jobs" , "Adams" , "Power" , "Tesla" };
readonly static string [] countries = { "USA" , "UK" , "France" , "Canada" , "Poland" };
readonly static string [] citiesUS = { "New York" , "Los Angeles" , "Miami" , "San Francisco" , "San Diego" , "Las Vegas" };
readonly static string [] citiesUK = { "London" , "Liverpool" , "Manchester" };
readonly static string [] citiesFR = { "Paris" , "Marseille" , "Lyon" };
readonly static string [] citiesCA = { "Toronto" , "Vancouver" , "Montreal" };
readonly static string [] citiesPL = { "Krakow" , "Warsaw" , "Wroclaw" , "Gdansk" };
readonly static string [] citiesJP = { "Tokyo" , "Osaka" , "Kyoto" , "Yokohama" };
readonly static string [] citiesGR = { "Berlin" , "Bonn" , "Cologne" , "Munich" , "Hamburg" };
readonly static string [] roadSuffixes = { "Road" , "Street" , "Way" };
readonly static string [] roadNames = { "Main" , "Garden" , "Broad" , "Oak" , "Cedar" , "Park" , "Pine" , "Elm" , "Market" , "Hill" };
public static Random Rand = new Random();
public static string GetWebsite ( )
{
return GetItem(websites);
}
public static string GetEmail ( )
{
return GetItem(emails);
}
public static double GetNumber (double min, double max )
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
public static int GetInteger (double min, double max )
{
return (int )GetNumber(min, max);
}
public static string GetPhone ( )
{
var phoneCode = GetNumber(100 , 900 );
var phoneNum1 = GetNumber(100 , 900 );
var phoneNum2 = GetNumber(1000 , 9000 );
var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
public static string GetGender ( )
{
return GetItem(genders);
}
public static string GetNameFirst (string gender )
{
if (gender == "male" )
return GetItem(maleNames);
else
return GetItem(femaleNames);
}
public static string GetNameLast ( )
{
return GetItem(lastNames);
}
public static string GetItem (string [] array )
{
var index = (int )Math.Round(GetNumber(0 , array.Length - 1 ));
return array[index];
}
public static string GetCountry ( )
{
return GetItem(countries);
}
public static string GetCity (string country )
{
if (country == "Canada" )
{
return GetItem(citiesCA);
}
else if (country == "France" )
{
return GetItem(citiesFR);
}
else if (country == "Poland" )
{
return GetItem(citiesPL);
}
else if (country == "USA" )
{
return GetItem(citiesUS);
}
else if (country == "Japan" )
{
return GetItem(citiesJP);
}
else if (country == "Germany" )
{
return GetItem(citiesGR);
}
else
{
return GetItem(citiesUK);
}
}
public static string GetStreet ( )
{
var num = Math.Round(GetNumber(100 , 300 )).ToString();
var road = GetItem(roadNames);
var suffix = GetItem(roadSuffixes);
return num + " " + road + " " + suffix;
}
public static DateTime GetBirthday ( )
{
var year = DateTime.Now.Year - GetInteger(30 , 50 );
var month = GetNumber(10 , 12 );
var day = GetNumber(20 , 27 );
return new DateTime(year, (int )month, (int )day);
}
public static DateTime GetDate ( )
{
var year = DateTime.Now.Year;
var month = GetNumber(10 , 12 );
var day = GetNumber(20 , 27 );
return new DateTime(year, (int )month, (int )day);
}
public static string Pad (int num, int size )
{
var s = num + "" ;
while (s.Length < size)
{
s = "0" + s;
}
return s;
}
public static string GetPhotoMale (int id )
{
return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2 ) + ".png" ;
}
public static string GetPhotoFemale (int id )
{
return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2 ) + ".png" ;
}
private static int maleCount = 0 ;
private static int femaleCount = 0 ;
public static string GetPhoto (string gender )
{
if (gender == "male" )
{
maleCount++;
if (maleCount > 24 ) maleCount = 1 ;
return GetPhotoMale(maleCount);
}
else
{
femaleCount++;
if (femaleCount > 24 ) femaleCount = 1 ;
return GetPhotoFemale(femaleCount);
}
}
public static string GetGenderPhoto (string gender )
{
return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png" ;
}
public static string GetCountryFlag (string country )
{
return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png" ;
}
public static string GetIncomeRange (double salary )
{
if (salary < 50000 )
{
return "Low" ;
}
else if (salary < 100000 )
{
return "Average" ;
}
else
{
return "High" ;
}
}
}
}
cs コピー using System;
using System.Collections.Generic;
namespace Infragistics.Samples
{
public class SaleInfo
{
public DateTime OrderDate { get ; set ; }
public string ID { get ; set ; }
public string ProductName { get ; set ; }
public double ProductPrice { get ; set ; }
public double BundlePrice { get ; set ; }
public double Margin { get ; set ; }
public double OrderItems { get ; set ; }
public double OrderValue { get ; set ; }
public double Profit { get ; set ; }
public string Country { get ; set ; }
public string CountryFlag { get ; set ; }
public string City { get ; set ; }
public string Status { get ; set ; }
}
public class SalesDataService
{
public static List<SaleInfo> Create (int ? count )
{
if (count == null ) count = 100 ;
string [] names = {
"Intel CPU" , "AMD CPU" ,
"Intel Motherboard" , "AMD Motherboard" , "NVIDIA Motherboard" ,
"NVIDIA GPU" , "GIGABYTE GPU" , "Asus GPU" , "AMD GPU" , "MSI GPU" ,
"Corsair Memory" , "Patriot Memory" , "Skill Memory" ,
"Samsung HDD" , "WD HDD" , "Seagate HDD" , "Intel HDD" ,
"Samsung SSD" , "WD SSD" , "Seagate SSD" , "Intel SSD" ,
"Samsung Monitor" , "Asus Monitor" , "LG Monitor" , "HP Monitor" };
string [] countries = { "USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" };
string [] status = { "Packing" , "Shipped" , "Delivered" };
var sales = new List<SaleInfo>();
for (var i = 0 ; i < count; i++)
{
var price = DataGenerator.GetNumber(100 , 900 );
var items = DataGenerator.GetNumber(10 , 80 );
var value = price * items;
var margin = DataGenerator.GetNumber(3 , 10 );
var profit = Math.Round((price * margin / 100 ) * items);
var country = DataGenerator.GetItem(countries);
var city = DataGenerator.GetCity(country);
sales.Add(new SaleInfo
{
ID = DataGenerator.Pad(1001 + i, 4 ),
BundlePrice = price,
ProductPrice = price,
Margin = margin,
OrderDate = DataGenerator.GetDate(),
OrderItems = items,
OrderValue = value ,
ProductName = DataGenerator.GetItem(names),
Profit = profit,
City = city,
Country = country,
CountryFlag = DataGenerator.GetCountryFlag(country),
Status = DataGenerator.GetItem(status)
});
}
return sales;
}
}
}
cs コピー
@using IgniteUI.Blazor.Controls
<div class ="container vertical" >
<div class ="container vertical" >
@ if (Data != null )
{
<div style ="overflow: hidden" >
<IgbDataGrid Height ="100%" Width ="100%"
DefaultColumnMinWidth ="120"
DataSource ="Data"
AutoGenerateColumns ="false"
IsColumnOptionsEnabled ="true" >
<IgbTextColumn Field ="ID" HeaderText ="ID" Width ="90" HorizontalAlignment ="@ CellContentHorizontalAlignment.Center " />
<IgbTextColumn Field ="ProductName" HeaderText ="Product" Width ="@( "*>120" ) " />
<IgbImageColumn IsEditable ="false" Field ="CountryFlag" HeaderText ="Country" Width ="@( "*>120" ) " PaddingTop ="5" PaddingBottom ="5" ContentOpacity ="1" HorizontalAlignment ="@ CellContentHorizontalAlignment.Center " />
<IgbNumericColumn Field ="ProductPrice" HeaderText ="Price" Width ="@( "*>110" ) " PositivePrefix ="$" ShowGroupingSeparator ="true" MinFractionDigits ="2" / >
<IgbNumericColumn Field ="OrderItems" HeaderText ="Orders" Width ="@( "*>110" ) " />
<IgbNumericColumn Field ="OrderValue" HeaderText ="Order Value" Width ="@( "*>150" ) " PositivePrefix ="$" ShowGroupingSeparator ="true" />
<IgbDateTimeColumn Field ="OrderDate" HeaderText ="Order Date" Width ="@( "*>150" ) " HorizontalAlignment ="@ CellContentHorizontalAlignment.Right " DateTimeFormat ="@ DateTimeFormats.DateShort " />
<IgbNumericColumn Field ="Margin" HeaderText ="Margin" Width ="@( "*>120" ) " PositiveSuffix ="%" HorizontalAlignment ="@ CellContentHorizontalAlignment.Center " />
<IgbNumericColumn Field ="Profit" HeaderText ="Profit" Width ="@( "*>120" ) " PositivePrefix ="$" ShowGroupingSeparator ="true" />
<IgbTextColumn Field ="Status" HeaderText ="Status" Width ="@( "*>110" ) " HorizontalAlignment ="@ CellContentHorizontalAlignment.Center " />
</IgbDataGrid >
</div >
}
</div >
</div >
@code {
private List <SaleInfo > Data;
protected override void OnInitialized ( )
{
this .Data = SalesDataService.Create(100 );
}
}
razor コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Configuraciones de opciones de columna
El filtrado se puede alternar por columna configurando la propiedad IsFilteringEnabled
de la columna. Establecer verdadero o falso mostrará u ocultará la sección de filtrado en la interfaz de usuario de opciones de la columna.
La clasificación se puede alternar para toda la cuadrícula si se aplica la propiedad HeaderClickAction
. Establecer esto en None
, por ejemplo, eliminará por completo la clasificación de la cuadrícula y se reflejará en las opciones de la interfaz de usuario para cada columna. Y configurar SortByOneColumnOnly
por ejemplo, seguirá permitiendo ordenar una columna a la vez.
Fragmento de código
El siguiente código demuestra cómo habilitar mediante programación las opciones de columna de la interfaz de usuario y ajustar el filtrado y la clasificación en las opciones de columna de la interfaz de usuario ajustando la cuadrícula y la columna.
<IgbDataGrid Height ="100%" Width ="100%"
DataSource ="DataSource"
HeaderClickAction ="HeaderClickAction.SortByOneColumnOnly"
IsColumnOptionsEnabled ="true" >
<IgbTextColumn Field ="ID" IsFilteringEnabled ="false" />
</IgbDataGrid >
razor
Referencias de API