Descripción general de la paginación en cuadrícula de árbol Blazor
La función de paginación Ignite UI for Blazor de Blazor cuadrícula de árbol se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. React paginación de cuadrícula mejora la experiencia del usuario y la interacción con los datos. IgbTreeGrid
La paginación se puede configurar a través de un componente separado proyectado en el árbol de cuadrícula mediante la definición de una IgbPaginator
etiqueta, similar a la adición de una columna. Al igual que en cualquier tabla Blazor, la paginación de la cuadrícula de árbol de Blazor admite plantillas para páginas personalizadas.
Ejemplo de paginación en cuadrícula de árbol Blazor
En el ejemplo siguiente se representa IgbTreeGrid
la paginación y se exponen las opciones de uso de elementos por página y cómo se puede habilitar la paginación. El usuario también puede navegar rápidamente por las páginas a través de los botones "Ir a la IgbTreeGrid
última página" e "Ir a la primera página".
using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
csusing 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; // for registering Ignite UI modules
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) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbPaginator
PerPage="10">
</IgbPaginator>
<IgbColumn
Field="ID"
Header="Order ID">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Price"
Header="Price"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Delivered"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
¿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.
.gridSize {
--ig-size: var(--ig-size-small);
}
css
<IgbTreeGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
<IgbPaginator PerPage="10"></IgbPaginator>
</IgbTreeGrid>
razor
Uso
El IgbPaginator
componente se utiliza junto con el IgbTreeGrid
componente en el ejemplo siguiente, pero puede utilizarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.
<IgbTreeGrid @ref=grid Data=Data className="gridSize">
<IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
</IgbPaginator>
</IgbTreeGrid>
razor
Demostración del componente paginador
using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
csusing 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; // for registering Ignite UI modules
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) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--ig-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="WebTreeGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
Name="SizeEditor"
@ref="sizeEditor"
Label="Grid Size:"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
ChangedScript="WebTreeGridSetGridSize">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbPaginator
Name="paginator"
@ref="paginator"
PerPage="10"
ResourceStrings="PaginatorResourceStrings1">
</IgbPaginator>
<IgbColumn
Field="ID"
Header="Order ID">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Price"
Header="Price"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Delivered"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var sizeEditor = this.sizeEditor;
var treeGrid = this.treeGrid;
var paginator = this.paginator;
this.BindElements = () => {
propertyEditor.Target = this.treeGrid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription sizeEditor;
private IgbTreeGrid treeGrid;
private IgbPaginator paginator;
private IgbPaginatorResourceStrings _paginatorResourceStrings1 = null;
public IgbPaginatorResourceStrings PaginatorResourceStrings1
{
get
{
if (this._paginatorResourceStrings1 == null)
{
var paginatorResourceStrings1 = new IgbPaginatorResourceStrings();
paginatorResourceStrings1.Igx_paginator_label = "Records per page";
this._paginatorResourceStrings1 = paginatorResourceStrings1;
}
return this._paginatorResourceStrings1;
}
}
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridSetGridSize", (sender, evtArgs) => {
var newVal = evtArgs.newValue.toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--ig-size: var(--ig-size-medium);
}
css
Referencias de API
Recursos adicionales
- Virtualización y rendimiento
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.