Web Components Adición de filas de cuadrícula de árbol

    ProporcionaIgcTreeGridComponent una forma cómoda de realizar manipulaciones de datos mediante la adición de filas en línea y una potente API para Web Components operaciones CRUD. Añade unIgcActionStrip componente con acciones de edición activadas en la plantilla de la cuadrícula, pasa el cursor por una fila y usa el botón proporcionado, pulsa ALT + + para generar la fila que añade la interfaz de usuario o ALT + SHIFT​ ​+ +para generar la interfaz para añadir un hijo para la fila seleccionada.

    Web Components Tree Grid Row Adding Example

    Row Adding Usage

    Luego define unIgcTreeGridComponent con la fuente de datos vinculada,RowEditable establecida como true y unIgcActionStrip componente con acciones de edición habilitadas. LaaddRow entrada controla la visibilidad del botón que genera la fila añadiendo la interfaz.

    <igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true">
    <igc-column field="Name" data-type="String"></igc-column>
    <igc-column field="Title" data-type="String"></igc-column>
    <igc-column field="HireDate" data-type="Date"></igc-column>
    <igc-column field="OnPTO" data-type="Boolean" width="130px">
    </igc-column>
    <igc-column field="Age" data-type="Number"></igc-column>
    <igc-action-strip id="actionstrip">
        <igc-grid-editing-actions add-row="true">
        </igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

    Nota: La configuración de la clave principal es obligatoria para las operaciones de adición de filas.

    Nota: Cada columna excepto la clave primaria se puede editar en la fila añadiendo la interfaz por defecto. Si quieres desactivar la edición para una columna específica, entonces tienes que configurar laeditable entrada de la columna enfalse.

    Nota: LasIgcGridEditingActions entradas que controlan la visibilidad de los botones de añadir fila y añadir hijos pueden usar el contexto de tira de acción (que es del tipoIgcRowType para ajustar qué registros muestran los botones).

    El interiorBaseTransactionService se proporcionaIgcTreeGridComponent automáticamente. Mantiene los cambios pendientes de celda hasta que se envíe o cancele el estado de la fila.

    Start Row Adding Programmatically

    IgcTreeGridComponentpermite generar programáticamente la interfaz de añadir filas usando dos métodos públicos diferentes. Uno que acepta un ID de fila para especificar la fila bajo la que debe aparecer la interfaz y otro que funciona por índice. Puedes usar estos métodos para generar la interfaz en cualquier lugar dentro de la vista de datos actual. No se permite cambiar la página o especificar una fila que, por ejemplo, esté filtrada.

    UsarBeginAddRowById requiere que especifiques la fila que se va a usar como contexto para la operación por itsRowID (PK). El método entonces funciona como si el usuario final hiciera clic en el botón de añadir la acción de la tira para la fila especificada, generando la interfaz debajo de ella. El segundo parámetro controla si la fila se añade como hijo a la fila de contexto o como hermana. También puedes hacer que la interfaz aparezca como la primera fila de la cuadrícula pasandonull por el primer parámetro.

    this.treeGrid.beginAddRowById('ALFKI', true);   // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // Spawns the add row UI as the first record

    ElbeginAddRowByIndex método funciona de forma similar, pero la fila a usar como contexto se especifica mediante el índice.

    this.treeGrid.beginAddRowByIndex(10, true);   // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // Spawns the add row UI as the first record

    Positioning

    • La posición predeterminada de la interfaz de usuario para agregar filas está debajo de la fila en la que el usuario final hizo clic en el botón Agregar fila.

    • ElIgcTreeGridComponent desplazamiento para mostrar completamente la interfaz de añadir fila automáticamente.

    • La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.

    Behavior

    La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de la cuadrícula de árbol para obtener más información.

    Después de añadir una nueva fila a través de la fila añadiendo la interfaz, su posición y/o visibilidad se determina por el estado de ordenación, filtrado y agrupación de laIgcTreeGridComponent. En unIgcTreeGridComponent caso que no tenga aplicado ninguno de estos estados, aparece como el último registro. Se muestra brevemente una barra de snacks que contiene un botón que el usuario final puede usar para desplazarloIgcTreeGridComponent hasta su posición si no está a la vista.

    Keyboard Navigation

    • ALT + +: ingresa al modo de edición para agregar una fila
    • ALT + SHIFT + + - Enters edit mode for adding a child

    • ESC sale del modo de agregar filas sin enviar ningún cambio

    • TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

    Feature Integration

    • Cualquier operación de suma de filas se detendrá si la vista de datos delIgcTreeGridComponent se modifica. Cualquier cambio realizado por el usuario final se envía. Las operaciones que cambian la vista de datos incluyen, pero no se limitan a, ordenación, agrupación, filtrado, paginación, etc.

    • Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.

    Customizing Row Adding Overlay

    Customizing Text

    Personalizar el texto de la fila añadiendo superposición es posible usando elRowAddTextTemplate.

    this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`Adding Row`;
}

    Styling

    La interfaz de añadir filas comprende los botones en lasIgcActionStrip acciones de edición, los editores de edición y la superposición, así como la barra de snacks que permite a los usuarios finales desplazarse hasta la fila recién añadida. Para estructurar estos componentes, puedes consultar estas guías completas sobre sus respectivos temas:

    API References

    • RowEditable
    • RowEditEnter
    • RowEdit
    • RowEditDone
    • RowEditCancel
    • EndEdit
    • PrimaryKey
    • IgcTreeGridComponent

    Additional Resources

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