Angular Configuración de la hoja de cálculo

    El componente Angular hoja de cálculo permite al usuario configurar muchos aspectos diferentes del control. Esto incluye, entre otros, la edición de las celdas, la visibilidad de las líneas de cuadrícula y los encabezados, la protección, el nivel de zoom y varias otras propiedades relacionadas con la hoja de cálculo de Excel.

    Angular Configuring Spreadsheet Example

    Configuring Cell Editing

    Cuando un usuario edita el valor de una celda y confirma la nueva entrada, elIgxSpreadsheetComponent control tiene la capacidad de navegar a celdas adyacentes a la celda actualmente activa al pulsar la ENTER tecla, dependiendo de la configuración de la hoja de cálculo.

    Para habilitar esta ENTER navegación clave, puedes poner laisEnterKeyNavigationEnabled propiedad en true. Si se configura en falso, la celda activa permanecerá igual al pulsar la ENTER tecla.

    También puedes configurar la dirección de la celda adyacente a la que se navega al pulsar la ENTER tecla configurando laenterKeyNavigationDirection propiedad paraDown,Up,Left oRight.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igx-spreadsheet isEnterKeyNavigationEnabled=true
    enterKeyNavigationDirection="Left">
</igx-spreadsheet>

    this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;

    Configuring Formula Bar

    The Angular IgxSpreadsheetComponent allows you to configure the visibility of the formula bar by setting the isFormulaBarVisible property of the control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

    PermiteIgxSpreadsheetComponent configurar la visibilidad de sus líneas de cuadrícula estableciendo laareGridlinesVisible propiedad del control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

    PermiteIgxSpreadsheetComponent configurar la visibilidad de sus cabeceras estableciendo laareHeadersVisible propiedad del control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

    ElIgxSpreadsheetComponent control permite configurar la navegación entre las celdas de una hoja de cálculo determinando si el control está en "modo final". El modo final es la funcionalidad en la que, al pulsar una flecha, la celda activa se mueve de la celda actual al final de la fila o columna donde existen datos en las celdas adyacentes, dependiendo de la dirección de la tecla de flecha pulsada. Esta funcionalidad es útil para navegar rápidamente hasta el final de grandes bloques de datos.

    Por ejemplo, si estás en modo final y haces clic en un bloque grande de datos de 100x100, y pulsas la → flecha, esto se desplazará al extremo derecho de la fila en la que estás hasta la columna más a la derecha con los datos. Tras esta operación, elIgxSpreadsheetComponent modo de finalización saldrá del sistema.

    El modo final entra en vigor en tiempo de ejecución cuando el usuario pulsa la END tecla, pero puede configurarse programáticamente estableciendo laisInEndMode propiedad del control de la hoja de cálculo.

    Los siguientes fragmentos de código demuestran lo anterior, en el sentido de que comenzaránIgxSpreadsheetComponent en modo final:

    <igx-spreadsheet isInEndMode=true></igx-spreadsheet>

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    RespetaránIgxSpreadsheetComponent la protección de un cuaderno de trabajo hoja por ficha. La configuración de la protección de una hoja de cálculo puede configurarse llamando alProtect() método de la hoja para protegerla y alUnprotect() método para desprotegerla.

    Puedes activar o desactivar la protección en laIgxSpreadsheetComponent hoja de cálculo actualmente activa del control usando el siguiente código:

    this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();

    Configuring Selection

    ElIgxSpreadsheetComponent control te permite configurar el tipo de selección permitido en el control y luego el usuario pulsa las teclas modificadoras (SHIFT o). CTRL Esto se hace estableciendo laselectionMode propiedad de la hoja de cálculo en uno de los siguientes valores:

    • AddToSelection: Se añaden nuevos rangos de celdas a laSpreadsheetSelection colección delcellRanges objeto sin necesidad de mantener pulsada la CTRL tecla al arrastrar con el ratón y se añade un rango con la primera flecha de navegación tras entrar en el modo. Se puede entrar en el modo pulsando SHIFT + F8.
    • ExtendSelection: El rango de selección en laSpreadsheetSelection colección del objetocellRanges que representa la celda activa se actualiza al usar el ratón para seleccionar una celda o navegar mediante el teclado.
    • Normal: La selección se reemplaza al arrastrar el ratón para seleccionar una celda o un rango de celdas. De manera similar, al navegar por el teclado se crea una nueva selección. Se puede añadir un nuevo rango manteniendo pulsada la CTRL tecla y usando el ratón, y se puede modificar el rango de selección que contiene la celda activa manteniendo pulsada SHIFT la tecla mientras se hace clic con el ratón o navegando con el teclado, como con las teclas de flecha.

    ElSpreadsheetSelection objeto mencionado en las descripciones anteriores puede obtenerse utilizando laactiveSelection propiedad delIgxSpreadsheetComponent control.

    Los siguientes fragmentos de código demuestran la configuración del modo de selección:

    <igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    La selección delIgxSpreadsheetComponent control también puede establecerse u obtenerse programáticamente. Para selección única, puedes establecer laactiveCell propiedad La selección múltiple se realiza a través delSpreadsheetSelection objeto que es devuelto por laIgxSpreadsheetComponent propiedad delactiveSelection control.

    ElSpreadsheetSelection objeto tiene unAddCellRange() método que permite añadir programáticamente un rango de celdas a la selección de la hoja de cálculo en forma de un nuevoSpreadsheetCellRange objeto.

    El siguiente fragmento de código demuestra cómo agregar un rango de celdas a la selección de la hoja de cálculo:

    this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));

    Configuring Tab Bar Area

    ElIgxSpreadsheetComponent control respeta la configuración de la visibilidad y el ancho del área de la barra de pestañas desde elWindowOptions de la actualmente activaworkbook a través de lastabBarWidth propiedades yTabBarVisibility, respectivamente.

    El área de la barra de pestañas es el área que visualiza los nombres de las hojas de trabajo como pestañas en el control.

    Puede configurar la visibilidad y el ancho de la barra de pestañas utilizando el siguiente fragmento de código:

    this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;

    Configuring Zoom Level

    The Angular Spreadsheet component supports zooming in and out by configuring its zoomLevel property. The zoom level can be a maximum of 400% and a minimum of 10%.

    Poner esta propiedad en un número representa el porcentaje como un número entero, así que fijar elzoomLevel en 100 equivale a ponerlo en 100%.

    Los siguientes fragmentos de código muestran cómo configurar el nivel de zoom de la hoja de cálculo:

    <igx-spreadsheet zoomLevel=200></igx-spreadsheet>

    this.spreadsheet.zoomLevel = 200;

    API References