Web Components Clasificación jerárquica de cuadrículas
La función de ordenación de datos Ignite UI for Web Components en Web Components cuadrícula jerárquica está habilitada a nivel por columna, lo que significa que IgcHierarchicalGridComponent puede tener una combinación de columnas ordenables y no ordenables. La realización de acciones de ordenación Web Components le permite cambiar el orden de visualización de los registros en función de los criterios especificados.
Web Components Ejemplo de descripción general de la ordenación de cuadrícula jerárquica
Además, se ha añadido un menú contextual personalizado para ordenar mediante IgcHierarchicalGridComponent la ContextMenu salida.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-columnfield="Artist"header="Artist"data-type="string"sortable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"sortable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"sortable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"sortable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"sortable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"sortable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"sortable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"sortable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"sortable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Esto se hace a través de la sortable entrada. Con la IgcHierarchicalGridComponent ordenación, también puede establecer la propiedad para realizar la sortingIgnoreCase ordenación que distingue entre mayúsculas y minúsculas:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-columnfield="Artist"header="Artist"data-type="string"sortable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"sortable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"sortable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"sortable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"sortable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"sortable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"sortable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"sortable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"sortable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
// Perform a case insensitive ascending sort on the ProductName column.this.hierarchicalGrid.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
// Perform sorting on both the ProductName and Price columns.this.hierarchicalGrid.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
typescript
La clasificación se realiza mediante nuestro algoritmo DefaultSortingStrategy. Cualquier IgcColumnComponent o ISortingExpression puede usar una implementación personalizada de ISortingStrategy como algoritmo sustituto. Esto es útil cuando es necesario definir una ordenación personalizada para columnas de plantilla complejas o columnas de imagen, por ejemplo.
Al igual que con el comportamiento de filtrado, puede borrar el estado de clasificación utilizando el método clearSort:
// Removes the sorting state from the ProductName columnthis.hierarchicalGrid.clearSort('ProductName');
// Removes the sorting state from every column in the Hierarchical Gridthis.hierarchicalGrid.clearSort();
typescript
La sortStrategy de IgcHierarchicalGridComponent es de un tipo diferente en comparación con la sortStrategy de IgcColumnComponent, ya que funcionan en diferentes ámbitos y exponen diferentes parámetros.
La operación de ordenación NO cambia el origen de datos subyacente de IgcHierarchicalGridComponent.
Si una columna de dataType Date usa valores de tipo string, IgcHierarchicalGridComponent no los analizará en objetos Date y el uso de la ordenación de IgcHierarchicalGridComponent no funcionará según lo esperado. Si desea utilizar objetos de cadena, se debe implementar lógica adicional en el nivel de la aplicación para analizar los valores en objetos Date.
Plantillas de indicadores de clasificación
El icono del indicador de clasificación en el encabezado de la columna se puede personalizar mediante una plantilla. Las siguientes propiedades están disponibles para crear plantillas del indicador de clasificación para cualquier estado de clasificación (ascendente, descendente, ninguno):
sortHeaderIconTemplate: vuelve a crear una plantilla para el icono de clasificación cuando no se aplica ninguna clasificación.
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
grid.data = this.data;
grid.sortHeaderIconTemplate = this.sortHeaderIconTemplate;
}
public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-iconname="unfold_more"></igc-icon>`;
}
ts
sortAscendingHeaderIconTemplate: vuelve a crear una plantilla para el icono de clasificación cuando la columna está ordenada en orden ascendente.
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
grid.data = this.data;
grid.sortAscendingHeaderIconTemplate = this.sortAscendingHeaderIconTemplate;
}
public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-iconname="expand_less"></igc-icon>`;
}
ts
sortDescendingHeaderIconTemplate: vuelve a crear una plantilla para el icono de clasificación cuando la columna se ordena en orden descendente.
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
grid.data = this.data;
grid.sortDescendingHeaderIconTemplate = this.sortDescendingHeaderIconTemplate;
}
public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-iconname="expand_more"></igc-icon>`;
}
ts
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"><igc-columnfield="Artist"header="Artist"data-type="string"sortable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"sortable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"sortable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"sortable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="date"sortable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"sortable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"header="Tour"data-type="string"sortable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"sortable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"sortable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"sortable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html