Visão geral e configuração da grade de dados hierárquica

    A Grade de Dados Hierárquica Ignite UI for Web Components é usada para exibir e manipular dados tabulares hierárquicos. Vincule rapidamente seus dados com muito pouco código ou use uma variedade de eventos para personalizar diferentes comportamentos. Este componente fornece um rico conjunto de recursos, como seleção de dados, filtragem de estilo do Excel, classificação, paginação, modelagem, movimentação de colunas, fixação de colunas, exportação para Excel e CSV e muito mais. A Grade hierárquica baseia-se no componente de grade plana e estende sua funcionalidade, permitindo que os usuários expandam ou recolham as linhas da grade pai, revelando as grades filhas correspondentes, quando informações mais detalhadas são necessárias.

    Web Components Hierarchical Data Grid Example

    Neste exemplo de grade Web Components, você pode ver como os usuários podem visualizar conjuntos hierárquicos de dados e usar modelos de célula para adicionar outros componentes visuais.

    Getting Started with Ignite UI for Web Components Hierarchical Grid

    Dependencies

    Para começar a usar a grade hierárquica Web Components, primeiro você precisa instalar o igniteui-webcomponents-grids pacote.

    npm install --save igniteui-webcomponents-grids

    Você também precisa incluir a seguinte importação para usar a grade:

    import 'igniteui-webcomponents-grids/grids/combined.js';

    Os estilos correspondentes também devem ser referenciados. Você pode escolher a opção clara ou escura para um dos temas e, com base na configuração do seu projeto, importá-lo:

    import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

    Ou para vinculá-lo:

    <link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>

    Para obter mais detalhes sobre como personalizar a aparência da grade hierárquica, você pode dar uma olhada na seção de estilo.

    Using the Web Components Hierarchical Data Grid

    Data Binding

    O igc-hierarchical-grid deriva de igc-grid e compartilha a maior parte de sua funcionalidade. A principal diferença é que ele permite que vários níveis de hierarquia sejam definidos. Eles são configurados por meio de uma tag separada dentro da definição de igc-hierarchical-grid, chamada igc-row-island. O componente igc-row-island define a configuração de cada grade filha para o nível específico. Várias ilhas de linha por nível também são suportadas. A Grade Hierárquica oferece suporte a duas maneiras de associação aos dados:

    Using hierarchical data

    Se o aplicativo carregar todos os dados hierárquicos como uma matriz de objetos que fazem referência a matrizes filhas de objetos, a Grade Hierárquica poderá ser configurada para lê-los e vinculá-los automaticamente. Aqui está um exemplo de uma fonte de dados hierárquica estruturada corretamente:

    export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

    Cada igc-row-island deve especificar a chave da propriedade que contém os dados filhos.

    <igc-hierarchical-grid auto-generate="true">
    <igc-row-island child-data-key="Albums" auto-generate="true">
        <igc-row-island child-data-key="Songs" auto-generate="true">
        </igc-row-island>
    </igc-row-island>
    <igc-row-island child-data-key="Tours" auto-generate="true">
    </igc-row-island>
</igc-hierarchical-grid>

    [!NOTE] Note that instead of data the user configures only the childDataKey that the igc-hierarchical-grid needs to read to set the data automatically.

    Using Load-On-Demand

    A maioria dos aplicativos é projetada para carregar o mínimo de dados possível inicialmente, o que resulta em tempos de carregamento mais rápidos. Nesses casos, igc-hierarchical-grid pode ser configurado para permitir que serviços criados pelo usuário o alimentem com dados sob demanda.

    <igc-hierarchical-grid id="hGrid" primary-key="customerId" auto-generate="true" height="600px" width="100%">
    <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId" auto-generate="true">
        <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId" auto-generate="true"></igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

    import { getData } from "./remoteService";

