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 de Carga bajo demanda es compatible con ambos tipos de fuentes de datos de la Red de Árbol: claves primarias y extranjeras o recogida hija. Solo necesitas cargar los datos a nivel raíz en la Tree Grid y especificar las claves necesarias para uno de los tipos de fuente de datos. Para cargar las filas hijas cuando el usuario expande una fila, la Tree Grid proporciona la propiedadloadChildrenOnDemand de entrada de callback.

    <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.

    Expanding Indicator Visibility

    Si tienes una forma de proporcionar información sobre si una fila tiene hijos antes de expandirse, podrías usar la propiedad dehasChildrenKey entrada. De este modo, podrías proporcionar una propiedad booleana desde los objetos de datos que indique si debe mostrarse un indicador de expansión.

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

    Ten en cuenta que no es necesario establecer lahasChildrenKey propiedad. En caso de que no lo proporciones, se mostrarán indicadores de expansión para cada fila. Después de expandir una fila que no tiene hijos, aún necesitas llamar a la callback terminada con un array indefinido o vacío. En este caso, después de que desaparece el indicador de carga, el indicador de expansión nunca aparece.

    Custom Loading Indicator

    Si quieres proporcionar tu propio indicador de carga personalizado, puedes usar larowLoadingIndicatorTemplate opción para establecer una plantilla personalizada. El siguiente fragmento de código demuestra cómo se configura para él:

    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

    Additional Resources

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