Cuadrículas de jQuery con encabezados de varias columnas

A través de una configuración muy simple (y lógica, creo) de columnas y diseños, esta característica permite la agrupación visual y, a veces, funcional de encabezados de columna bajo un padre común.

Si bien por sí solo puede ser principalmente una cosa visual, teniendo otras partes / módulos de la Cuadrícula Ignite UI y la Cuadrícula Jerárquica siendo conscientes de ello, puede tener algunas interacciones realmente interesantes. Es posible que estos no sean parte del código real de los widgets, pero son un subproducto de tener encabezados de columna agrupados mientras se usan otras funciones. Y a continuación, le lanzaré algunos nombres de características más como referencia en un solo lugar.

Quick Start

Después de todo, necesitas comenzar en algún lugar y si eres como yo y solo vas directo a la API para verificar las capacidades, te espera un ligero susto. Tal como está, el widget de encabezados de varias columnas no ofrece mucho. Entonces, ¿cómo se configura? Bueno, todo se vuelve muy razonable cuando comienzas a pensar en el widget en sí mismo como un interruptor de encendido / apagado (que es exactamente lo que hace) y las definiciones de columna están donde siempre estuvieron. en la colección de columnas! Simplemente puede agregar uno que tenga una colección por sí misma asignada a su propiedad 'group'. En su interior, puede tener más columnas con grupos, etc.: la función debería permitir encabezados anidados prácticamente ilimitados. A continuación, también tiene algunas propiedades adicionales, como una clave y un intervalo de filas. Un fragmento parcial con el ayudante ASP.NET MVC (las líneas importantes son 5 y 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");
            });
    })
    //...

