Carga de rejilla de árbol bajo demanda

    La Ignite UI for Angular IgxTreeGrid se puede representar de tal manera que requiera la cantidad mínima de datos para obtener del servidor para que el usuario pueda verlos lo más rápido posible. Luego, solo después de que el usuario expanda una fila, se cargarán los elementos secundarios de esa fila principal en particular. Este mecanismo, también conocido como Carga bajo demanda, se puede configurar fácilmente para funcionar con cualquier dato remoto.

    Angular Tree Grid Load On Demand Example

    Usage

    La función Cargar bajo demanda es compatible con ambos tipos de fuentes de datos de Tree Grid: primary and foreign keys o child collection. Solo necesita cargar los datos del nivel raíz en Tree Grid y especificar las claves necesarias para uno de los tipos de fuente de datos. Para cargar las filas secundarias cuando el usuario expande una fila, Tree Grid proporciona la propiedad de entrada de devolución de llamada loadChildrenOnDemand.

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren">
        ...
</igx-tree-grid>

    La devolución de llamada loadChildrenOnDemand proporciona dos parámetros:

    • parentID: el ID de la fila principal que se está expandiendo.
    • done: devolución de llamada que se debe llamar con los niños cuando se recuperan del servidor.
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, (children) => done(children));
}

    Después de que el usuario hace clic en el icono de expansión, se reemplaza por un indicador de carga. Cuando se llama a la devolución de llamada done, el indicador de carga desaparece y se cargan los elementos secundarios. Tree Grid agrega los elementos secundarios a la fuente de datos subyacente y completa las claves necesarias automáticamente.

    Si tiene una manera de proporcionar información sobre si una fila tiene hijos antes de expandirse, puede usar la propiedad de entrada hasChildrenKey. De esta manera, podría proporcionar una propiedad booleana de los objetos de datos que indique si se debe mostrar un indicador de expansión.

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren" hasChildrenKey="hasEmployees">
        ...
</igx-tree-grid>

    Tenga en cuenta que no es necesario configurar la propiedad hasChildrenKey. En caso de que no lo proporcione, se mostrarán indicadores de expansión para cada fila. Después de expandir una fila que no tiene hijos, aún necesita llamar a la devolución de llamada done con una matriz vacía o indefinida. En este caso, después de que desaparece el indicador de carga, el indicador de expansión nunca aparece.

    Si desea proporcionar su propio indicador de carga personalizado, puede crear una plantilla ng y marcarla con la directiva igxRowLoadingIndicator. El siguiente fragmento de código demuestra cómo definir dicha plantilla personalizada:

    <igx-tree-grid ...>

    ...

    <ng-template igxRowLoadingIndicator>
        <igx-icon fontSet="material">loop</igx-icon>
    </ng-template>
</igx-tree-grid>

    API References

    Additional Resources

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