Acciones de fila en la cuadrícula de árbol Angular
El componente de cuadrícula de árbol de Ignite UI for Angular proporciona la capacidad de utilizar ActionStrip y CRUD para los componentes de fila/celda y la fijación de filas. El componente Action Strip puede alojar controles de interfaz de usuario predefinidos para estas operaciones.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
Los componentes de la interfaz de usuario actions predefinidas son:
IgxGridEditingActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición de cuadrículas. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción rowEditable y la eliminación de filas de la cuadrícula.
IgxGridPinningActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para fijar filas de cuadrícula. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.
Se agregan dentro de <igx-action-strip> y todo esto es necesario para tener una Action Strip que proporcione interacciones predeterminadas.
<igx-tree-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'"><igx-column *ngFor="let c of columns" [field]="c.field"></igx-column><igx-action-strip #actionStrip><igx-grid-pinning-actions></igx-grid-pinning-actions><igx-grid-editing-actions></igx-grid-editing-actions></igx-action-strip></igx-tree-grid>html
Cuando IgxActionStripComponent es un componente secundario de la cuadrícula, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.
Implementación personalizada
Estos componentes exponen plantillas que brindan flexibilidad para la personalización. Por ejemplo, si quisiéramos utilizar el ActionStrip para un escenario de Gmail con acciones de fila como delete, edit y etc. Simplemente puede crear un componente de botón con igx-icon, agréguele el evento de clic e insértelo en el igx-action-strip componente.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Las acciones predefinidas heredan IgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredar IgxGridActionsBaseDirective.
Referencias de API
Para obtener información más detallada sobre la API Action Strip, consulte los siguientes enlaces: