Carga de rejilla de árbol bajo demanda

La cuadrícula de árbol de Ignite UI for Web Components 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. A continuación, 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 Load on Demand, se puede configurar fácilmente para trabajar con cualquier dato remoto.

Web Components Tree Grid Load On Demand Example

Usage

La función Cargar bajo demanda es compatible con ambos tipos de orígenes de datos de cuadrícula de árbol: claves primarias y externas o colecciones secundarias. Solo necesita cargar los datos de nivel raíz en la cuadrícula de árbol 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, la cuadrícula de árbol proporciona la propiedad LoadChildrenOnDemand de entrada de devolución de llamada.

<igc-tree-grid id="treeGrid"></igc-tree-grid>

constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
    this.getData(parentID, (children) => done(children));
    };
}

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.getData(parentID, (children) => done(children));
}

Después de que el usuario haga 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. La cuadrícula de árbol agrega los elementos secundarios a la fuente de datos subyacente y rellena automáticamente las claves necesarias.

Si tiene una manera de proporcionar información sobre si una fila tiene elementos secundarios 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 indica si se debe mostrar un indicador de expansión.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" has-children-key="hasEmployees"></igc-tree-grid>

Tenga en cuenta que no es necesario establecer 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 elementos secundarios, aún debe llamar a la devolución de llamada done con una matriz indefinida o vacía. 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 usar la opción RowLoadingIndicatorTemplate para establecer una plantilla personalizada. En el siguiente fragmento de código se muestra cómo establecerlo:

constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.rowLoadingIndicatorTemplate = this.rowLoadingTemplate;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
               this.getData(parentID, (children) => done(children));
    };

}
public rowLoadingTemplate() {
    return html`<igc-icon name="loop" collection="material"></igc-icon>`;
}

API References

IgcTreeGridComponent

Additional Resources

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