Y es tan simple en el script (línea 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 los diseños anteriores funcionen, simplemente agregue la característica "MultiColumnHeaders" a la colección respectiva:

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

Aquí tiene dos opciones, como de costumbre cuando se trata de la cuadrícula jerárquica: puede definir la característica en la colección principal y permitir la herencia o agregarla al diseño específico. En general, puedes consultar los temas de igGrid Multi-Column Header en nuestra ayuda, ya contienen una guía bastante detallada. O también puede consultar la sección de muestras y demostraciones a continuación y aprender con el ejemplo 🙂

¡No tan rápido!

En primer lugar, comprendamos un poco qué hace exactamente la función que modifica el marcado en el THEAD de la tabla Grid. La función de encabezados de varias columnas proporciona una alineación lista para usar, como era de esperar, gran parte de ella gira en torno a descubrir la manera perfecta de alinear los encabezados de columna reales allí, configurando "colspan" y tramos de fila, este último puede modificarlo (más sobre eso a continuación). En realidad, la única configuración necesaria es la colección grupal. Bueno, supongo que el texto del encabezado también es muy bueno de tener, porque de lo contrario terminarás con un encabezado que dice 'indefinido'.

Luego también está la clave. A diferencia de la configuración de columna habitual, la clave en este caso no corresponde a una propiedad de datos. Entonces, ¿por qué lo necesitarías? Cuando no asigna una clave a un encabezado de varias columnas (que también funciona como identificador), se quedará atrapado con lo que sea que se le ocurra a la cuadrícula por sí sola. Eso significa que los identificadores se generarán (id de número creciente) y estos no siempre se asignan como cabría esperar. Además, es posible que haya visto algunos métodos, particularmente con API que manipulan columnas como Hiding y Moving, que aceptan identificadores/claves de varias columnas. La falta de una llave a veces puede causar un comportamiento extraño, por lo que es mejor si también la considera necesaria. Además, no querrás perderte la oportunidad de facilitar la segmentación de encabezados:

Cuando defina una clave, a los encabezados también se les asignarán id-s (combinación del ID de la cuadrícula de Ignite UI y la de la columna) que puede usar para una orientación súper rápida y fácil. Esto pone esos encabezados en línea con los enlazados a datos que ve con el atributo "data-isheadercell" establecido en true.

La fila del bien y del mal se extiende

La propiedad 'rowspan' es una referencia directa a la propiedad de celda de la tabla subyacente, sin embargo, la característica en sí misma determina la alineación de las celdas en las filas (para que se extiendan y alineen de la manera que esperaría, las filas a veces terminan conteniendo encabezados de grupo y enlazados a datos). Así que hay algunos 'gotcha' aquí mismo. Por ejemplo, tomemos el siguiente caso (algunas columnas están ocultas y otras aplastadas para que puedan caber en la toma) donde establecemos el encabezado del grupo "Información de registro" de su intervalo original de una sola fila a dos para empujar su columna secundaria más abajo y alinearlas con el resto.

Observe cómo la intención de simplemente alinear todos los encabezados "reales" en una fila ordenada resultó en la ampliación de toda la tabla de encabezados. Debido a que esto alineó los dos últimos encabezados de columna con el resto en una fila ordenada, en realidad terminaron en la misma fila de la tabla en el marcado. Y como eran un poco más grandes con más texto, la fila se expandió para ajustarse, lo que provocó el estiramiento. Además, si define intervalos de filas para columnas que no tienen nada más que ocupar espacio o que no tienen suficiente espacio para caber en el resto, puede acabar necesitando compensar en otro lugar para evitar un diseño sesgado. En general, sugeriría confiar en la red para que lo haga por usted.

Más información sobre la API

Como puede ver debidamente anotado en la documentación, se deben usar los getMultiColumnHeaders  propios de la función para obtener los encabezados y sus grupos, ya que si obtiene la colección de columnas del widget igGrid usando $(".selector").igGrid("option", "columns") obtendrá solo los 'reales', sin jerarquía de grupos.

Es un caso similar con la cuadrícula jerárquica, pero por diferentes razones. De hecho, puede extraer las opciones de columna como de costumbre y contendrán los encabezados de grupo y sus hijos, sin embargo, eso solo es bueno si necesita verificar la jerarquía de encabezados. Para obtener información adicional, como el intervalo de columna/fila, el identificador o el nivel, debe volver a confiar en el método getMultiColumnHeaders.

Hay otro método, que, curiosamente, falta en la API, pero la documentación no y pensé que era bueno mencionarlo: se llama "renderMultiColumnHeader" y toma la misma colección de columnas que proporcionaría para la inicialización de la cuadrícula. Con él, puede cambiar la disposición de los encabezados de varias columnas en tiempo de ejecución o incluso definir columnas sin ninguna, solo tenga en cuenta que cuesta volver a vincular la cuadrícula. También es bastante fácil de usar:

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

Hay otras configuraciones que normalmente vería en la API que se comparten para todas las columnas (menos con los ayudantes ASP.NET MVC) que podría establecer, pero generalmente se ignorarán (las plantillas, formateadores y demás no tienen mucho sentido allí). Hay algunos que sí lo harían, pero aún así no se aplicarán, por ejemplo, la propiedad width. El ancho del encabezado de varias columnas está determinado por su grupo y para definir el ancho del mismo, solo tiene que configurarlo en las columnas secundarias.

Styling

La función aplica una sola clase específica ("ui-iggrid-multiheader-cell") a los encabezados a los que puede dirigirse con CSS. Esto permite estilos específicos para diferenciar los encabezados de grupo del resto, que es algo que creo que necesita el tema de Infragistics predeterminado. Realmente puedes hacer cualquier cosa, pero decidí que un subrayado sutil funcionará bastante bien (¡que robé por completo del tema Modern UI!) con el siguiente estilo:

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

Obtienes algo similar a esto. Incluso puedes usar algunas pseudo-clases para alternar entre estilos en caso de que tengas más grupos, lo que también he hecho en mis muestras, así que échales un vistazo a continuación.

Interacción de características

Ya mencioné en mi último blog que Column Moving está jugando bien con múltiples encabezados. Y como puedes imaginar, los encabezados principales también se pueden arrastrar para mover todos sus hijos a la vez. ¿Y qué más interesante?

Con la función de ocultación, obtiene un buen icono en el encabezado para usar para ocultar todo el grupo y el padre desaparecerá si todas las columnas anidadas están ocultas. También puede simplemente configurar la propiedad 'hidden' de la columna para ocultarla de forma predeterminada y esa parte ni siquiera requiere la función respectiva para funcionar (pero carecerá de interfaz de usuario e interacciones para mostrar las columnas sin ella).

Los métodos de API de ambas características que realizan operaciones de columna también aceptarán un identificador de encabezado de varias columnas en lugar de la clave.

Al cambiar el tamaño, el usuario puede interactuar tanto con columnas individuales como con su encabezado de grupo, lo que lleva a reacciones satisfactorias: cambiar el tamaño de las columnas anidadas modificará el ancho del padre y viceversa.

En términos de interfaz de usuario, tanto Hiding como Column Moving producen sus íconos de encabezado distintivos para la interacción, como se ve en la imagen superior del blog. A diferencia de las columnas enlazadas a datos que acumulan características adicionales en un solo icono de engranaje, las de grupo no admiten más que las dos anteriores y, por lo tanto, no obtienen un selector de funciones. Eso podría cambiar a medida que se agreguen a las cuadrículas más características que tienen sentido que se realicen de forma masiva (*sugerencia, sugerencia* también podría suceder muy pronto).

Me encantaría escuchar algunas ideas, así que deja un comentario a continuación o @DamyanPetev.

Y como siempre, puedes seguirnos en Twitter@ Infragisticsy mantenerte en contacto enFacebook,Google+yLinkedIn.