export class HierarchicalGridLoadOnDemand {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });
        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;

        getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
            hierarchicalGrid.isLoading = false;
            hierarchicalGrid.data = data;
            hierarchicalGrid.markForCheck();
        });
    }

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        context.grid.isLoading = true;
        getData(dataState).then((data: any[]) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
        });
    }
}

    const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${URL}${qS}`;
}

    Hide/Show row expand indicators

    Se você tiver uma maneira de fornecer informações se uma linha tem filhos antes de sua expansão, poderá usar a HasChildrenKey propriedade input. Dessa forma, você pode fornecer uma propriedade booleana dos objetos de dados que indica se um indicador de expansão deve ser exibido.

    <igc-hierarchical-grid data="data" primary-key="ID" has-children-key="hasChildren">
</igc-hierarchical-grid>

    Observe que a configuração da HasChildrenKey propriedade não é necessária. Caso você não o forneça, os indicadores de expansão serão exibidos para cada linha.

    Além disso, se você deseja mostrar/ocultar o indicador de expandir/recolher todos os cabeçalhos, você pode usar a ShowExpandAll propriedade. Essa interface do usuário é desabilitada por padrão por motivos de desempenho e não é recomendável habilitá-la em grades com dados grandes ou grades com carga sob demanda.

    Características

    Os recursos de grade podem ser habilitados e configurados por meio da marcação igc-row-island - eles são aplicados a cada grade criada para ele. Alterar as opções em tempo de execução por meio da instância da ilha de linha as altera para cada uma das grades geradas.

    <igc-hierarchical-grid data="localData" auto-generate="false"
    allow-filtering='true' height="600px" width="800px">
    <igc-column field="ID" pinned="true" filterable="true"></igc-column>
    <igc-column-group header="Information">
        <igc-column field="ChildLevels"></igc-column>
        <igc-column field="ProductName" has-summary="true"></igc-column>
    </igc-column-group>
    <igc-row-island child-data-key="childData" auto-generate="false" row-selection="multiple">
        <igc-column field="ID" has-summary="true" data-type="number"></igc-column>
        <igc-column-group header="Information2">
            <igc-column field="ChildLevels"></igc-column>
            <igc-column field="ProductName"></igc-column>
        </igc-column-group>
        <igc-paginator per-page="5"></igc-paginator>
    </igc-row-island>
    <igc-paginator>
    </igc-paginator>
</igc-hierarchical-grid>

    Os seguintes recursos de grade funcionam em um nível por grade, o que significa que cada instância de grade os gerencia independentemente do restante das grades:

    • Classificação
    • Filtragem
    • Paginação
    • Cabeçalhos de várias colunas
    • Escondendo
    • Fixação
    • Movente
    • Resumos
    • Procurar

    Os recursos de Seleção e Navegação funcionam globalmente para toda a Grade Hierárquica

    • Seleção A seleção não permite que as células selecionadas estejam presentes para duas grades filho diferentes ao mesmo tempo.
    • Navegação Ao navegar para cima/para baixo, se o elemento next/prev for uma grade filho, a navegação continuará na grade filho relacionada, marcando a célula relacionada como selecionada e focada. Se a célula filho estiver fora da porta de exibição visível atual, ela será rolada para a exibição para que a célula selecionada esteja sempre visível.

    Collapse All Button

    A grade hierárquica permite que os usuários recolham convenientemente todas as suas linhas atualmente expandidas pressionando o botão "Recolher tudo" no canto superior esquerdo. Além disso, cada grade filha que contém outras grades e é uma grade hierárquica em si, também possui esse botão - dessa forma, o usuário pode recolher apenas uma determinada grade na hierarquia:

    Styling

    Além dos temas predefinidos, a grade pode ser personalizada ainda mais definindo algumas das propriedades CSS disponíveis. Caso você queira alterar o plano de fundo do cabeçalho e a cor do texto, você precisa definir uma classe para a grade primeiro:

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

    Em seguida, defina as--header-background propriedades e--header-text-color CSS para essa classe:

    .grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

    Demo

    Known Limitations

    Limitação Descrição
    Agrupar por O recurso Agrupar por não é suportado pela grade hierárquica.

    API References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.