Web Components Estilo condicional de cuadrícula jerárquica
La característica de estilo condicional Ignite UI for Web Components en Web Components cuadrícula jerárquica permite el estilo personalizado a nivel de fila o celda. La IgcHierarchicalGridComponent funcionalidad de estilo condicional se utiliza para enfatizar o resaltar visualmente los datos que cumplen determinados criterios, lo que facilita a los usuarios la identificación de información importante o tendencias dentro de la cuadrícula.
Estilo de fila condicional de cuadrícula jerárquica
El IgcHierarchicalGridComponent componente de Ignite UI for Web Components proporciona dos formas de aplicar estilos condicionales a las filas en función de reglas personalizadas.
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGrid;
grid.rowClasses = this.rowClasses;
}
ts
La entrada rowClasses acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
<!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"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"name="rowIsland1"id="rowIsland1"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"name="rowIsland2"id="rowIsland2"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"name="rowIsland3"id="rowIsland3"><igc-columnfield="Tour"header="Tour"data-type="string"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="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
¿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.
Usar estilos de fila
El IgcHierarchicalGridComponent control expone la rowStyles propiedad que permite el estilo condicional de las filas de datos. De rowClasses manera similar, acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar un peinado regular (sin ninguna condición).
<!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"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"name="rowIsland1"id="rowIsland1"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="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"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="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
Estilo de celda condicional de cuadrícula jerárquica
Descripción general
El IgcHierarchicalGridComponent componente de Ignite UI for Web Components proporciona dos formas de aplicar estilos condicionales a las celdas en función de reglas personalizadas.
Estableciendo la IgcColumnComponent entrada cellClasses en un literal de objeto que contenga pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano. El resultado es un conveniente estilo de material de la célula.
constructor() {
var grammyNominations = document.getElementById('grammyNominations') as IgcColumnComponent;
grammyNominations.cellClasses = this.grammyNominationsCellClassesHandler;
}
ts
La entrada cellClasses acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
<!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"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"name="column1"id="column1"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="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"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="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 */.upFont {
color: green !important;
}
.downFont {
color: red !important;
}
css
Mediante el uso de la IgcColumnComponent entrada cellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.
La firma de devolución de llamada para cellStyles y cellClasses ahora se cambia a:
Las columnas exponen la propiedad cellStyles que permite aplicar estilos condicionales a las celdas de las columnas. Al igual que cellClasses acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar el peinado habitual con facilidad (sin condiciones).
<!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"resizable="true"name="column1"id="column1"></igc-column><igc-columnfield="HasGrammyAward"header="Has Grammy Award?"data-type="boolean"resizable="true"name="column2"id="column2"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"name="column3"id="column3"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"name="column4"id="column4"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"name="column5"id="column5"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"name="column6"id="column6"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="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"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="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
Problemas y limitaciones conocidos
Si hay celdas vinculadas a la misma condición (de diferentes columnas) y una celda se actualiza, las otras celdas no se actualizarán según el nuevo valor, si se cumple la condición.
Se debe realizar una verificación para aplicar los cambios al resto de celdas. El siguiente ejemplo muestra cómo hacerlo.