Descripción general de los grupos de columnas contraíbles de cuadrícula de árbol de Web Components
La característica Ignite UI for Web Components Grupos de columnas contraíbles en Web Components cuadrícula de árbol le permite organizar y administrar varios niveles de columnas anidadas y grupos de columnas en el IgcTreeGridComponent agrupándolos y proporcionando la opción de contraer o expandir estos grupos para mejorar la visualización de datos y la navegación.
Ejemplo de grupos de columnas contraíbles de cuadrícula de árbol de Web Components
<!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-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"primary-key="ID"foreign-key="ParentID"moving="true"row-selection="none"><igc-column-groupheader="General Information"collapsible="true"expanded="false"pinned="false"><igc-columnfield="Name"header="Full Name"data-type="string"sortable="true"resizable="true"width="200"visible-when-collapsed="false"></igc-column><igc-columnfield="LastName"header="Last Name"data-type="string"sortable="true"resizable="true"width="200"visible-when-collapsed="true"></igc-column><igc-columnfield="Title"width="250"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="ID"data-type="number"resizable="true"filterable="false"visible-when-collapsed="false"></igc-column><igc-columnfield="HireDate"data-type="date"sortable="true"resizable="true"visible-when-collapsed="false"></igc-column><igc-columnfield="Age"data-type="number"sortable="true"resizable="true"visible-when-collapsed="false"></igc-column></igc-column-group><igc-column-groupheader="Address Information"><igc-column-groupheader="Location"collapsible="true"><igc-columnfield="FullAddress"width="300"data-type="string"sortable="true"resizable="true"visible-when-collapsed="true"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"resizable="true"visible-when-collapsed="false"></igc-column><igc-columnfield="City"data-type="string"sortable="true"resizable="true"visible-when-collapsed="false"></igc-column><igc-columnfield="Address"data-type="string"sortable="true"resizable="true"visible-when-collapsed="false"></igc-column></igc-column-group><igc-column-groupheader="Contact Information"><igc-columnfield="Phone"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="Fax"data-type="string"sortable="true"resizable="true"></igc-column><igc-columnfield="PostalCode"data-type="string"sortable="true"resizable="true"></igc-column></igc-column-group></igc-column-group></igc-tree-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.
Configuración
Para comenzar con la IgcTreeGridComponent función de encabezados de varias columnas contraíbles, primero debe instalar Ignite UI for Web Components escribiendo el siguiente comando:
Para obtener una introducción completa al Ignite UI for Web Components, lea el tema de introducción.
Además, le recomendamos encarecidamente que eche un vistazo breve al tema de encabezados de varias columnas para ver información más detallada sobre cómo configurar los grupos de columnas en su cuadrícula.
Uso
Los grupos de columnas plegables son parte de la función de encabezados de varias columnas que proporciona una manera de contraer/expandir un grupo de columnas a un conjunto más pequeño de datos. Cuando se contrae un grupo de columnas, se mostrará un subconjunto de columnas al usuario final y las otras columnas secundarias del grupo se ocultarán. Cada columna contraída/expandida se puede vincular a la fuente de datos de la cuadrícula, o puede no vincularse y, por lo tanto, calcularse.
Para definir un grupo de columnas como contraíble, debe establecer la Collapsible propiedad en columnGroup true.
Debe definir la propiedad visibleWhenCollapsed en al menos dos columnas secundarias. Al menos una columna debe estar visible cuando el grupo está contraído (visibleWhenCollapsed establecido en verdadero) y al menos una columna debe estar oculta cuando el grupo está expandido (visibleWhenCollapsed establecido en false); de lo contrario, la funcionalidad contraíble se deshabilitará. Si no se especifica visibleWhenCollapsed para algunas de las columnas secundarias, esta columna siempre estará visible independientemente de si el estado principal está expandido o contraído.
Veamos el marcado a continuación:
<igc-column-groupheader="Customer Information"collapsible="true"><!-- Initially the column groups will be expanded---><!--The column below will be visible when its parent is collapsed--><igc-columnfield="CustomerName"header="Fullname"data-type="String"visible-when-collapsed="true"></igc-column><!--The three columns below will be visible when its parent is expanded--><igc-columnfield="CustomerID"header="Customer ID"data-type="String"visible-when-collapsed="false"></igc-column><igc-columnfield="FirstName"header="First Name"data-type="String"visible-when-collapsed="false"></igc-column><igc-columnfield="LastName"header="Last Name"data-type="String"visible-when-collapsed="false"></igc-column><igc-column-groupheader="Customer Address"><!--This column visibility will not be changed based on parent expand/collapsed state--><igc-columnfield="Country"header="Country"data-type="String"sortable="true"></igc-column><igc-columnfield="City"header="City"data-type="String"sortable="true"></igc-column></igc-column-group></igc-column-group>html
En resumen, cada columna secundaria tiene tres estados:
Puede estar siempre visible, sin importar el estado expandido de su padre.
Puede ser visible cuando su padre está contraído.
Se puede ocultar cuando su padre está colapsado.
El estado inicial del grupo de columnas que se especifica como contraíble es Expanded establecido en verdadero, pero puede cambiar fácilmente este comportamiento configurándolo en falso.
Plantilla de indicador de expandir/contraer
El indicador de expansión predeterminado para IgcTreeGridComponent es el siguiente:
El indicador de colapso predeterminado para IgcTreeGridComponent es el siguiente:
Además, si necesita cambiar el indicador predeterminado de expandir/contraer, proporcionamos opciones de plantillas para lograrlo.
constructor() {
var info = document.getElementById('info') as IgcColumnGroupComponent;
var address = document.getElementById('address') as IgcColumnGroupComponent;
info.collapsibleIndicatorTemplate = this.indTemplate;
address.collapsibleIndicatorTemplate = this.indTemplate;
}
public indTemplate = (ctx: IgcColumnTemplateContext) => {
return html`<igc-iconname="${ctx.column.expanded ? 'remove' : 'add'}"draggable="false"></igc-icon>
`;
}
ts
Nota Tenga en cuenta que inicialmente la opción de contraer grupo tiene prioridad sobre la columna oculta. Si declaró que su columna estaba oculta usando la propiedad oculta y tiene un grupo definido donde se debe mostrar la misma columna, se mostrará la columna.