Grades jQuery com cabeçalhos de várias colunas

Por meio de uma configuração muito simples (e lógica, eu acho) de colunas e layouts, esse recurso permite o agrupamento visual e às vezes funcional de cabeçalhos de coluna em um pai comum.

Embora por si só possa ser principalmente uma coisa visual, tendo outras partes/módulos da Grade Ignite UI e da Grade Hierárquica cientes disso, pode ter algumas interações realmente interessantes. Eles podem não fazer parte do código real dos widgets, mas são um subproduto de ter cabeçalhos de coluna agrupados ao usar outros recursos. E abaixo vou lançar mais alguns nomes de recursos para referência em um só lugar.

Quick Start

Afinal, você precisa começar de algum lugar e se você é como eu e apenas direto para a API para verificar os recursos, você terá um leve choque. Do jeito que está, o widget de cabeçalhos de várias colunas não oferece muito. Então, como você configura isso? Bem, tudo se torna muito razoável quando você começa a pensar sobre o widget em si como um botão liga / desliga (que é exatamente o que ele faz) e as definições de coluna estão onde sempre estiveram .. na coleção de colunas! Você pode simplesmente adicionar um que tenha uma coleção própria atribuída à sua propriedade 'group'. Dentro, você pode ter mais colunas com grupos e assim por diante – o recurso deve permitir cabeçalhos aninhados virtualmente ilimitados. Então você também tem algumas propriedades adicionais, como uma chave e um intervalo de linha. Um trecho parcial com o ASP.NET MVC Helper (as linhas importantes são 5 e 6):

