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.

    Más adelante en este tema los cubriremos ambos con más detalle.

    Usando clases de filas

    Puede aplicar estilo condicional a las IgcHierarchicalGridComponent filas estableciendo la rowClasses entrada y definiendo reglas personalizadas.

    <igc-hierarchical-grid id="grid" height="600px" width="100%">
    </igc-hierarchical-grid>
    html
    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.

    public rowClasses = {
        activeRow: (row: IgcRowType) => row.index === 0
    }
    ts
    .activeRow {
        border: 2px solid #fc81b8;
        border-left: 3px solid #e41c77;
    }
    css

    Manifestación

    EXAMPLE
    TS
    HTML
    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.

    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).

    The callback signature for both rowStyles and rowClasses is:

    (row: IgcRowType) => boolean
    ts

    Definamos nuestros estilos:

    public rowStyles = {
        background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
        'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
    };
    
    public childRowStyles = {
        'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
    };
    typescript
    <igc-hierarchical-grid id="hierarchicalGrid" auto-generate="true"
            height="580px" width="100%">
            <igc-row-island id="rowIsland1" child-data-key="Albums" auto-generate="true" >
            </igc-row-island>>
    </igc-hierarchical-grid>
    html
    constructor() {
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland1 = this.rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
        hierarchicalGrid.rowStyles = this.rowStyles;
        rowIsland1.rowStyles = this.childRowStyles;
    }
    ts

    Manifestación

    EXAMPLE
    TS
    HTML
    CSS

    Estilo de celda condicional de cuadrícula jerárquica

    Ignite UI for Web Components | CTA Banner

    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.

    Usando clases de células

    Puede aplicar estilo condicional a las IgcHierarchicalGridComponent celdas estableciendo el parámetro IgcColumnComponent ​ ​cellClasses Introduzca y defina reglas personalizadas.

    <igc-column id="grammyNominations" field="GrammyNominations" data-type="Number"></igc-column>
    html
    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.

    public grammyNominationsCellClassesHandler = {
        downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
        upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
    };
    typescript
    .upFont {
        color: green !important;
    }
    
    .downFont {
        color: red !important;
    }
    css

    Manifestación

    EXAMPLE
    TS
    HTML
    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:

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
    ts

    Usar estilos de celda

    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).

    Definamos nuestros estilos:

    public cellStylesHandler = {
        background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData, columnKey, cellValue, rowIndex) => {
            if (columnKey === "Debut") {
                return cellValue > 2000 ? "#28a745" : "#dc3545";
            }
            return undefined;
        }
    }
    ts
    <igc-column id="col1">
    </igc-column>
    html
    constructor() {
        var col1 = document.getElementById('col1') as IgcColumnComponent;
        col1.cellStyles = this.cellStylesHandler;
    }
    ts

    Manifestación

    EXAMPLE
    TS
    HTML
    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.

    public backgroundClasses = {
        myBackground: (rowData: any, columnKey: string) => {
            return rowData.Col2 < 10;
        }
    };
    
    public editDone(evt) {
        this.Col1.cellClasses = {...this.backgroundClasses};
    }
    ts
    <igc-hierarchical-grid id="grid1" height="500px" width="100%" >
      <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
      <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
      <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
    <igc-hierarchical-grid>
    html
    constructor() {
        var grid = this.grid = document.getElementById('grid1') as IgcHierarchicalGrid;
        var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
        var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
        var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
        grid.data = this.data;
        grid.onCellEdit = this.editDone;
        Col1.cellClasses = this.backgroundClasses;
        Col2.cellClasses = this.backgroundClasses;
        Col3.cellClasses = this.backgroundClasses;
    }
    ts

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.