@(Html.Infragistics().Grid<MultiColumnHeaders.Models.Department>()
    .Columns(column =>
    {
        column.For(x => x.DepartmentID).HeaderText("DEP Id");
        column.MultiColumnHeader("Dep").HeaderText("Dep")
            .Group(innerColumn =>
            {
                innerColumn.For(x => x.Name).HeaderText("Name");
                innerColumn.For(x => x.GroupName).HeaderText("GroupName");
            });
    })
    //...

E é tão simples no script (linha 9):

$('#grid').igHierarchicalGrid({
    columns: [{
        key: 'DepartmentID',
        dataType: 'number',
        headerText: 'DEP Id'
    }, {
        key: 'Dep',
        headerText: 'Dep',
        group: [{
            key: 'Name',
            dataType: 'string',
            headerText: 'Name'
        }, {
            key: 'GroupName',
            dataType: 'string',
            headerText: 'GroupName'
        }]
    }],
    //..

Para que os layouts acima funcionem, basta adicionar o recurso "MultiColumnHeaders" à respectiva coleção:

//....
.Features(feature => feature.MultiColumnHeaders().Inherit(true))
//  ---- OR -----
 features: [{
            name: 'MultiColumnHeaders'
        }],
//...

Você tem duas opções aqui, como de costume, quando se trata da Grade Hierárquica – você pode definir o recurso na coleção do pai e permitir a herança ou adicioná-lo ao layout específico. No geral, você pode conferir os tópicos do cabeçalho de várias colunas do igGrid em nossa ajuda, eles já contêm um guia bastante detalhado. Ou você também pode consultar a seção de exemplos e demonstrações abaixo e aprender por exemplo 🙂

Não tão rápido!

Primeiro, vamos entender um pouco o que exatamente o recurso faz para modificar a marcação no THEAD da tabela Grid. O recurso Multi-Column Headers fornece alinhamento pronto para uso -como seria de esperar, grande parte dele gira em torno de descobrir a maneira perfeita de alinhar cabeçalhos de coluna reais - definindo "colspan" e intervalos de linha, o último você pode ajustar (mais sobre isso abaixo). A única configuração necessária é realmente a coleção de grupo, na verdade. Bem, acho que o texto do cabeçalho também é muito bom de se ter, porque você acabará com o cabeçalho dizendo 'indefinido' caso contrário.

Depois, há também a chave. Ao contrário das configurações de coluna usuais, a chave nesse caso não corresponde a uma propriedade de dados. Então, por que você precisaria disso? Quando você não atribui uma chave a um cabeçalho de várias colunas (que funciona como identificador), você ficará preso ao que quer que a grade crie por conta própria. Isso significa que os identificadores serão gerados (número de identificação incremental) e nem sempre são atribuídos como você esperaria. Além disso, talvez você tenha visto alguns métodos – particularmente com API que manipulam colunas como Ocultar e Mover – que aceitam identificadores/chaves de várias colunas. A falta de uma chave às vezes pode causar um comportamento estranho, por isso é melhor se você considerar isso necessário também. Além disso, você não quer perder a oportunidade de facilitar a segmentação de cabeçalho:

Quando você define uma chave, os cabeçalhos também recebem id-s (combinação do ID da grade de Ignite UI e da coluna) que você pode usar para segmentação super rápida e fácil. Isso coloca esses cabeçalhos alinhados com os vinculados a dados que você vê com o atributo "data-isheadercell" definido como true.

A linha do bem e do mal se estende

A propriedade 'rowspan' é uma referência direta à propriedade de célula da tabela subjacente, no entanto, o próprio recurso descobre o alinhamento das células nas linhas (para que elas se estendam e alinhem da maneira que você esperaria que as linhas às vezes acabem contendo cabeçalhos de grupo e associados a dados). Portanto, há algumas 'pegadinhas' aqui. Por exemplo, veja o caso abaixo (algumas colunas estão ocultas e outras comprimidas para que possam caber na foto), onde definimos o cabeçalho do grupo "Informações do registro" de sua única linha original para dois, a fim de empurrar sua coluna filho para baixo e alinhá-los com o resto.

Observe como a intenção de apenas alinhar todos os cabeçalhos 'reais' em uma linha organizada resultou na ampliação de toda a tabela de cabeçalhos. Como isso alinhou os dois últimos cabeçalhos de coluna com o restante em uma linha organizada, eles realmente acabaram na mesma linha da tabela na marcação. E como eram um pouco maiores com mais texto, a linha se expandiu para caber neles, causando o alongamento. Além disso, se você definir intervalos de linha para colunas que não têm mais nada para ocupar espaço ou não há espaço suficiente para caber no resto, você pode acabar precisando compensar em outro lugar para evitar layout distorcido. Geralmente, sugiro confiar na grade para fazer isso por você.

Saiba mais sobre a API

Como você pode ver devidamente observado na documentação, o próprio getMultiColumnHeaders  do recurso deve ser usado para obter os cabeçalhos e seus grupos, como se você obtivesse a coleção de colunas do widget igGrid usando $(".selector").igGrid("option", "columns"), você obterá apenas os 'reais' - sem hierarquia de grupo.

É um caso semelhante com a grade hierárquica, mas por razões diferentes. Você pode realmente puxar as opções de coluna como de costume e elas conterão os cabeçalhos do grupo e seus filhos, no entanto, isso só é bom se você precisar verificar a hierarquia do cabeçalho. Para obter informações adicionais, como intervalo de coluna/linha, identificador ou nível, você deve confiar novamente no método getMultiColumnHeaders.

Há outro método, que curiosamente a API está faltando, mas a documentação não e achei bom mencionar - é chamado de "renderMultiColumnHeader" e usa a mesma coleção de colunas que você forneceria para inicialização de grade. Com ele, você pode alterar o arranjo dos cabeçalhos de várias colunas em tempo de execução ou até mesmo definir colunas sem nenhuma - lembre-se de que custa uma religação de grade. Também é bastante simples de usar:

$('#Grid1').igGrid("renderMultiColumnHeader", [{
    key: 'DepartmentID',
    dataType: 'number',
    headerText: 'DEP Id'
}, {
    headerText: "Dep",
    group: [
    //...
    ]
}]);

Existem outras configurações que você normalmente veria na API que são compartilhadas para todas as colunas (menos com os ASP.NET MVC auxiliares) que você pode definir, mas geralmente serão ignoradas (modelos, formatadores e outros não fazem muito sentido lá). Existem alguns que se aplicariam, mas ainda não se aplicam - por exemplo, a propriedade width. A largura do cabeçalho de várias colunas é determinada por seu grupo e, para definir a largura dele, basta configurá-lo nas colunas filhas.

Styling

O recurso aplica uma única classe específica ("ui-iggrid-multiheader-cell") aos cabeçalhos que você pode direcionar com CSS. Isso permite que estilos específicos diferenciem os cabeçalhos do grupo do resto, o que é algo que eu acho que o tema Infragistics padrão precisa. Você pode fazer qualquer coisa realmente, mas eu decidi que um sublinhado sutil vai fazer muito bem (que eu roubei totalmente do tema Modern UI!) então com o seguinte estilo:

.ui-iggrid th.ui-iggrid-multiheader-cell {
    border-bottom-color: #2cbdf9;
    border-bottom-width: 1px;
}

Você obtém algo semelhante a isso. Você pode até usar algumas pseudo-classes para alternar entre os estilos caso tenha mais grupos, o que eu também fiz em minhas amostras, então confira abaixo.

Interação de recursos

Já mencionei no meu último blog que o Column Moving está funcionando bem com vários cabeçalhos. E, como você pode imaginar, os cabeçalhos pai também podem ser arrastados para mover todos os seus filhos de uma só vez. Então, o que mais interessante?

Com o recurso de ocultação, você obtém um bom ícone no cabeçalho para usar para ocultar todo o grupo e o pai desaparecerá se todas as colunas aninhadas estiverem ocultas. Você também pode simplesmente definir a propriedade 'hidden' da coluna para ocultá-la por padrão e essa parte nem requer o respectivo recurso para funcionar (mas não terá interface do usuário e interações para mostrar as colunas sem).

Os métodos de API de ambos os recursos que executam operações de coluna também aceitarão o identificador de cabeçalho de várias colunas no lugar da chave.

Ao redimensionar, o usuário pode interagir com colunas individuais ou com o cabeçalho do grupo, levando a reações satisfatórias – o redimensionamento de colunas aninhadas modificará a largura do pai e vice-versa.

Em termos de interface do usuário, tanto Ocultação quanto Movimentação de Coluna produzem seus ícones de cabeçalho distintos para interação, como visto na imagem superior do blog. Ao contrário das colunas vinculadas a dados que acumulam recursos adicionais em um único ícone de engrenagem, as de grupo não suportam mais do que as duas acima e, portanto, não recebem um seletor de recursos! Isso pode mudar à medida que mais recursos que fazem sentido para serem executados em massa são adicionados às grades (* dica, dica * pode acontecer muito em breve também).

Eu adoraria ouvir alguns pensamentos, então deixe um comentário abaixo ou @DamyanPetev.

E como sempre, você pode nos seguir no Twitter@ Infragisticse manter contato noFacebook,Google+eLinkedIn!